@needle-tools/engine 3.2.12-alpha → 3.2.14-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.2.12-alpha",
+    "version": "3.2.14-alpha",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",
@@ -61,7 +61,7 @@
         "postprocessing": "^6.30.1",
         "simplex-noise": "^4.0.1",
         "stats.js": "^0.17.0",
-        "three": "npm:@needle-tools/three@^0.146.6",
+        "three": "npm:@needle-tools/three@^0.146.8",
         "three-mesh-ui": "^6.4.5",
         "three.quarks": "^0.7.3",
         "uuid": "^9.0.0",

package/plugins/vite/alias.js

@@ -33,10 +33,7 @@ export const needleViteAlias = (command, config, userSettings) => {
     return {
         name: "needle-alias",
         config(config) {
-            setTimeout(() => {
-                console.log('[needle-alias] ProjectDirectory: ' + projectDir);
-            }, 150);
-
+            console.log('[needle-alias] ProjectDirectory: ' + projectDir);
             if (!config.resolve) config.resolve = {};
             if (!config.resolve.alias) config.resolve.alias = {};
             const aliasDict = config.resolve.alias;

package/plugins/vite/copyfiles.js

@@ -11,57 +11,63 @@ export const needleCopyFiles = (command, config, userSettings) => {
         return;
     }
 
-    const copyIncludesFromEngine = config?.copyIncludesFromEngine ?? true;
-
     return {
         name: 'needle-copy-files',
-        apply: 'build',
-        async closeBundle() {
-            const baseDir = process.cwd();
-            const pluginName = "needle-copy-files";
+        buildStart() {
+            return run(false, config);
+        },
+        closeBundle() {
+            return run(true, config);
+        },
+    }
+}
+
+async function run(isBuild, config) {
+    const copyIncludesFromEngine = config?.copyIncludesFromEngine ?? true;
 
-            let assetsDirName = "assets";
-            let outdirName = "dist";
+    const baseDir = process.cwd();
+    const pluginName = "needle-copy-files";
 
-            const needleConfig = tryLoadProjectConfig();
-            if(needleConfig){
-                assetsDirName = needleConfig.assetsDirectory;
-            }
+    let assetsDirName = "assets";
+    let outdirName = "dist";
 
-            const outDir = resolve(baseDir, outdirName);
-            if (!existsSync(outDir)) {
-                mkdirSync(outDir);
-            }
+    const needleConfig = tryLoadProjectConfig();
+    if (needleConfig) {
+        assetsDirName = needleConfig.assetsDirectory;
+    }
 
-            if (copyIncludesFromEngine !== false) {
-                // copy include from engine
-                const engineIncludeDir = resolve(baseDir, 'node_modules', '@needle-tools', 'engine', 'src', 'include');
-                if (existsSync(engineIncludeDir)) {
-                    console.log(`[${pluginName}] - Copy engine include to ${baseDir}/include`)
-                    const targetDir = resolve(baseDir, 'include');
-                    copyRecursiveSync(engineIncludeDir, targetDir);
-                }
-            }
+    if (copyIncludesFromEngine !== false) {
+        // copy include from engine
+        const engineIncludeDir = resolve(baseDir, 'node_modules', '@needle-tools', 'engine', 'src', 'include');
+        if (existsSync(engineIncludeDir)) {
+            console.log(`[${pluginName}] - Copy engine include to ${baseDir}/include`)
+            const projectIncludeDir = resolve(baseDir, 'include');
+            copyRecursiveSync(engineIncludeDir, projectIncludeDir);
+        }
+    }
 
-            // copy assets dir
-            const assetsDir = resolve(baseDir, assetsDirName);
-            if (existsSync(assetsDir)) {
-                console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
-                const targetDir = resolve(outDir, 'assets');
-                copyRecursiveSync(assetsDir, targetDir);
-            }
-            // copy include dir
-            const includeDir = resolve(baseDir, 'include');
-            if (existsSync(includeDir)) {
-                console.log(`[${pluginName}] - Copy include to ${outdirName}/include`)
-                const targetDir = resolve(outDir, 'include');
-                copyRecursiveSync(includeDir, targetDir);
-            }
+    if (isBuild) {
+        const outDir = resolve(baseDir, outdirName);
+        if (!existsSync(outDir)) {
+            mkdirSync(outDir);
+        }
+        // copy assets dir
+        const assetsDir = resolve(baseDir, assetsDirName);
+        if (existsSync(assetsDir)) {
+            console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
+            const targetDir = resolve(outDir, 'assets');
+            copyRecursiveSync(assetsDir, targetDir);
+        }
+        // copy include dir
+        const includeDir = resolve(baseDir, 'include');
+        if (existsSync(includeDir)) {
+            console.log(`[${pluginName}] - Copy include to ${outdirName}/include`)
+            const targetDir = resolve(outDir, 'include');
+            copyRecursiveSync(includeDir, targetDir);
         }
     }
 }
 
-
 function copyRecursiveSync(src, dest) {
     var exists = existsSync(src);
     var stats = exists && statSync(src);

package/plugins/vite/index.js

@@ -8,6 +8,7 @@ import { needleCopyFiles } from "./copyfiles.js";
 import { needleViteAlias } from "./alias.js";
 import { needleTransformCodegen } from "./transform-codegen.js";
 import { needleLicense } from "./license.js";
+import { needlePeerjs } from "./peer.js";
 
 export * from "./gzip.js";
 export * from "./config.js";
@@ -30,6 +31,7 @@ export const needlePlugins = async (command, config, userSettings) => {
         needleCopyFiles(command, config, userSettings),
         needleTransformCodegen(command, config, userSettings),
         needleDrop(command, config, userSettings),
+        needlePeerjs(command, config, userSettings)
     ];
     array.push(await editorConnection(command, config, userSettings, array));
     return array;

package/plugins/vite/meta.js

@@ -91,6 +91,9 @@ export const needleMeta = (command, config, userSettings) => {
                     }
                 }
 
+                // if(!tags.filter(t => t.attrs?.name === "generator"))
+                    tags.push({ tag: 'meta', attrs: { name: 'generator', content: 'Needle' } });
+
                 return { html, tags }
             },
         }
@@ -124,8 +127,8 @@ function removeMetaTag(html, name) {
 function insertNeedleCredits(html) {
     const needleCredits = `<!-- 🌵 Made with Needle — https://needle.tools -->`;
     html = html.replace(
-        /<head>/,
-        needleCredits + "\n<head>",
+        /<head/,
+        needleCredits + "\n<head",
     );
     return html;
 }

package/plugins/vite/peer.js

@@ -0,0 +1,28 @@
+
+const peerjsString = `/* needle: injected fix for peerjs */
+window.global = window;
+var parcelRequire;`
+
+export const needlePeerjs = (command, config, userSettings) => {
+
+    if (userSettings.noPeer === true) return;
+
+    return {
+        name: 'needle-peerjs',
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, _ctx) {
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            children: peerjsString,
+                            injectTo: 'body-prepend',
+                        },
+                    ]
+                }
+            }
+        }
+    }
+}

