@needle-tools/engine 4.12.1 → 4.12.3-next.a27c12e

package/src/engine/js-extensions/Object3D.ts

@@ -22,6 +22,8 @@ import { markHierarchyDirty } from "../engine_mainloop_utils.js";
 import { applyPrototypeExtensions, registerPrototypeExtensions } from "./ExtensionUtils.js";
 
 
+// #region Type Declarations
+
 // NOTE: keep in sync with method declarations below
 declare module 'three' {
     export interface Object3D {
@@ -95,9 +97,11 @@ declare module 'three' {
         getComponents<T extends IComponent>(type: Constructor<T>, arr?: []): T[];
         /**
          * Get a Needle Engine component from the {@link Object3D} or its children. This will search on the current Object and all its children.
+         * @param type The type of the component to search for.
+         * @param includeInactive If true, also inactive components are considered. Default is false.
          * @returns The component instance or null if not found.
          */
-        getComponentInChildren<T extends IComponent>(type: Constructor<T>): T | null;
+        getComponentInChildren<T extends IComponent>(type: Constructor<T>, includeInactive?: boolean): T | null;
         /**
          * Get all components of a specific type from the {@link Object3D} or its children. This will search on the current Object and all its children.
          * @param arr Optional array to fill with the found components.
@@ -106,9 +110,11 @@ declare module 'three' {
         getComponentsInChildren<T extends IComponent>(type: Constructor<T>, arr?: []): T[];
         /**
          * Get a Needle Engine component from the {@link Object3D} or its parents. This will search on the current Object and all its parents.
+         * @param type The type of the component to search for.
+         * @param includeInactive If true, also inactive components are considered. Default is false.
          * @returns The component instance or null if not found.
          */
-        getComponentInParent<T extends IComponent>(type: Constructor<T>): T | null;
+        getComponentInParent<T extends IComponent>(type: Constructor<T>, includeInactive?: boolean): T | null;
         /**
          * Get all Needle Engine components of a specific type from the {@link Object3D} or its parents. This will search on the current Object and all its parents.
          * @param arr Optional array to fill with the found components.
@@ -200,6 +206,7 @@ if (NEEDLE_ENGINE_FEATURE_FLAGS.experimentalSmartHierarchyUpdate) {
     }
 }
 
+// #region Prototype Method Implementations
 
 Object3D.prototype["SetActive"] = function (active: boolean) {
     this.visible = active;
@@ -213,7 +220,6 @@ Object3D.prototype["destroy"] = function () {
     destroy(this);
 }
 
-
 Object3D.prototype["addComponent"] = function <T extends IComponent>(comp: T | ConstructorConcrete<T>, init?: ComponentInit<T>) {
     return addComponent(this, comp, init);
 }
@@ -238,22 +244,23 @@ Object3D.prototype["getComponents"] = function <T extends IComponent>(type: Cons
     return getComponents(this, type, arr);
 }
 
-Object3D.prototype["getComponentInChildren"] = function <T extends IComponent>(type: Constructor<T>) {
-    return getComponentInChildren(this, type);
+Object3D.prototype["getComponentInChildren"] = function <T extends IComponent>(type: Constructor<T>, includeInactive: boolean = false) {
+    return getComponentInChildren(this, type, includeInactive);
 }
 
 Object3D.prototype["getComponentsInChildren"] = function <T extends IComponent>(type: Constructor<T>, arr?: []) {
     return getComponentsInChildren(this, type, arr);
 }
 
-Object3D.prototype["getComponentInParent"] = function <T extends IComponent>(type: Constructor<T>) {
-    return getComponentInParent(this, type);
+Object3D.prototype["getComponentInParent"] = function <T extends IComponent>(type: Constructor<T>, includeInactive: boolean = false) {
+    return getComponentInParent(this, type, includeInactive);
 }
 
 Object3D.prototype["getComponentsInParent"] = function <T extends IComponent>(type: Constructor<T>, arr?: []) {
     return getComponentsInParent(this, type, arr);
 }
 
+// #region Prototype Property Implementations
 
 // this is a fix to allow gameObject active animation be applied to a three object
 if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "activeSelf")) {

package/src/engine/webcomponents/buttons.ts

@@ -176,7 +176,7 @@ export class ButtonsFactory {
      * The QR code will be generated with the current URL when the button is clicked
      * @returns the QR code button element
      */
-    createQRCode(): HTMLButtonElement {
+    createQRCode(opts?: { anchorElement?: HTMLElement }): HTMLButtonElement {
 
         if (this._qrButton) return this._qrButton;
 
@@ -223,7 +223,7 @@ export class ButtonsFactory {
             // TODO: we would need to search for the right engine element to insert this into if there are more
             // Insert the QR code overlay inside the needle-engine element
             const engine_element = document.body.querySelector("needle-engine");
-            const parent = engine_element || document.body;
+            const parent = opts?.anchorElement?.parentElement || engine_element || document.body;
             parent.appendChild(qrCodeContainer);
             const containerRect = qrCodeElement.getBoundingClientRect();
             const buttonRect = qrCodeButton.getBoundingClientRect();

package/src/engine/webcomponents/needle menu/needle-menu-spatial.ts

@@ -8,7 +8,7 @@ import type { Context } from "../../engine_setup.js";
 import { lookAtObject } from "../../engine_three_utils.js";
 import { IComponent, IContext, IGameObject } from "../../engine_types.js";
 import { TypeStore } from "../../engine_typestore.js";
-import { DeviceUtilities,getParam } from "../../engine_utils.js";
+import { DeviceUtilities, getParam } from "../../engine_utils.js";
 import { getIconTexture, isIconElement } from "../icons.js";
 
 const debug = getParam("debugspatialmenu");
@@ -303,17 +303,19 @@ export class NeedleSpatialMenu {
             // this._context.scene.add(logoObject);
             const textureLoader = new TextureLoader();
             textureLoader.load("./include/needle/poweredbyneedle.webp", (texture) => {
-                onClick.allowModifyUI = false;
-                firstLabel.removeFromParent();
-                secondLabel.removeFromParent();
-                const aspect = texture.image.width / texture.image.height;
-                this._poweredByNeedleElement?.set({
-                    backgroundImage: texture,
-                    backgroundOpacity: 1,
-                    width: .1 * aspect,
-                    height: .1
-                });
-                this.markDirty();
+                if (texture) {
+                    onClick.allowModifyUI = false;
+                    firstLabel.removeFromParent();
+                    secondLabel.removeFromParent();
+                    const aspect = texture.image.width / texture.image.height;
+                    this._poweredByNeedleElement?.set({
+                        backgroundImage: texture,
+                        backgroundOpacity: 1,
+                        width: .1 * aspect,
+                        height: .1
+                    });
+                    this.markDirty();
+                }
             });
 
         }
@@ -342,7 +344,7 @@ export class NeedleSpatialMenu {
         if (!fontFamily) {
             fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
             const normal = fontFamily.addVariant("normal", "normal", "./include/needle/arial-msdf.json", "./include/needle/arial.png") as any as ThreeMeshUI.FontVariant;
-            /** @ts-ignore */ 
+            /** @ts-ignore */
             normal?.addEventListener('ready', () => {
                 this.markDirty();
             });

package/src/engine/webcomponents/needle-button.ts

@@ -1,4 +1,5 @@
 import { isDevEnvironment } from "../debug/index.js";
+import { ButtonsFactory } from "./buttons.js";
 import { iconFontUrl, loadFont } from "./fonts.js";
 import { WebXRButtonFactory } from "./WebXRButtons.js";
 
@@ -41,7 +42,7 @@ const isDev = isDevEnvironment();
  */
 export class NeedleButtonElement extends HTMLElement {
 
-    static observedAttributes = ["ar", "vr", "quicklook"];
+    static observedAttributes = ["ar", "vr", "quicklook", "qrcode"];
 
     constructor() {
         super();
@@ -62,13 +63,13 @@ export class NeedleButtonElement extends HTMLElement {
     #button: HTMLButtonElement | undefined;
     /** If AR or VR is requested we create and use the webxr button factory to create a button with default behaviour */
     #webxrfactory: WebXRButtonFactory | undefined;
+    #buttonfactory: ButtonsFactory | undefined;
 
     #observer: MutationObserver | undefined;
 
     #update() {
         this.#button?.remove();
 
-
         if (this.getAttribute("ar") != null) {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createARButton();
@@ -81,11 +82,15 @@ export class NeedleButtonElement extends HTMLElement {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createQuicklookButton();
         }
+        else if (this.getAttribute("qrcode") != null) {
+            this.#buttonfactory ??= new ButtonsFactory();
+            this.#button = this.#buttonfactory.createQRCode({ anchorElement: this });
+        }
         else {
             if (isDev) {
                 console.warn("No button type specified for <needle-button>. Use either ar, vr or quicklook attribute.")
             }
-            else {
+            else {
                 console.debug("No button type specified for <needle-button>. Use either ar, vr or quicklook attribute.")
             }
             return;
@@ -96,30 +101,29 @@ export class NeedleButtonElement extends HTMLElement {
         this.#styles ??= document.createElement("style");
         this.#styles.innerHTML = `
             button {
-                all: initial;
-                cursor: inherit;
-                color: inherit;
-                font-family: inherit;
-                gap: inherit;
-                white-space: nowrap;
+                all: unset;
             }
         `;
         const hasUnstyledAttribute = this.getAttribute("unstyled") != undefined;
         if (!hasUnstyledAttribute) {
             this.#styles.innerHTML += `
             :host {
-                display: inline-block;
-                background: rgba(255, 255, 255, .8);
-                backdrop-filter: blur(10px);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
                 width: fit-content;
-                transition: background .2s;
 
-                cursor: pointer;
                 padding: 0.4rem .5rem;
-                border-radius: 0.8rem;
-                color: black;
+                border-radius: 100vw;
+                
                 background: rgba(245, 245, 245, .8);
+                backdrop-filter: blur(10px);
+
+                cursor: pointer;
+                color: black;
                 outline: rgba(0,0,0,.05) 1px solid;
+
+                transition: all .2s;
             }
             :host(:hover) {
                 background: rgba(255, 255, 255, 1);
@@ -152,8 +156,8 @@ export class NeedleButtonElement extends HTMLElement {
         this.#observer?.disconnect();
         this.#observer ??= new MutationObserver(() => this.#updateVisibility());
         this.#observer.observe(this.#button, { attributes: true });
-        if(isDev) {
-            console.log("Needle Button updated")
+        if (isDev) {
+            console.log("Needle Button updated", this);
         }
     }
 
@@ -170,7 +174,7 @@ export class NeedleButtonElement extends HTMLElement {
 
     #onclick = (_ev: MouseEvent) => {
         if (isDev) {
-            console.log("Needle Button clicked")
+            console.log("Needle Button clicked", { defaultPrevented: _ev.defaultPrevented, hasButton: !!this.#button });
         }
         if (_ev.defaultPrevented) return;
 

package/src/engine/webcomponents/needle-engine.ar-overlay.ts

@@ -1,5 +1,5 @@
 import { Context } from "../engine_setup.js";
-import { DeviceUtilities,getParam } from "../engine_utils.js";
+import { DeviceUtilities, getParam } from "../engine_utils.js";
 
 const debug = getParam("debugoverlay");
 export const arContainerClassName = "ar";
@@ -28,7 +28,7 @@ export class AROverlayHandler {
         this.currentSession = session;
         this.arContainer = overlayContainer;
 
-        if (DeviceUtilities.isMozillaXR()) {
+        if (DeviceUtilities.isMozillaXR() || DeviceUtilities.isNeedleAppClip()) {
             const arElements = context.domElement!.children;
             for (let i = 0; i < arElements?.length; i++) {
                 const el = arElements[i];
@@ -38,10 +38,9 @@ export class AROverlayHandler {
                 this.arContainer?.appendChild(el);
             }
 
-            if(overlayContainer) {
+            if (overlayContainer) {
                 this.originalDomOverlayParent = overlayContainer.parentNode;
-                if (this.originalDomOverlayParent) 
-                {
+                if (this.originalDomOverlayParent) {
                     console.log("Reparent DOM Overlay to body", overlayContainer, overlayContainer.style.display);
                     // mozilla webxr does hide elements on session start
                     // this is only necessary if we generated the overlay element
@@ -119,18 +118,20 @@ export class AROverlayHandler {
 
     private ensureQuitARButton(element: HTMLElement) {
 
-        // No quit button in app clips, we provide one via the native UI
-        if (DeviceUtilities.isNeedleAppClip()) {
-            return;
-        }
 
         const quitARSlot = document.createElement("slot");
+        quitARSlot.style.display = "contents";
         quitARSlot.setAttribute("name", "quit-ar");
         this.appendElement(quitARSlot, element);
         this._createdAROnlyElements.push(quitARSlot);
         // for mozilla XR reparenting we have to make sure the close button is clickable so we set it on the element directly
         // it's in general perhaps more safe to set it on the element to ensure it's clickable
         quitARSlot.style.pointerEvents = "auto";
+        // No default quit button in the top right corner in app clips
+        // we provide one via the native UI
+        if (DeviceUtilities.isNeedleAppClip()) {
+            quitARSlot.style.display = "none";
+        }
 
         // We want to search the document if there's a quit-ar button
         // In which case we don't want to populate the default button (slot) with any content

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -288,7 +288,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         logo.src = needleLogoOnlySVG;
         let isUsingCustomLogo = false;
         if (hasLicense && this._element) {
-            const customLogo = this._element.getAttribute("loading-logo-src");
+            const customLogo = this._element.getAttribute("logo-src");
             if (customLogo) {
                 isUsingCustomLogo = true;
                 logo.src = customLogo;

package/src/engine/webcomponents/needle-engine.ts

@@ -254,7 +254,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     <canvas></canvas>
 </div>
 <div class="content">
-    <slot class="overlay-content"></slot>
+    <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
         // #endregion

package/src/engine/xr/NeedleXRSession.ts

@@ -1111,6 +1111,28 @@ export class NeedleXRSession implements INeedleXRSession {
         else if (debug) {
             console.warn("controllerAutoUpdate is not available in three.js - cannot disable it");
         }
+
+
+        // In the appclip we want to make sure the canvas resolution is correctly applied with the DPR  
+        // this change has been added to Needle Go AppClip in daa9c186e49fe9d6f14d200e307eb0664e35ad72
+        // But for an immediate fix for Needle Engine projects we also add it here.  
+        // We can most likely remove the folllowing block in march 2026
+        if (DeviceUtilities.isNeedleAppClip()) {
+            window.requestAnimationFrame(() => {
+                const canvas = this.context.renderer.domElement;
+                const dpr = window.devicePixelRatio || 1;
+                const currentWidth = canvas.width;
+                const currentHeight = canvas.height;
+                // Check if DPR is already applied (avoid double-scaling)
+                const expectedWidth = Math.floor(window.innerWidth * dpr);
+                const expectedHeight = Math.floor(window.innerHeight * dpr);
+                if (Math.abs(currentWidth - expectedWidth) > 2 || Math.abs(currentHeight - expectedHeight) > 2) {
+                    canvas.width = expectedWidth;
+                    canvas.height = expectedHeight;
+                    console.debug("Applied DPR scaling for Needle AppClip XR session", dpr, canvas.width, canvas.height);
+                }
+            });
+        }
     }
 
     /** called when renderer.setSession is fulfilled */

package/src/engine/xr/TempXRContext.ts

@@ -1,8 +1,11 @@
-import { AxesHelper, Camera, Color, DirectionalLight, Fog, GridHelper, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PointLight, Scene, WebGLRenderer } from "three";
+import { ArrayCamera, AxesHelper, Camera, Color, DirectionalLight, Fog, GridHelper, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PointLight, Scene, TextureLoader, Vector3, WebGLRenderer } from "three";
 
+import { needleLogoOnlySVG } from "../assets/index.js";
+import { isDevEnvironment } from "../debug/index.js";
 import { ObjectUtils, PrimitiveType } from "../engine_create_objects.js";
+import { hasCommercialLicense } from "../engine_license.js";
 import { Mathf } from "../engine_math.js";
-import { delay } from "../engine_utils.js";
+import { delay, DeviceUtilities } from "../engine_utils.js";
 
 export declare type SessionInfo = { session: XRSession, mode: XRSessionMode, init: XRSessionInit };
 
@@ -77,6 +80,9 @@ export class TemporaryXRContext {
     get isAR() {
         return this._mode === "immersive-ar";
     }
+    get isVR() {
+        return this._mode === "immersive-vr";
+    }
 
     private readonly _renderer: WebGLRenderer;
     private readonly _camera: Camera;
@@ -88,19 +94,31 @@ export class TemporaryXRContext {
         this._session = session;
         this._session.addEventListener("end", this.onEnd);
 
-        this._renderer = new WebGLRenderer({ alpha: true, antialias: true }); 
+        this._renderer = new WebGLRenderer({ alpha: true, antialias: true });
         this._renderer.outputColorSpace = 'srgb';
+        // Set pixel ratio and size
+        this._renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
+        this._renderer.setSize(window.innerWidth, window.innerHeight, true);
+        if (DeviceUtilities.isNeedleAppClip()) {
+            window.requestAnimationFrame(() => {
+                const dpr = Math.min(2, window.devicePixelRatio);
+                const expectedWidth = Math.floor(window.innerWidth * dpr);
+                const expectedHeight = Math.floor(window.innerHeight * dpr);
+                this._renderer.domElement.width = expectedWidth;
+                this._renderer.domElement.height = expectedHeight;
+            });
+        }
+
         this._renderer.setAnimationLoop(this.onFrame);
         this._renderer.xr.setSession(session);
         this._renderer.xr.enabled = true;
-        // Set pixel ratio and size
-        this._renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
-        this._renderer.setSize(window.innerWidth, window.innerHeight);
+
         this._camera = new PerspectiveCamera();
         this._scene = new Scene();
         this._scene.fog = new Fog(0x444444, 10, 250);
         this._scene.add(this._camera);
         this.setupScene();
+
     }
 
     end() {
@@ -133,6 +151,7 @@ export class TemporaryXRContext {
     }
 
     private _lastTime = 0;
+    private _frames = 0;
     private onFrame = (time: DOMHighResTimeStamp, _frame: XRFrame) => {
         const dt = time - this._lastTime;
         this.update(time, dt);
@@ -140,6 +159,39 @@ export class TemporaryXRContext {
             this._scene.add(this._camera);
         }
         this._renderer.render(this._scene, this._camera);
+        this._lastTime = time;
+        this._frames++;
+    }
+
+
+    private readonly _roomFlyObjects: Mesh[] = [];
+    private _logoObject: Mesh | null = null;
+    private get _logoDistance() {
+        return this.isAR ? 0.3 : 5;
+    }
+    private get _logoScale() {
+        return this.isAR ? 0.04 : 1;
+    }
+
+    private update(time: number, _deltaTime: number) {
+
+        const speed = time * .0004;
+        for (let i = 0; i < this._roomFlyObjects.length; i++) {
+            const obj = this._roomFlyObjects[i];
+            obj.position.y += Math.sin(speed + i * .5) * 0.005;
+            obj.rotateY(.002);
+        }
+
+        const logo = this._logoObject;
+        const xrCamera = this._renderer.xr.getCamera() as ArrayCamera;
+        if (logo) {
+            const cameraForward = new Vector3();
+            xrCamera.getWorldDirection(cameraForward);
+            const targetPosition = xrCamera.position.clone().addScaledVector(cameraForward, this._logoDistance);
+            const speed = this.isAR ? 0.005 : 0.00001; // in VR it's nicer to have the logo basically static
+            logo.position.lerp(targetPosition, this._frames <= 2 ? 1 : _deltaTime * speed);
+            logo.lookAt(this._camera.position);
+        }
     }
 
     /** can be used to prepare the user or fade to black */
@@ -159,10 +211,78 @@ export class TemporaryXRContext {
     }
 
 
-    private _objects: Mesh[] = [];
     private setupScene() {
         this._scene.background = new Color(0x000000);
-        this._scene.add(new GridHelper(5, 10, 0x111111, 0x111111));
+
+        let logoSrc = needleLogoOnlySVG;
+        if (hasCommercialLicense()) {
+            const htmlComponent = document.querySelector("needle-engine");
+            if (htmlComponent) {
+                const licenseLogo = htmlComponent.getAttribute("logo-src");
+                if (licenseLogo?.length) {
+                    logoSrc = licenseLogo;
+                    if (isDevEnvironment()) console.debug("[XR] Using custom loading logo from license:", logoSrc);
+                }
+            }
+        }
+        const logo = this._logoObject = new Mesh(new PlaneGeometry(1, 1, 1, 1), new MeshBasicMaterial({ transparent: true, side: 2 }));
+        logo.scale.multiplyScalar(this._logoScale * window.devicePixelRatio);
+        logo.renderOrder = 1000;
+        logo.material.opacity = 0;
+        this._scene.add(logo);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const img = new Image();
+        const drawLogo = (loadingFailed: boolean) => {
+            if (!ctx) return;
+            logo.material.opacity = 1;
+            const size = 1024;
+            canvas.width = size;
+            canvas.height = size;
+            ctx.imageSmoothingQuality = "high";
+
+            // ctx.fillStyle = "#33333399";
+            // ctx.fillRect(0, 0, canvas.width, canvas.height,);
+
+            const padding = size * .19;
+            const aspect = loadingFailed ? 1 : img.width / img.height;
+            if (!loadingFailed) {
+                const maxHeight = canvas.height - padding * 1.5;
+                const imgWidth = maxHeight * aspect;
+                const imgX = (canvas.width - imgWidth) / 2;
+                ctx.drawImage(img, imgX, 0, imgWidth, maxHeight);
+            }
+            const fontSize = size * .12;
+            const text = "Loading...";
+            ctx.shadowBlur = 0;
+            ctx.fillStyle = this.isAR ? "white" : "rgba(255,255,255,0.4)";
+            ctx.font = `${fontSize}px Arial`;
+            ctx.shadowBlur = size * .02;
+            ctx.shadowColor = "rgba(0,0,0,0.5)";
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            const metrics = ctx.measureText(text);
+            ctx.fillText(text, canvas.width / 2 - metrics.width / 2, canvas.height - padding / 4);
+            ctx.font = `${fontSize}px Arial`;
+            ctx.fillText(text, canvas.width / 2 - metrics.width / 2, canvas.height - padding / 4);
+
+            const texture = new TextureLoader().load(canvas.toDataURL());
+            texture.generateMipmaps = true;
+            texture.colorSpace = 'srgb';
+            texture.anisotropy = 4;
+            const canvasAspect = canvas.width / canvas.height;
+            logo.scale.x = this._logoScale * canvasAspect * window.devicePixelRatio;
+            logo.scale.y = this._logoScale * window.devicePixelRatio;
+            logo.material.map = texture;
+            logo.material.needsUpdate = true;
+        }
+        img.onload = () => drawLogo(false);
+        img.onerror = e => {
+            console.error("Failed to load temporary XR logo:", logoSrc, e);
+            img.src = needleLogoOnlySVG;
+        };
+        img.crossOrigin = "anonymous";
+        img.src = logoSrc;
 
         const light = new DirectionalLight(0xffffff, 1);
         light.position.set(0, 20, 0);
@@ -180,48 +300,36 @@ export class TemporaryXRContext {
         light3.distance = 200;
         this._scene.add(light3);
 
-        const range =  50;
-        for (let i = 0; i < 100; i++) {
-            const material = new MeshStandardMaterial({
-                color: 0x222222,
-                metalness: 1,
-                roughness: .8,
-            });
-            // if we're in passthrough
-            if (this.isAR) {
-                material.emissive = new Color(Math.random(), Math.random(), Math.random());
-                material.emissiveIntensity = Math.random();
-            }
-            const type = Mathf.random(0, 1) > .5 ? PrimitiveType.Sphere : PrimitiveType.Cube;
-            const obj = ObjectUtils.createPrimitive(type, {
-                material
-            });
-            obj.position.x = Mathf.random(-range, range);
-            obj.position.y = Mathf.random(-2, range);
-            obj.position.z = Mathf.random(-range, range);
-            // random rotation
-            obj.rotation.x = Mathf.random(0, Math.PI * 2);
-            obj.rotation.y = Mathf.random(0, Math.PI * 2);
-            obj.rotation.z = Mathf.random(0, Math.PI * 2);
-            obj.scale.multiplyScalar(.5 + Math.random() * 10);
-
-            const dist = obj.position.distanceTo(this._camera.position) - obj.scale.x;
-            if (dist < 1) {
-                obj.position.multiplyScalar(1 + 1 / dist);
-            }
+        // if we're in passthrough
+        if (this.isAR === false) {
+            const range = 50;
+            for (let i = 0; i < 100; i++) {
+                const material = new MeshStandardMaterial({
+                    color: 0x222222,
+                    metalness: 1,
+                    roughness: .8,
+                });
 
-            this._objects.push(obj);
-            this._scene.add(obj);
-        }
-    }
+                const type = PrimitiveType.Sphere; //Mathf.random(0, 1) > .5 ? PrimitiveType.Sphere : PrimitiveType.Cube;
+                const obj = ObjectUtils.createPrimitive(type, { material });
+                obj.position.x = Mathf.random(-range, range);
+                obj.position.y = Mathf.random(-2, range);
+                obj.position.z = Mathf.random(-range, range);
+                // random rotation
+                obj.rotation.x = Mathf.random(0, Math.PI * 2);
+                obj.rotation.y = Mathf.random(0, Math.PI * 2);
+                obj.rotation.z = Mathf.random(0, Math.PI * 2);
+                obj.scale.multiplyScalar(.5 + Math.random() * 10);
 
-    private update(time: number, _deltaTime: number) {
+                const dist = obj.position.distanceTo(this._camera.position) - obj.scale.x;
+                if (dist < 10) {
+                    obj.position.z += 5;
+                    obj.position.multiplyScalar(1 + 1 / dist);
+                }
 
-        const speed = time * .0004;
-        for (let i = 0; i < this._objects.length; i++) {
-            const obj = this._objects[i];
-            obj.position.y += Math.sin(speed + i * .5) * 0.005;
-            obj.rotateY(.002);
+                this._roomFlyObjects.push(obj);
+                this._scene.add(obj);
+            }
         }
     }
 }

package/src/engine-components/SpectatorCamera.ts

@@ -229,11 +229,12 @@ export class SpectatorCamera extends Behaviour {
     onLeaveXR(_evt) {
         this.context.removeCamera(this.cam as ICamera);
         GameObject.setActive(this.gameObject, false);
-        if (this.orbit) this.orbit.enabled = true;
         this._handler?.set(undefined);
         this._handler?.disable();
         if (this.isSpectatingSelf)
             this.stopSpectating();
+        // Importantly re-enable orbit controls on main camera at the end here. This is a workaround for https://linear.app/needle/issue/NE-6897
+        if (this.orbit) this.orbit.enabled = true;
     }
 
     /**