@needle-tools/engine 2.52.0-pre → 2.54.2-pre

package/src/engine-components/codegen/components.ts

@@ -3,160 +3,164 @@ export class __Ignore {}
 export { AlignmentConstraint } from "../AlignmentConstraint";
 export { Animation } from "../Animation";
 export { AnimationCurve } from "../AnimationCurve";
+export { AnimationExtension } from "../export/usdz/extensions/Animation";
+export { AnimationTrackHandler } from "../timeline/TimelineTracks";
 export { Animator } from "../Animator";
 export { AnimatorController } from "../AnimatorController";
+export { AttachedObject } from "../WebXRController";
 export { AudioListener } from "../AudioListener";
 export { AudioSource } from "../AudioSource";
-export { AvatarModel } from "../AvatarLoader";
+export { AudioTrackHandler } from "../timeline/TimelineTracks";
+export { Avatar_Brain_LookAt } from "../avatar/Avatar_Brain_LookAt";
+export { Avatar_MouthShapes } from "../avatar/Avatar_MouthShapes";
+export { Avatar_MustacheShake } from "../avatar/Avatar_MustacheShake";
+export { Avatar_POI } from "../avatar/Avatar_Brain_LookAt";
+export { AvatarBlink_Simple } from "../avatar/AvatarBlink_Simple";
+export { AvatarEyeLook_Rotation } from "../avatar/AvatarEyeLook_Rotation";
 export { AvatarLoader } from "../AvatarLoader";
+export { AvatarMarker } from "../WebXRAvatar";
+export { AvatarModel } from "../AvatarLoader";
 export { AxesHelper } from "../AxesHelper";
+export { BaseUIComponent } from "../ui/BaseUIComponent";
 export { BasicIKConstraint } from "../BasicIKConstraint";
+export { BoxCollider } from "../Collider";
+export { BoxGizmo } from "../Gizmos";
 export { BoxHelperComponent } from "../BoxHelperComponent";
+export { Button } from "../ui/Button";
+export { CallInfo } from "../EventList";
 export { Camera } from "../Camera";
+export { Canvas } from "../ui/Canvas";
+export { CanvasGroup } from "../ui/CanvasGroup";
+export { CapsuleCollider } from "../Collider";
 export { CharacterController } from "../CharacterController";
 export { CharacterControllerInput } from "../CharacterController";
 export { Collider } from "../Collider";
-export { SphereCollider } from "../Collider";
-export { BoxCollider } from "../Collider";
-export { MeshCollider } from "../Collider";
-export { CapsuleCollider } from "../Collider";
-export { DeleteBox } from "../DeleteBox";
+export { ColorAdjustments } from "../Volume";
+export { ColorBySpeedModule } from "../ParticleSystemModules";
+export { ColorOverLifetimeModule } from "../ParticleSystemModules";
+export { ControlTrackHandler } from "../timeline/TimelineTracks";
 export { Deletable } from "../DeleteBox";
+export { DeleteBox } from "../DeleteBox";
 export { DeviceFlag } from "../DeviceFlag";
 export { DragControls } from "../DragControls";
 export { DropListener } from "../DropListener";
 export { Duplicatable } from "../Duplicatable";
-export { CallInfo } from "../EventList";
-export { EventListEvent } from "../EventList";
+export { EmissionModule } from "../ParticleSystemModules";
 export { EventList } from "../EventList";
+export { EventListEvent } from "../EventList";
+export { EventSystem } from "../ui/EventSystem";
 export { EventTrigger } from "../EventTrigger";
+export { FieldWithDefault } from "../Renderer";
+export { FixedJoint } from "../Joints";
 export { FlyControls } from "../FlyControls";
-export { BoxGizmo } from "../Gizmos";
+export { GltfExport } from "../export/gltf/GltfExport";
+export { GltfExportBox } from "../export/gltf/GltfExport";
+export { Gradient } from "../ParticleSystemModules";
+export { Graphic } from "../ui/Graphic";
+export { GraphicRaycaster } from "../ui/Raycaster";
 export { GridHelper } from "../GridHelper";
+export { GridLayoutGroup } from "../ui/Layout";
 export { GroundProjectedEnv } from "../GroundProjection";
-export { Interactable } from "../Interactable";
-export { UsageMarker } from "../Interactable";
-export { FixedJoint } from "../Joints";
 export { HingeJoint } from "../Joints";