package/plugins/vite/reload.js

@@ -61,22 +61,26 @@ export const needleReload = (command, config, userSettings) => {
         transformIndexHtml: {
             enforce: 'pre',
             transform(html, _) {
-                if (config?.allowHotReload === false) return [html];
-                if (userSettings?.allowHotReload === false) return [html];
+                if (config?.allowHotReload === false) return html;
+                if (userSettings?.allowHotReload === false) return html;
                 const file = path.join(__dirname, 'reload-client.js');
-                return [
-                    {
-                        tag: 'script',
-                        attrs: {
-                            type: 'module',
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            attrs: {
+                                type: 'module',
+                            },
+                            children: readFileSync(file, 'utf8'),
+                            injectTo: 'body',
                         },
-                        children: readFileSync(file, 'utf8'),
-                        injectTo: 'body',
-                    },
-                ];
+                    ]
+                }
+
             },
-        },
-    };
+        }
+    }
 }
 
 

package/src/engine/codegen/register_types.js

@@ -95,6 +95,7 @@ import { Networking } from "../../engine-components/Networking";
 import { NoiseModule } from "../../engine-components/ParticleSystemModules";
 import { ObjectRaycaster } from "../../engine-components/ui/Raycaster";
 import { OffsetConstraint } from "../../engine-components/OffsetConstraint";
