@needle-tools/engine 3.34.3-alpha.1 → 3.34.4-alpha

package/src/engine-components/OrbitControls.ts

@@ -155,46 +155,18 @@ export class OrbitControls extends Behaviour implements ICameraController {
     private _camera: Camera | null = null;
     private _syncedTransform?: SyncedTransform;
     private _didStart = false;
+    private _didSetTarget = false;
 
     targetElement: HTMLElement | null = null;
 
     awake(): void {
         this._didStart = false;
+        this._didSetTarget = false;
         this._startedListeningToKeyEvents = false;
     }
 
     start() {
         this._didStart = true;
-        if (this.autoTarget) {
-            if (this._controls) {
-                const camGo = GameObject.getComponent(this.gameObject, Camera);
-                if (camGo && !this.setLookTargetFromConstraint()) {
-                    if (this.debugLog)
-                        console.log("NO TARGET");
-                    const worldPosition = getWorldPosition(camGo.cam);
-                    const distanceToCenter = worldPosition.length();
-                    const forward = new Vector3(0, 0, -distanceToCenter).applyMatrix4(camGo.cam.matrixWorld);
-                    this.setLookTargetPosition(forward, true);
-                }
-                // we need to wait one frame for the scene be fully populated. E.g. when we added progressive meshes and a heavy scene this was necessary
-                delayForFrames(0).then(() => {
-                    if (this.autoTarget && !this.autoFit && !this.setLookTargetFromConstraint()) {
-                        const opts = new RaycastOptions();
-                        // center of the screen:
-                        opts.screenPoint = new Vector2(0, 0);
-                        opts.lineThreshold = 0.1;
-                        const hits = this.context.physics.raycast(opts);
-                        if (hits.length > 0) {
-                            this.setLookTargetPosition(hits[0].point, true);
-                        }
-                        if (debugCameraFit)
-                            console.log("OrbitControls hits", ...hits);
-                    }
-                    if (this.autoFit) this.fitCamera()
-                });
-            }
-        }
-
         this._eventSystem = EventSystem.get(this.context) ?? undefined;
         if (this._eventSystem) {
             this._afterHandleInputFn = this.afterHandleInput.bind(this);
@@ -211,15 +183,13 @@ export class OrbitControls extends Behaviour implements ICameraController {
         this._enableTime = this.context.time.time;
         const cameraComponent = GameObject.getComponent(this.gameObject, Camera);
         this._camera = cameraComponent;
-        const cam = cameraComponent?.cam;
+        let cam = cameraComponent?.cam;
+        if (!cam && this.gameObject instanceof PerspectiveCamera) {
+            cam = this.gameObject;
+        }
         if (cam) setCameraController(cam, this, true);
-        if (!this._controls) {
-            if (!cam) {
-                console.warn("OrbitControls: Requires a Camera component on the same object as this component.");
-                return;
-            }
-            if (cam)
-                this._cameraObject = cam;
+        if (!this._controls && cam instanceof PerspectiveCamera) {
+            this._cameraObject = cam;
             // Using the parent if possible to make it possible to disable input on the canvas
             // for having HTML content behind it and still receive input
             const element = this.targetElement ?? this.context.renderer.domElement;
@@ -306,6 +276,8 @@ export class OrbitControls extends Behaviour implements ICameraController {
     onBeforeRender() {
         if (!this._controls) return;
         if (this._cameraObject !== this.context.mainCamera) return;
+        
+        this.__handleSetTargetWhenBecomingActiveTheFirstTime();
 
         if (this.context.input.getPointerDown(1) || this.context.input.getPointerDown(2) || this.context.input.mouseWheelChanged || (this.context.input.getPointerPressed(0) && this.context.input.getPointerPositionDelta(0)?.length() || 0 > .1)) {
             this._inputs += 1;
@@ -406,6 +378,36 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     }
 
+    private __handleSetTargetWhenBecomingActiveTheFirstTime() {
+        if (this._didSetTarget) return;
+        this._didSetTarget = true;
+        if (this.autoTarget) {
+
+            const camGo = GameObject.getComponent(this.gameObject, Camera);
+            if (camGo && !this.setLookTargetFromConstraint()) {
+                if (this.debugLog)
+                    console.log("NO TARGET");
+                const worldPosition = getWorldPosition(camGo.cam);
+                const distanceToCenter = worldPosition.length();
+                const forward = new Vector3(0, 0, -distanceToCenter).applyMatrix4(camGo.cam.matrixWorld);
+                this.setLookTargetPosition(forward, true);
+            }
+            if (!this.autoFit && !this.setLookTargetFromConstraint()) {
+                const opts = new RaycastOptions();
+                // center of the screen:
+                opts.screenPoint = new Vector2(0, 0);
+                opts.lineThreshold = 0.1;
+                const hits = this.context.physics.raycast(opts);
+                if (hits.length > 0) {
+                    this.setLookTargetPosition(hits[0].point, true);
+                }
+                if (debugCameraFit)
+                    console.log("OrbitControls hits", ...hits);
+            }
+            if (this.autoFit) this.fitCamera()
+        }
+    }
+
 
     /** 
      * Sets camera target position and look direction. Does perform a raycast in the forward direction of the passed in object to find an orbit point 

package/src/engine-components/webxr/WebXR.ts

@@ -279,19 +279,16 @@ export class WebXR extends Behaviour {
             if ((isiOS() && isSafari()) || debugQuicklook) {
                 if (this.useQuicklookExport) {
                     const button = this.getButtonsFactory().createQuicklookButton();
-                    button.prepend(getIconElement("view_in_ar"));
                     this.addButton(button, xrButtonsPriority);
                 }
             }
             // WebXR
             if (this.createARButton) {
                 const arbutton = this.getButtonsFactory().createARButton();
-                arbutton.prepend(getIconElement("view_in_ar"))
                 this.addButton(arbutton, xrButtonsPriority);
             }
             if (this.createVRButton) {
                 const vrbutton = this.getButtonsFactory().createVRButton();
-                vrbutton.prepend(getIconElement("panorama_photosphere"));
                 this.addButton(vrbutton, xrButtonsPriority);
             }
         }
@@ -300,7 +297,6 @@ export class WebXR extends Behaviour {
             NeedleXRSession.isVRSupported().then(supported => {
                 if (!supported) {
                     const button = this.getButtonsFactory().createSendToQuestButton();
-                    button.prepend(getIconElement("share_windows"));
                     this.addButton(button, xrButtonsPriority);
                 }
             });
@@ -310,7 +306,6 @@ export class WebXR extends Behaviour {
             NeedleXRSession.isXRSupported().then(supported => {
                 if (isDesktop() || !supported) {
                     const qrCode = this.getButtonsFactory().createQRCode();
-                    qrCode.prepend(getIconElement("qr_code"));
                     this.addButton(qrCode, xrButtonsPriority);
                 }
             });

package/src/engine-components/webxr/WebXRButtons.ts

@@ -2,6 +2,7 @@ import { isDevEnvironment } from "../../engine/debug/index.js";
 import { generateQRCode } from "../../engine/engine_utils.js";
 import { isMozillaXR } from "../../engine/engine_utils.js";
 import { NeedleXRSession } from "../../engine/engine_xr.js";
+import { getIconElement } from "../../engine/webcomponents/icons.js";
 import { GameObject } from "../Component.js";
 import { USDZExporter } from "../export/usdz/USDZExporter.js";
 
@@ -49,9 +50,9 @@ export class WebXRButtonFactory {
 
         const button = document.createElement("button");
         this._quicklookButton = button;
-
         button.dataset["needle"] = "quicklook-button";
         button.innerText = "Open in Quicklook";
+        button.prepend(getIconElement("view_in_ar"));
         button.addEventListener("click", () => {
             const usdzExporter = GameObject.findObjectOfType(USDZExporter);
             if (usdzExporter) {
@@ -87,6 +88,7 @@ export class WebXRButtonFactory {
         button.classList.add("webxr-button");
         button.dataset["needle"] = "webxr-ar-button";
         button.innerText = "Enter AR";
+        button.prepend(getIconElement("view_in_ar"))
         button.title = "Click to start an AR session";
         button.addEventListener("click", () => NeedleXRSession.start(mode, init));
         this.updateSessionSupported(button, mode);
@@ -120,6 +122,7 @@ export class WebXRButtonFactory {
         button.classList.add("webxr-button");
         button.dataset["needle"] = "webxr-vr-button";
         button.innerText = "Enter VR";
+        button.prepend(getIconElement("panorama_photosphere"));
         button.title = "Click to start a VR session";
         button.addEventListener("click", () => NeedleXRSession.start(mode, init));
         this.updateSessionSupported(button, mode);
@@ -148,6 +151,7 @@ export class WebXRButtonFactory {
         this._sendToQuestButton = button;
         button.dataset["needle"] = "webxr-sendtoquest-button";
         button.innerText = "Open on Quest";
+        button.prepend(getIconElement("share_windows"));
         button.title = "Click to send this page to the Oculus Browser on your Quest";
         button.addEventListener("click", () => {
             const urlParameter = encodeURIComponent(window.location.href);
@@ -175,6 +179,7 @@ export class WebXRButtonFactory {
         const qrCodeButton = document.createElement("button");
         this._qrButton = qrCodeButton;
         qrCodeButton.innerText = "QR Code";
+        qrCodeButton.prepend(getIconElement("qr_code"));
         qrCodeButton.title = "Scan this QR code with your phone to open this page";
         this.hideElementDuringXRSession(qrCodeButton);