+export { HorizontalLayoutGroup } from "../ui/Layout";
+export { Image } from "../ui/Image";
+export { InheritVelocityModule } from "../ParticleSystemModules";
+export { InputField } from "../ui/InputField";
+export { Interactable } from "../Interactable";
+export { Keyboard } from "../ui/Keyboard";
+export { LayoutGroup } from "../ui/Layout";
 export { Light } from "../Light";
-export { LODModel } from "../LODGroup";
+export { LimitVelocityOverLifetimeModule } from "../ParticleSystemModules";
 export { LODGroup } from "../LODGroup";
+export { LODModel } from "../LODGroup";
+export { LogStats } from "../debug/LogStats";
 export { LookAtConstraint } from "../LookAtConstraint";
+export { MainModule } from "../ParticleSystemModules";
+export { MaskableGraphic } from "../ui/Graphic";
+export { MeshCollider } from "../Collider";
+export { MeshRenderer } from "../Renderer";
+export { MinMaxCurve } from "../ParticleSystemModules";
+export { MinMaxGradient } from "../ParticleSystemModules";
 export { NestedGltf } from "../NestedGltf";
 export { Networking } from "../Networking";
+export { NoiseModule } from "../ParticleSystemModules";
+export { ObjectRaycaster } from "../ui/Raycaster";
 export { OffsetConstraint } from "../OffsetConstraint";
 export { OrbitControls } from "../OrbitControls";
-export { SubEmitterSystem } from "../ParticleSystem";
-export { ParticleSystemRenderer } from "../ParticleSystem";
-export { ParticleSystem } from "../ParticleSystem";
-export { Gradient } from "../ParticleSystemModules";
-export { MinMaxCurve } from "../ParticleSystemModules";
-export { MinMaxGradient } from "../ParticleSystemModules";
-export { MainModule } from "../ParticleSystemModules";
 export { ParticleBurst } from "../ParticleSystemModules";
-export { EmissionModule } from "../ParticleSystemModules";
-export { ColorOverLifetimeModule } from "../ParticleSystemModules";
-export { SizeOverLifetimeModule } from "../ParticleSystemModules";
-export { ShapeModule } from "../ParticleSystemModules";
-export { NoiseModule } from "../ParticleSystemModules";
-export { TrailModule } from "../ParticleSystemModules";
-export { VelocityOverLifetimeModule } from "../ParticleSystemModules";
-export { TextureSheetAnimationModule } from "../ParticleSystemModules";
-export { RotationOverLifetimeModule } from "../ParticleSystemModules";
-export { RotationBySpeedModule } from "../ParticleSystemModules";
-export { LimitVelocityOverLifetimeModule } from "../ParticleSystemModules";
-export { InheritVelocityModule } from "../ParticleSystemModules";
-export { SizeBySpeedModule } from "../ParticleSystemModules";
-export { ColorBySpeedModule } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";
+export { ParticleSystem } from "../ParticleSystem";
+export { ParticleSystemRenderer } from "../ParticleSystem";
+export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayerColor } from "../PlayerColor";
+export { PointerEventData } from "../ui/PointerEvents";
+export { RawImage } from "../ui/Image";
+export { Raycaster } from "../ui/Raycaster";
+export { Rect } from "../ui/RectTransform";
+export { RectTransform } from "../ui/RectTransform";
 export { ReflectionProbe } from "../ReflectionProbe";
-export { FieldWithDefault } from "../Renderer";
+export { RegisteredAnimationInfo } from "../export/usdz/extensions/Animation";
+export { RemoteSkybox } from "../Skybox";
 export { Renderer } from "../Renderer";
-export { MeshRenderer } from "../Renderer";
-export { SkinnedMeshRenderer } from "../Renderer";
 export { RendererLightmap } from "../RendererLightmap";
+export { RGBAColor } from "../js-extensions/RGBAColor";
 export { Rigidbody } from "../RigidBody";
+export { RotationBySpeedModule } from "../ParticleSystemModules";
+export { RotationOverLifetimeModule } from "../ParticleSystemModules";
 export { ScreenCapture } from "../ScreenCapture";
 export { ShadowCatcher } from "../ShadowCatcher";