+import { OpenURL } from "../../engine-components/utils/OpenURL";
 import { OrbitControls } from "../../engine-components/OrbitControls";
 import { ParticleBurst } from "../../engine-components/ParticleSystemModules";
 import { ParticleSubEmitter } from "../../engine-components/ParticleSystemSubEmitter";
@@ -108,6 +109,7 @@ import { PlayerSync } from "../../engine-components-experimental/networking/Play
 import { PointerEventData } from "../../engine-components/ui/PointerEvents";
 import { PostProcessingHandler } from "../../engine-components/postprocessing/PostProcessingHandler";
 import { PresentationMode } from "../../engine-components-experimental/Presentation";
+import { QuickLookOverlay } from "../../engine-components/export/usdz/USDZExporter";
 import { RawImage } from "../../engine-components/ui/Image";
 import { Raycaster } from "../../engine-components/ui/Raycaster";
 import { Rect } from "../../engine-components/ui/RectTransform";
@@ -283,6 +285,7 @@ TypeStore.add("Networking", Networking);
 TypeStore.add("NoiseModule", NoiseModule);
 TypeStore.add("ObjectRaycaster", ObjectRaycaster);
 TypeStore.add("OffsetConstraint", OffsetConstraint);
+TypeStore.add("OpenURL", OpenURL);
 TypeStore.add("OrbitControls", OrbitControls);
 TypeStore.add("ParticleBurst", ParticleBurst);
 TypeStore.add("ParticleSubEmitter", ParticleSubEmitter);
@@ -296,6 +299,7 @@ TypeStore.add("PlayerSync", PlayerSync);
 TypeStore.add("PointerEventData", PointerEventData);
 TypeStore.add("PostProcessingHandler", PostProcessingHandler);
 TypeStore.add("PresentationMode", PresentationMode);
+TypeStore.add("QuickLookOverlay", QuickLookOverlay);
 TypeStore.add("RawImage", RawImage);
 TypeStore.add("Raycaster", Raycaster);
 TypeStore.add("Rect", Rect);

package/src/engine/engine_serialization_core.ts

