Needle Engine 3.37.13-alpha

Files changed (5) hide show

src/engine/webcomponents/buttons.ts +4 -1
src/engine-components/CameraUtils.ts +1 -6
src/engine-components/webxr/WebARSessionRoot.ts +53 -31
src/engine-components/webxr/WebXR.ts +16 -7
src/engine-components/webxr/WebXRImageTracking.ts +32 -3

src/engine/webcomponents/buttons.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { isDevEnvironment } from "../debug/debug.js";
+import { isDevEnvironment, showBalloonWarning } from "../debug/debug.js";
 import { IContext } from "../engine_types.js";
 import { generateQRCode, isMobileDevice } from "../engine_utils.js";
 import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
@@ -176,6 +176,9 @@
         qrCodeButton.addEventListener("click", () => {
             if (qrCodeContainer.parentNode) return hideQRCode();
+            if (window.location.href.includes("://localhost")) {
+                showBalloonWarning("To access your website from another device in the same local network you have to use the IP address instead of localhost.");
+            }
             showQRCode();
         });

src/engine-components/CameraUtils.ts CHANGED Viewed

@@ -82,12 +82,7 @@
         const autoRotate = context.domElement.getAttribute("auto-rotate");
         orbit.autoRotate = autoRotate !== undefined && (autoRotate === "" || autoRotate === "true")
         orbit.autoRotateSpeed = 0.5;