-export { RemoteSkybox } from "../Skybox";
+export { ShapeModule } from "../ParticleSystemModules";
+export { SignalAsset } from "../timeline/SignalAsset";
+export { SignalReceiver } from "../timeline/SignalAsset";
+export { SignalReceiverEvent } from "../timeline/SignalAsset";
+export { SignalTrackHandler } from "../timeline/TimelineTracks";
+export { Size } from "../ui/RectTransform";
+export { SizeBySpeedModule } from "../ParticleSystemModules";
+export { SizeOverLifetimeModule } from "../ParticleSystemModules";
+export { SkinnedMeshRenderer } from "../Renderer";
 export { SmoothFollow } from "../SmoothFollow";
-export { SpatialTriggerReceiver } from "../SpatialTrigger";
+export { SpatialHtml } from "../ui/SpatialHtml";
 export { SpatialTrigger } from "../SpatialTrigger";
+export { SpatialTriggerReceiver } from "../SpatialTrigger";
 export { SpectatorCamera } from "../SpectatorCamera";
+export { SphereCollider } from "../Collider";
 export { Sprite } from "../SpriteRenderer";
-export { SpriteSheet } from "../SpriteRenderer";
 export { SpriteRenderer } from "../SpriteRenderer";
+export { SpriteSheet } from "../SpriteRenderer";
+export { SubEmitterSystem } from "../ParticleSystem";
 export { SyncedCamera } from "../SyncedCamera";
 export { SyncedRoom } from "../SyncedRoom";
 export { SyncedTransform } from "../SyncedTransform";
+export { TeleportTarget } from "../WebXRController";
 export { TestRunner } from "../TestRunner";
 export { TestSimulateUserData } from "../TestRunner";
+export { Text } from "../ui/Text";
+export { TextureSheetAnimationModule } from "../ParticleSystemModules";
+export { ToneMapping } from "../Volume";
+export { TrailModule } from "../ParticleSystemModules";
+export { TransformData } from "../export/usdz/extensions/Animation";
 export { TransformGizmo } from "../TransformGizmo";
+export { UIRaycastUtils } from "../ui/RaycastUtils";
+export { UIRootComponent } from "../ui/BaseUIComponent";
+export { UsageMarker } from "../Interactable";
+export { USDZExporter } from "../export/usdz/USDZExporter";
+export { VelocityOverLifetimeModule } from "../ParticleSystemModules";
+export { VerticalLayoutGroup } from "../ui/Layout";
 export { VideoPlayer } from "../VideoPlayer";
 export { Voip } from "../Voip";
-export { VolumeParameter } from "../Volume";
+export { Volume } from "../Volume";
 export { VolumeComponent } from "../Volume";
-export { ToneMapping } from "../Volume";
-export { ColorAdjustments } from "../Volume";
+export { VolumeParameter } from "../Volume";
 export { VolumeProfile } from "../Volume";
-export { Volume } from "../Volume";
+export { VRUserState } from "../WebXRSync";
+export { WebAR } from "../WebXR";
 export { WebARSessionRoot } from "../WebARSessionRoot";
 export { WebXR } from "../WebXR";
-export { WebAR } from "../WebXR";
-export { AvatarMarker } from "../WebXRAvatar";
 export { WebXRAvatar } from "../WebXRAvatar";
-export { TeleportTarget } from "../WebXRController";
 export { WebXRController } from "../WebXRController";
-export { AttachedObject } from "../WebXRController";
+export { WebXRSync } from "../WebXRSync";
+export { XRFlag } from "../XRFlag";
 export { XRGrabModel } from "../WebXRGrabRendering";
 export { XRGrabRendering } from "../WebXRGrabRendering";
 export { XRRig } from "../WebXRRig";
-export { VRUserState } from "../WebXRSync";
-export { WebXRSync } from "../WebXRSync";
 export { XRState } from "../XRFlag";