@@ -279,7 +279,7 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
             for (const key in typeInfo) {
                 const serializedEntryInfo = typeInfo[key];
                 const data = serializedData[key];
-
+                if(debug) console.log(key, data, obj, serializedEntryInfo)
 
                 if (obj[key] !== undefined && data === undefined) {
                     // if a field is marked as serialized and has some default value

package/src/engine/engine_utils.ts

@@ -97,12 +97,12 @@ export function setOrAddParamsToUrl(url: URLSearchParams, paramName: string, par
         url.append(paramName, paramValue.toString());
 }
 
-export function pushState(title: string, urlParams: URLSearchParams) {
-    window.history.pushState(null, title, "?" + urlParams.toString());
+export function pushState(title: string, urlParams: URLSearchParams, state?: any) {
+    window.history.pushState(state, title, "?" + urlParams.toString());
 }
 
-export function setState(title: string, urlParams: URLSearchParams) {
-    window.history.replaceState(null, title, "?" + urlParams.toString());
+export function setState(title: string, urlParams: URLSearchParams, state?: any) {
+    window.history.replaceState(state, title, "?" + urlParams.toString());
 }
 
 // for room id
@@ -212,7 +212,7 @@ const debugGetPath = getParam("debugresolveurl");
 export const relativePathPrefix = "rel:";
 
 /** @deprecated use resolveUrl instead */
-export function getPath(source:SourceIdentifier|undefined, uri:string) : string {
+export function getPath(source: SourceIdentifier | undefined, uri: string): string {
     return resolveUrl(source, uri);
 }
 /**
@@ -226,7 +226,7 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
         if (debugGetPath) console.warn("getPath: uri is undefined, returning uri", uri);
         return uri;
     }
-    if(uri.startsWith("./")) {
+    if (uri.startsWith("./")) {
         return uri;
     }
     if (uri.startsWith("http")) {
@@ -237,7 +237,7 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
         if (debugGetPath) console.warn("getPath: source is undefined, returning uri", uri);
         return uri;
     }
-    if(uri.startsWith(relativePathPrefix)){
+    if (uri.startsWith(relativePathPrefix)) {
         uri = uri.substring(4);
     }
     const pathIndex = source.lastIndexOf("/");

package/src/engine-components/SceneSwitcher.ts

@@ -14,7 +14,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextRegistered, async _ => {
     // We need to defer import to not get issues with circular dependencies
     import("../engine/engine_element").then(res => {
         const webcomponent = res.NeedleEngineHTMLElement;
-        if(debug) console.log("SceneSwitcher: registering scene attribute", webcomponent.observedAttributes);
+        if (debug) console.log("SceneSwitcher: registering scene attribute", webcomponent.observedAttributes);
         if (!webcomponent.observedAttributes.includes(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME))
             webcomponent.observedAttributes.push(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
     });
@@ -22,6 +22,12 @@ ContextRegistry.registerCallback(ContextEvent.ContextRegistered, async _ => {
 
 const couldNotLoadScenePromise = Promise.resolve(false);
 
+export type LoadSceneEvent = {
+    switcher: SceneSwitcher;
+    scene: AssetReference;
+    index: number;
+}
+
 export class SceneSwitcher extends Behaviour {
 
     @serializable(AssetReference)
@@ -108,7 +114,17 @@ export class SceneSwitcher extends Behaviour {
         let wasUsingHistory = this.useHistory;
         try {
             this.useHistory = false;
-            await this.tryLoadFromQueryParam();
+            let didResolve = false;
+            if (this.queryParameterName)
+                didResolve = await this.tryLoadFromQueryParam();
+            if (!didResolve) {
+                const state = _state.state;
+                if (state !== null && state.startsWith(this.guid)) {
+                    const value = state.substr(this.guid.length + 2);
+                    console.log(value);
+                    await this.trySelectSceneFromValue(value);
+                }
+            }
         }
         finally {
             this.useHistory = wasUsingHistory;
@@ -192,7 +208,15 @@ export class SceneSwitcher extends Behaviour {
         const index = this._currentIndex = this.scenes?.indexOf(scene) ?? -1;
         this._currentScene = scene;
         try {
+            const loadStartEvt = new CustomEvent<LoadSceneEvent>("loadscene-start", { detail: { scene: scene, switcher: this, index: index } })
+            this.dispatchEvent(loadStartEvt);
             await scene.loadAssetAsync();
+            const finishedEvt = new CustomEvent<LoadSceneEvent>("loadscene-finished", { detail: { scene: scene, switcher: this, index: index } });
+            this.dispatchEvent(finishedEvt);
+            if (finishedEvt.defaultPrevented) {
+                if (debug) console.warn("Adding loaded scene prevented:", scene, finishedEvt);
+                return false;
+            }
             if (!scene.asset) {
                 if (debug) console.warn("Failed loading scene:", scene);
                 return false;
@@ -201,9 +225,18 @@ export class SceneSwitcher extends Behaviour {
                 GameObject.add(scene.asset, this.gameObject);
                 if (this.useSceneLighting)
                     this.context.sceneLighting.enable(scene)
-                // save the loaded scene as an url parameter
-                if (this.queryParameterName?.length)
-                    setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                if (this.useHistory) {
+                    // save the loaded scene as an url parameter
+                    if (this.queryParameterName?.length)
+                        setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                    // or set the history state without updating the url parameter
+                    else {
+                        const lastState = history.state;
+                        const stateName = this.guid + "::" + index;
+                        if (lastState !== stateName)
+                            history.pushState(stateName, "unused", location.href);
+                    }
+                }
                 return true;
             }
         }

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

@@ -93,6 +93,7 @@ export { Networking } from "../Networking";
 export { NoiseModule } from "../ParticleSystemModules";
 export { ObjectRaycaster } from "../ui/Raycaster";
 export { OffsetConstraint } from "../OffsetConstraint";
+export { OpenURL } from "../utils/OpenURL";
 export { OrbitControls } from "../OrbitControls";
 export { ParticleBurst } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";
@@ -103,6 +104,7 @@ export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayerColor } from "../PlayerColor";
 export { PointerEventData } from "../ui/PointerEvents";
 export { PostProcessingHandler } from "../postprocessing/PostProcessingHandler";
+export { QuickLookOverlay } from "../export/usdz/USDZExporter";
 export { RawImage } from "../ui/Image";
 export { Raycaster } from "../ui/Raycaster";
 export { Rect } from "../ui/RectTransform";

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

@@ -1,6 +1,5 @@
 import { delay, getParam, isiOS, isMobileDevice, isSafari } from "../../../engine/engine_utils";
-import { Object3D, Color } from "three";
-import * as THREE from "three";
+import { Object3D, Color, Mesh, Matrix4 } from "three";
 import { USDZExporter as ThreeUSDZExporter } from "three/examples/jsm/exporters/USDZExporter";
 import { AnimationExtension } from "./extensions/Animation"
 import { ensureQuicklookLinkIsCreated } from "./utils/quicklook";
@@ -10,16 +9,23 @@ import { IUSDZExporterExtension } from "./Extension";
 import { Behaviour, GameObject } from "../../Component";
 import { WebXR } from "../../webxr/WebXR"
 import { serializable } from "../../../engine/engine_serialization";
-import { showBalloonWarning } from "../../../engine/debug/debug";
+import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../../engine/debug/debug";
 import { Context } from "../../../engine/engine_setup";
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot";
 
 const debug = getParam("debugusdz");
 
-export type QuickLookOverlay = {
+export class QuickLookOverlay {
+    @serializable()
     callToAction?: string;
+    @serializable()
     checkoutTitle?: string;
+    @serializable()
     checkoutSubtitle?: string;
+
+    /** if assigned the call to action button in quicklook will open the URL. Otherwise it will just close quicklook. */
+    @serializable()
+    callToActionURL?: string;
 }
 
 export class USDZExporter extends Behaviour {
@@ -30,6 +36,9 @@ export class USDZExporter extends Behaviour {
     @serializable()
     autoExportAnimations: boolean = false;
 
+    @serializable(QuickLookOverlay)
+    overlay?: QuickLookOverlay;
+
     extensions: IUSDZExporterExtension[] = [];
 
     private link!: HTMLAnchorElement;
@@ -39,6 +48,8 @@ export class USDZExporter extends Behaviour {
 
     start() {
         if (debug) {
+            console.log(this);
+            console.log("Debug USDZ, press 't' to export")
             window.addEventListener("keydown", (evt) => {
                 switch (evt.key) {
                     case "t":
@@ -58,6 +69,12 @@ export class USDZExporter extends Behaviour {
         });
 
         if (!this.objectToExport) this.objectToExport = this.gameObject;
+
+
+        if (isDevEnvironment() && (!this.objectToExport?.children?.length && !(this.objectToExport as Mesh)?.isMesh)) {
+            showBalloonWarning("USDZ Exporter has nothing to export");
+            console.warn("USDZExporter has no objects to export assigned:", this)
+        }
     }
 
 
@@ -66,16 +83,25 @@ export class USDZExporter extends Behaviour {
         const ios = isiOS()
         const safari = isSafari();
         if (debug || (ios && safari)) {
-            this.createQuicklookButton();
+            this.addQuicklookButton();
             this.webARSessionRoot = GameObject.findObjectOfType(WebARSessionRoot) ?? undefined;
             this.lastCallback = this.quicklookCallback.bind(this);
             this.link = ensureQuicklookLinkIsCreated(this.context);
             this.link.addEventListener('message', this.lastCallback);
         }
+        if (debug)
+            showBalloonMessage("USDZ Exporter enabled: " + this.name);
     }
 
     onDisable() {
         this.link?.removeEventListener('message', this.lastCallback);
+        const ios = isiOS()
+        const safari = isSafari();
+        if (debug || (ios && safari)) {
+            this.removeQuicklookButton();
+        }
+        if (debug)
+            showBalloonMessage("USDZ Exporter disabled: " + this.name);
     }
 
     async exportAsync() {
@@ -87,7 +113,7 @@ export class USDZExporter extends Behaviour {
             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));
+                scene.matrix.multiply(new Matrix4().makeRotationY(Math.PI));
             }
         }
 
@@ -125,14 +151,15 @@ export class USDZExporter extends Behaviour {
 
         // see https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
         const overlay = this.buildQuicklookOverlay();
+        console.log(overlay);
         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}&`;
+        this.link.href = URL.createObjectURL(blob) + `#callToAction=${callToAction}&checkoutTitle=${checkoutTitle}&checkoutSubtitle=${checkoutSubtitle}&callToActionURL=${overlay.callToActionURL}`;
 
 
         if (!this.lastCallback) {
-            this.lastCallback = this.quicklookCallback.bind(this);
+            this.lastCallback = this.quicklookCallback.bind(this)
             this.link.addEventListener('message', this.lastCallback);
         }
 
@@ -146,24 +173,44 @@ export class USDZExporter extends Behaviour {
 
     private lastCallback?: any;
 
-    private quicklookCallback(event) {
+    private quicklookCallback(event: 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 }));
+            var evt = new CustomEvent("quicklook-button-tapped", { detail: this });
+            this.dispatchEvent(evt);
+            if (!evt.defaultPrevented) {
+                const url = new URLSearchParams(this.link.href);
+                if (url) {
+                    const callToActionURL = url.get("callToActionURL");
+                    if (debug)
+                        showBalloonMessage("Quicklook url: " + callToActionURL);
+                    if (callToActionURL) {
+                        globalThis.open(callToActionURL, "_blank");
+                    }
+                }
+            }
         }
     }
 
     private buildQuicklookOverlay(): QuickLookOverlay {
         const obj: QuickLookOverlay = {};
-        obj.callToAction = "Close";
-        obj.checkoutTitle = "🌵 Made with Needle";
-        obj.checkoutSubtitle = "_";
+        if (this.overlay) Object.assign(obj, this.overlay);
+        if (!obj.callToAction?.length)
+            obj.callToAction = "Close";
+        if (!obj.checkoutTitle?.length)
+            obj.checkoutTitle = "🌵 Made with Needle";
+        if (!obj.checkoutSubtitle?.length)
+            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 _quicklookButton?: HTMLElement;
+
     private async createQuicklookButton() {
         if (!this.webxr) {
             await delay(1);
@@ -171,8 +218,8 @@ export class USDZExporter extends Behaviour {
             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;
+                if (this.webxr.ARButton && this._quicklookButton !== this.webxr.ARButton) {
+                    this._quicklookButton = this.webxr.ARButton;
                     // Hack to remove the immersiveweb link
                     const linkInButton = this.webxr.ARButton.parentElement?.querySelector("a");
                     if (linkInButton) {
@@ -185,6 +232,7 @@ export class USDZExporter extends Behaviour {
                         this.exportAsync();
                     });
                     this.webxr.ARButton.classList.add("quicklook-ar-button");
+                    this._quicklookButtonContainer = this.webxr.ARButton.parentElement;
                     this.dispatchEvent(new CustomEvent("created-button", { detail: this.webxr.ARButton }))
                 }
                 // create a button if WebXR didnt create one yet
@@ -205,6 +253,7 @@ export class USDZExporter extends Behaviour {
                     button.classList.add('webxr-button');
                     button.classList.add("quicklook-ar-button");
                     container.appendChild(button);
+                    this._quicklookButtonContainer = container;
                     this.dispatchEvent(new CustomEvent("created-button", { detail: button }))
                 }
             }
@@ -214,20 +263,15 @@ export class USDZExporter extends Behaviour {
         }
     }
 
-    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 = "";
+
+    private _quicklookButtonContainer: Element | null = null;
+    private async addQuicklookButton() {
+        await this.createQuicklookButton();
+        if (this._quicklookButton && this._quicklookButtonContainer) {
+            this._quicklookButtonContainer.appendChild(this._quicklookButton);
+        }
+    }
+    private removeQuicklookButton() {
+        this._quicklookButton?.remove();
     }
 }