-        const ctx = context;
-        const fitCamera = () => {
-            ctx.pre_render_callbacks.splice(ctx.pre_render_callbacks.indexOf(fitCamera), 1);
-            orbit.fitCamera();
-        }
-        ctx.pre_render_callbacks.push(fitCamera);
+        orbit.autoFit = true;
     }
     else {
         console.warn("Missing camera object, can not add orbit controls")

src/engine-components/webxr/WebARSessionRoot.ts CHANGED Viewed

@@ -26,8 +26,8 @@
 export class WebARSessionRoot extends Behaviour {
     /** The scale of a user in AR:
-     * a large value makes the scene appear smaller
-     * default is 1
+     * Note: a large value makes the scene appear smaller
+     * @default 1
      */
     @serializable()
     get arScale(): number {
@@ -40,23 +40,37 @@
     }
     private _arScale: number = 1;
-    /** When enabled the placed scene forward direction will towards the XRRig */
+    /** When enabled the placed scene forward direction will towards the XRRig
+     * @default false
+    */
     @serializable()
     invertForward: boolean = false;
-    /** When assigned this asset will be loaded and visualize the placement while in AR */
+    /** When assigned this asset will be loaded and visualize the placement while in AR
+     * @default null
+     */
     @serializable(AssetReference)
     customReticle?: AssetReference;
     /** When enabled we will create a XR anchor for the scene placement
-     * and make sure the scene is at that anchored point during a XR session */
+     * and make sure the scene is at that anchored point during a XR session
+     * @default false
+     **/
     @serializable()
     useXRAnchor: boolean = false;
-    /** Preview feature: enable touch transform */
+    /** Preview feature: enable touch transform
+     * @default false
+     */
     @serializable()
     arTouchTransform: boolean = false;
+    /** When enabled the scene will be placed automatically when a point in the real world is found
+     * @default false
+     */
+    @serializable()
+    autoPlace: boolean = false;
     /** true if we're currently placing the scene */
     private _isPlacing = true;
@@ -227,8 +241,8 @@
     private updateReticleAndHits(_xr: NeedleXRSession, i: number, hit: NeedleXRHitTestResult, scale: number) {
         // save the hit test
         this._hits[i] = hit.hit;
+        let reticle = this._reticle[i];
-        let reticle = this._reticle[i];
         if (!reticle) {
             if (this.customReticle) {
                 if (this.customReticle.asset) {
@@ -267,11 +281,11 @@
         reticle["lastPos"].copy(reticle.position);
         reticle.quaternion.copy(reticle["lastQuat"].slerp(hit.quaternion, this.context.time.deltaTime / .05));
         reticle["lastQuat"].copy(reticle.quaternion);
         // TODO make sure original reticle asset scale is respected, or document it should be uniformly scaled
         // scale *= this.customReticle?.asset?.scale?.x || 1;
         reticle.scale.set(scale, scale, scale);
         // if (this.invertForward) {
         //     reticle.rotateY(Math.PI);
         // }
@@ -289,30 +303,25 @@
         if (this._placementStartTime < 0) {
             this._placementStartTime = this.context.time.realtimeSinceStartup;
         }
+        if (this.autoPlace) {
+            reticle.visible = false;
+            this.onPlaceScene(null);
+        }
     }
-    private onPlaceScene = (evt: NEPointerEvent) => {
+    private onPlaceScene = (evt: NEPointerEvent | null) => {
         if (this._isPlacing == false) return;
-        if(evt.used) return;
+        if (evt?.used) return;
         let reticle: IGameObject | undefined = this._reticle[0];
-        let hit = this._hits[0];
-        if (evt.origin instanceof NeedleXRController) {
-            // until we can use hit testing for both controllers and have multple reticles we only allow placement with the first controller
-            const controllerReticle = this._reticle[evt.origin.index];
-            if (controllerReticle) {
-                reticle = controllerReticle;
-                hit = this._hits[evt.origin.index];
-            }
-        }
         if (!reticle) {
             console.warn("No reticle to place...");
             return;
         }
-        if (!reticle.visible) {
+        if (!reticle.visible && !this.autoPlace) {
             console.warn("Reticle is not visible (can not place)");
             return;
         }
@@ -322,10 +331,23 @@
             return;
         }
+        let hit = this._hits[0];
+        if (evt && evt.origin instanceof NeedleXRController) {
+            // until we can use hit testing for both controllers and have multple reticles we only allow placement with the first controller
+            const controllerReticle = this._reticle[evt.origin.index];
+            if (controllerReticle) {
+                reticle = controllerReticle;
+                hit = this._hits[evt.origin.index];
+            }
+        }
         // if we place the scene we don't want this event to be propagated to any sub-objects (via the EventSystem) anymore and trigger e.g. a click on objects for the "place tap" event
-        evt.stopImmediatePropagation();
-        evt.stopPropagation();
-        evt.use();
+        if (evt) {
+            evt.stopImmediatePropagation();
+            evt.stopPropagation();
+            evt.use();
+        }
         this._isPlacing = false;
         this.context.input.removeEventListener("pointerup", this.onPlaceScene);
@@ -396,9 +418,9 @@
         const reticleGo = reticle as GameObject;
         const camWP = camGo.worldPosition;
         const reticleWp = reticleGo.worldPosition;
-        this.upVec.set(0,1,0).applyQuaternion(reticle.quaternion);
+        this.upVec.set(0, 1, 0).applyQuaternion(reticle.quaternion);
         // upVec may be pointing AWAY from us, we have to flip it if that's the case
         const camPos = camGo.worldPosition;
         if (camPos) {
@@ -415,9 +437,9 @@
         // Gizmos.DrawLabel(reticle.position, upAngle.toFixed(2), 0.1);
         const angleForWallPlacement = 30;
-        if ((upAngle > angleForWallPlacement && upAngle < 180 - angleForWallPlacement) ||
+        if ((upAngle > angleForWallPlacement && upAngle < 180 - angleForWallPlacement) ||
             (upAngle < -angleForWallPlacement && upAngle > -180 + angleForWallPlacement)) {
             this.lookPoint.copy(reticle.position).add(this.upVec);
             this.lookPoint.y = reticle.position.y;
             reticle.lookAt(this.lookPoint);
@@ -441,7 +463,7 @@
         if (!rigObject) {
             console.warn("No rig object to place");
             return;
-        }
+        }
         const rigScale = NeedleXRSession.active?.rigScale || 1;
         // save the previous rig parent
@@ -479,7 +501,7 @@
         // apply the rig modifications and add it back to the previous parent
         rigObject.matrix.decompose(rigObject.position, rigObject.quaternion, rigObject.scale);
         previousParent.add(rigObject);
     }
 }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { Object3D } from "three";
-import { showBalloonWarning } from "../../engine/debug/index.js";
+import { isDevEnvironment, showBalloonWarning } from "../../engine/debug/index.js";
 import { AssetReference } from "../../engine/engine_addressables.js";
+import { findObjectOfType } from "../../engine/engine_components.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { getParam, isDesktop, isiOS, isMobileDevice, isQuest, isSafari } from "../../engine/engine_utils.js";
 import { type NeedleXREventArgs, NeedleXRSession } from "../../engine/engine_xr.js";
@@ -10,6 +11,7 @@
 import { PlayerSync } from "../../engine-components-experimental/networking/PlayerSync.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { USDZExporter } from "../export/usdz/USDZExporter.js";
+import { NeedleMenu } from "../NeedleMenu.js";
 import { SpatialGrabRaycaster } from "../ui/Raycaster.js";
 import { Avatar } from "./Avatar.js";
 import { XRControllerModel } from "./controllers/XRControllerModel.js";
@@ -310,12 +312,19 @@
         }
         if (this.createQRCode && !isMobileDevice()) {
-            NeedleXRSession.isXRSupported().then(supported => {
-                if (isDesktop() || !supported) {
-                    const qrCode = ButtonsFactory.getOrCreate().createQRCode();
-                    this.addButton(qrCode, xrButtonsPriority);
-                }
-            });
+            const menu = findObjectOfType(NeedleMenu);
+            if (menu && menu.createQRCodeButton === false) {
+                // If the menu exists and the QRCode option is disabled we dont create it (NE-4919)
+                if (isDevEnvironment()) console.warn("WebXR: QRCode button is disabled in the Needle Menu component")
+            }
+            else {
+                NeedleXRSession.isXRSupported().then(supported => {
+                    if (isDesktop() || !supported) {
+                        const qrCode = ButtonsFactory.getOrCreate().createQRCode();
+                        this.addButton(qrCode, xrButtonsPriority);
+                    }
+                });
+            }
         }
     }

src/engine-components/webxr/WebXRImageTracking.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 import { serializable } from "../../engine/engine_serialization.js";
 import { CircularBuffer, getParam } from "../../engine/engine_utils.js";
 import { type NeedleXREventArgs, NeedleXRSession } from "../../engine/xr/api.js";
-import { imageToCanvas,USDWriter, USDZExporterContext } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
+import { imageToCanvas, USDWriter, USDZExporterContext } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
 import { USDZExporter } from "../../engine-components/export/usdz/USDZExporter.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { Renderer } from "../Renderer.js";
@@ -97,23 +97,50 @@
     parent: Object3D | undefined | null;
     matrix: Matrix4;
 }
+/**
+ * WebXRImageTracking allows you to track images in the real world and place objects on top of them.
+ * This component is only available in WebXR sessions.
+ * The WebXRImageTrackingModel contains the image to track, the object to place on top of the image, and the size of the image as well as settings for the tracking.
+ * Used by the {@link WebXRImageTracking} component
+ */
 export class WebXRImageTrackingModel {
+    /**
+     * Tracked image marker url. Make sure the image has good contrast and unique features to improve the tracking quality.
+     */
     @serializable(URL)
     image?: string;
+    /** Make sure this matches your physical marker size! Otherwise the tracked object will \"swim\" above or below the marker.
+     * @default 0.25 which is equivalent to 25cm
+    */
     @serializable()
-    widthInMeters!: number;
+    widthInMeters: number = .25;
+    /**
+     * The object moved around by the image. Make sure the size matches WidthInMeters.
+     */
     @serializable(AssetReference)
     object?: AssetReference;
+    /**
+     * If true, a new instance of the referenced object will be created for each tracked image. Enable this if you're re-using objects for multiple markers.
+     */
     @serializable()
     createObjectInstance: boolean = false;
+    /** Use this for static images (e.g. markers on the floor). Only the first few frames of new poses will be applied to the model. This will result in more stable tracking.
+     * @default false
+    */
     @serializable()
     imageDoesNotMove: boolean = false;
+    /**
+     * Enable to hide the tracked object when the image is not tracked anymore. When disabled the tracked object will stay at the position it was last tracked at.
+     * @default true
+     */
+    @serializable()
+    hideWhenTrackingIsLost: boolean = true;
 }
 class ImageTrackingExtension {
@@ -315,6 +342,8 @@
         const hysteresis = 1000;
         for (const [key, value] of this.imageToObjectMap) {
             if (!value.object || !key) continue;
+            // If the user disallowed hiding the object when tracking is lost, skip this
+            if (key.hideWhenTrackingIsLost === false) continue;
             let found = false;
             for (const trackedImage of this.currentImages) {
                 if (trackedImage.model === key) {