-export { XRFlag } from "../XRFlag";
-export { AvatarBlink_Simple } from "../avatar/AvatarBlink_Simple";
-export { AvatarEyeLook_Rotation } from "../avatar/AvatarEyeLook_Rotation";
-export { Avatar_POI } from "../avatar/Avatar_Brain_LookAt";
-export { Avatar_Brain_LookAt } from "../avatar/Avatar_Brain_LookAt";
-export { Avatar_MouthShapes } from "../avatar/Avatar_MouthShapes";
-export { Avatar_MustacheShake } from "../avatar/Avatar_MustacheShake";
-export { LogStats } from "../debug/LogStats";
-export { GltfExportBox } from "../export/GltfExport";
-export { GltfExport } from "../export/GltfExport";
-export { RGBAColor } from "../js-extensions/RGBAColor";
-export { PlayableDirector } from "../timeline/PlayableDirector";
-export { SignalAsset } from "../timeline/SignalAsset";
-export { SignalReceiverEvent } from "../timeline/SignalAsset";
-export { SignalReceiver } from "../timeline/SignalAsset";
-export { AnimationTrackHandler } from "../timeline/TimelineTracks";
-export { AudioTrackHandler } from "../timeline/TimelineTracks";
-export { SignalTrackHandler } from "../timeline/TimelineTracks";
-export { ControlTrackHandler } from "../timeline/TimelineTracks";
-export { BaseUIComponent } from "../ui/BaseUIComponent";
-export { UIRootComponent } from "../ui/BaseUIComponent";
-export { Button } from "../ui/Button";
-export { Canvas } from "../ui/Canvas";
-export { CanvasGroup } from "../ui/CanvasGroup";
-export { EventSystem } from "../ui/EventSystem";
-export { Graphic } from "../ui/Graphic";
-export { MaskableGraphic } from "../ui/Graphic";
-export { Image } from "../ui/Image";
-export { RawImage } from "../ui/Image";
-export { InputField } from "../ui/InputField";
-export { Keyboard } from "../ui/Keyboard";
-export { LayoutGroup } from "../ui/Layout";
-export { VerticalLayoutGroup } from "../ui/Layout";
-export { HorizontalLayoutGroup } from "../ui/Layout";
-export { GridLayoutGroup } from "../ui/Layout";
-export { PointerEventData } from "../ui/PointerEvents";
-export { Raycaster } from "../ui/Raycaster";
-export { ObjectRaycaster } from "../ui/Raycaster";
-export { GraphicRaycaster } from "../ui/Raycaster";
-export { UIRaycastUtils } from "../ui/RaycastUtils";
-export { Size } from "../ui/RectTransform";
-export { Rect } from "../ui/RectTransform";
-export { RectTransform } from "../ui/RectTransform";
-export { SpatialHtml } from "../ui/SpatialHtml";
-export { Text } from "../ui/Text";

package/src/engine-components/export/{GltfExport.ts → gltf/GltfExport.ts}

@@ -1,12 +1,12 @@
-import { Behaviour, GameObject } from "../Component";
+import { Behaviour, GameObject } from "../../Component";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import GLTFMeshGPUInstancingExtension from '../../include/three/EXT_mesh_gpu_instancing_exporter.js';
-import { Renderer } from "../Renderer";
+import GLTFMeshGPUInstancingExtension from '../../../include/three/EXT_mesh_gpu_instancing_exporter.js';
+import { Renderer } from "../../Renderer";
 import { Object3D, Vector3 } from "three";
-import { SerializationContext } from "../../engine/engine_serialization_core";
-import { NEEDLE_components } from "../../engine/extensions/NEEDLE_components";
-import { getWorldPosition } from "../../engine/engine_three_utils";
-import { BoxHelperComponent } from "../BoxHelperComponent";
+import { SerializationContext } from "../../../engine/engine_serialization_core";
+import { NEEDLE_components } from "../../../engine/extensions/NEEDLE_components";
+import { getWorldPosition } from "../../../engine/engine_three_utils";
+import { BoxHelperComponent } from "../../BoxHelperComponent";
 import { AnimationClip } from "three";
 
 

package/src/engine-components/export/usdz/Extension.ts

@@ -0,0 +1,12 @@
+import { USDZObject } from "./types";
+
+
+export interface IUSDZExporterExtension {
+
+    get extensionName(): string;
+    onBeforeBuildDocument?(context);
+    onAfterBuildDocument?(context);
+    onExportObject?(object, model : USDZObject, context);
+    onAfterSerialize?(context);
+    onAfterHierarchy?(context);
+}

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -0,0 +1,233 @@
+import { delay, getParam, isiOS, isMobileDevice, isSafari } from "../../../engine/engine_utils";
+import { Object3D, Color } from "three";
+import * as THREE from "three";
+import { USDZExporter as ThreeUSDZExporter } from "three/examples/jsm/exporters/USDZExporter";
+import { AnimationExtension } from "./extensions/Animation"
+import { ensureQuicklookLinkIsCreated } from "./utils/quicklook";
+import { getFormattedDate } from "./utils/timeutils";
+import { registerAnimatorsImplictly } from "./utils/animationutils";
+import { IUSDZExporterExtension } from "./Extension";
+import { Behaviour, GameObject } from "../../Component";
+import { WebXR } from "../../WebXR"
+import { serializable } from "../../../engine/engine_serialization";
+import { showBalloonWarning } from "../../../engine/debug/debug";
+import { Context } from "../../../engine/engine_setup";
+import { WebARSessionRoot } from "../../WebARSessionRoot";
+
+const debug = getParam("debugusdz");
+
+export type QuickLookOverlay = {
+    callToAction?: string;
+    checkoutTitle?: string;
+    checkoutSubtitle?: string;
+}
+
+export class USDZExporter extends Behaviour {
+
+    @serializable(Object3D)
+    objectToExport?: THREE.Object3D;
+
+    @serializable()
+    autoExportAnimations: boolean = false;
+
+    extensions: IUSDZExporterExtension[] = [];
+
+    private link!: HTMLAnchorElement;
+    private webxr?: WebXR;
+    private webARSessionRoot: WebARSessionRoot | undefined;
+
+
+    start() {
+        if (debug) {
+            window.addEventListener("keydown", (evt) => {
+                switch (evt.key) {
+                    case "t":
+                        this.exportAsync();
+                        break;
+                }
+            });
+            if (isMobileDevice()) {
+                setTimeout(() => {
+                    this.exportAsync();
+                }, 2000)
+            }
+        }
+        document.getElementById("open-in-ar")?.addEventListener("click", (evt) => {
+            evt.preventDefault();
+            this.exportAsync();
+        });
+
+        if (!this.objectToExport) this.objectToExport = this.gameObject;
+    }
+
+
+
+    onEnable() {
+        const ios = isiOS()
+        const safari = isSafari();
+        if (debug || (ios && safari)) {
+            this.createQuicklookButton();
+            this.webARSessionRoot = GameObject.findObjectOfType(WebARSessionRoot) ?? undefined;
+            this.lastCallback = this.quicklookCallback.bind(this);
+            this.link = ensureQuicklookLinkIsCreated(this.context);
+            this.link.addEventListener('message', this.lastCallback);
+        }
+    }
+
+    onDisable() {
+        this.link?.removeEventListener('message', this.lastCallback);
+    }
+
+    async exportAsync() {
+        if (!this.objectToExport) return;
+
+        // make sure we apply the AR scale
+        if (this.webARSessionRoot) {
+            const scene = this.webARSessionRoot.gameObject;
+            const scale = 1 / this.webARSessionRoot!.arScale;
+            scene.matrix.makeScale(scale, scale, scale);
+            if (this.webARSessionRoot.invertForward) {
+                scene.matrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI));
+            }
+        }
+
+        const exporter = new ThreeUSDZExporter();
+        const extensions: any = [...this.extensions]
+
+        // collect animators and their clips
+        const animExt = new AnimationExtension();
+        extensions.push(animExt);
+
+        if (this.autoExportAnimations)
+            registerAnimatorsImplictly(this.objectToExport, animExt);
+
+        const eventArgs = { self: this, exporter: exporter, extensions: extensions, object: this.objectToExport };
+        this.dispatchEvent(new CustomEvent("before-export", { detail: eventArgs }))
+
+        let name = "needle";
+        if (debug) name += "-" + getFormattedDate();
+
+        //@ts-ignore
+        exporter.debug = debug;
+        //@ts-ignore
+        const arraybuffer = await exporter.parse(this.objectToExport, extensions);
+        const blob = new Blob([arraybuffer], { type: 'application/octet-stream' });
+
+        this.dispatchEvent(new CustomEvent("after-export", { detail: eventArgs }))
+
+        // second file: USDA (without assets)
+        //@ts-ignore
+        // const usda = exporter.lastUsda;
+        // const blob2 = new Blob([usda], { type: 'text/plain' });
+        // this.link.download = name + ".usda";
+        // this.link.href = URL.createObjectURL(blob2);
+        // this.link.click();
+
+        // see https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
+        const overlay = this.buildQuicklookOverlay();
+        const callToAction = overlay.callToAction ? encodeURIComponent(overlay.callToAction) : "";
+        const checkoutTitle = overlay.checkoutTitle ? encodeURIComponent(overlay.checkoutTitle) : "";
+        const checkoutSubtitle = overlay.checkoutSubtitle ? encodeURIComponent(overlay.checkoutSubtitle) : "";
+        this.link.href = URL.createObjectURL(blob) + `#callToAction=${callToAction}&checkoutTitle=${checkoutTitle}&checkoutSubtitle=${checkoutSubtitle}&`;
+
+
+        if (!this.lastCallback) {
+            this.lastCallback = this.quicklookCallback.bind(this);
+            this.link.addEventListener('message', this.lastCallback);
+        }
+
+        // open quicklook
+        this.link.download = name + ".usdz";
+        this.link.click();
+
+        // TODO detect QuickLook availability:
+        // https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/#:~:text=inside%20the%20anchor.-,Feature%20Detection,-To%20detect%20support
+    }
+
+    private lastCallback?: any;
+
+    private quicklookCallback(event) {
+        if ((event as any)?.data == '_apple_ar_quicklook_button_tapped') {
+            if (debug) showBalloonWarning("Quicklook closed via call to action button");
+            this.dispatchEvent(new CustomEvent("quicklook-button-tapped", { detail: this }));
+        }
+    }
+
+    private buildQuicklookOverlay(): QuickLookOverlay {
+        const obj: QuickLookOverlay = {};
+        obj.callToAction = "Close";
+        obj.checkoutTitle = "🌵 Made with Needle";
+        obj.checkoutSubtitle = "_";
+        // Use the quicklook-overlay event to customize the overlay
+        this.dispatchEvent(new CustomEvent("quicklook-overlay", { detail: obj }));
+        return obj;
+    }
+
+    private _arButton?: HTMLElement;
+    private async createQuicklookButton() {
+        if (!this.webxr) {
+            await delay(1);
+            this.webxr = GameObject.findObjectOfType(WebXR) ?? undefined;
+            if (this.webxr) {
+                if (this.webxr.VRButton) this.webxr.VRButton.parentElement?.removeChild(this.webxr.VRButton);
+                // check if we have an AR button already and re-use that
+                if (this.webxr.ARButton && this._arButton !== this.webxr.ARButton) {
+                    this._arButton = this.webxr.ARButton;
+                    // Hack to remove the immersiveweb link
+                    const linkInButton = this.webxr.ARButton.parentElement?.querySelector("a");
+                    if (linkInButton) {
+                        linkInButton.href = "";
+                    }
+                    this.webxr.ARButton.innerText = "Open in Quicklook";
+                    this.webxr.ARButton.disabled = false;
+                    this.webxr.ARButton.addEventListener("click", evt => {
+                        evt.preventDefault();
+                        this.exportAsync();
+                    });
+                    this.webxr.ARButton.classList.add("quicklook-ar-button");
+                    this.dispatchEvent(new CustomEvent("created-button", { detail: this.webxr.ARButton }))
+                }
+                // create a button if WebXR didnt create one yet
+                else {
+                    this.webxr.createARButton = false;
+                    this.webxr.createVRButton = false;
+                    let container = window.document.querySelector(".webxr-buttons");
+                    if (!container) {
+                        container = document.createElement("div");
+                        container.classList.add("webxr-buttons");
+                    }
+                    const button = document.createElement("button");
+                    button.innerText = "Open in Quicklook";
+                    button.addEventListener("click", () => {
+                        this.exportAsync();
+                    });
+                    button.classList.add('webxr-ar-button');
+                    button.classList.add('webxr-button');
+                    button.classList.add("quicklook-ar-button");
+                    container.appendChild(button);
+                    this.dispatchEvent(new CustomEvent("created-button", { detail: button }))
+                }
+            }
+            else {
+                console.warn("Could not find WebXR component: will not create Quicklook button", Context.Current);
+            }
+        }
+    }
+
+    private resetStyles(el: HTMLElement) {
+        el.style.position = "";
+        el.style.top = "";
+        el.style.left = "";
+        el.style.width = "";
+        el.style.height = "";
+        el.style.margin = "";
+        el.style.padding = "";
+        el.style.border = "";
+        el.style.background = "";
+        el.style.color = "";
+        el.style.font = "";
+        el.style.textAlign = "";
+        el.style.opacity = "";
+        el.style.zIndex = "";
+    }
+}