Needle Engine 3.46.1-beta

Files changed (14) hide show

plugins/vite/pwa.js +34 -19
src/engine-components/Animation.ts +33 -15
src/engine-components/DragControls.ts +8 -28
src/engine-components/Duplicatable.ts +60 -13
src/engine/engine_context.ts +22 -3
src/engine/engine_input.ts +20 -17
src/engine/engine_physics.ts +38 -8
src/engine/engine_utils.ts +29 -1
src/engine-components/GroundProjection.ts +2 -6
src/engine/xr/NeedleXRController.ts +92 -20
src/engine-components/OrbitControls.ts +25 -6
src/engine-components/ui/PointerEvents.ts +0 -2
src/engine-components/SyncedRoom.ts +3 -1
src/engine-components/webxr/controllers/XRControllerMovement.ts +96 -42

plugins/vite/pwa.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { copyFileSync, existsSync, mkdirSync,readdirSync, readFileSync, rmSync, writeFileSync } from 'fs';
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'fs';
 import { getOutputDirectory } from './config.js';
 import { getPosterPath } from './poster.js';
@@ -8,7 +8,6 @@
 /** Provides reasonable defaults for a PWA manifest and workbox settings.
  * @param {import('../types').userSettings} userSettings
  * @param {import("../types/needleConfig").needleMeta | null} config
- * @param {import("../types/userconfig").userSettings | null} userSettings
  * @returns {import('vite').Plugin | void}
  */
 export const needlePWA = (command, config, userSettings) => {
@@ -19,7 +18,7 @@
     /** The context contains files that are generated by the plugin and should be deleted after
      * @type {import('../types').NeedlePWAProcessContext} */
     const context = { generatedFiles: [] }
     // early out, explicitly disabled
     if (pwaOptions === false) return;
@@ -28,24 +27,20 @@
         return {
             name: "needle-pwa",
             apply: "build",
-            configResolved(config) {
-                if (findVitePWAPlugin(config)) {
+            configResolved(viteConfig) {
+                if (findVitePWAPlugin(viteConfig)) {
                     errorThrow("It seems that you're trying to build a PWA using `vite-plugin-pwa`!\nNeedle can manage PWA settings for you – just pass the same `pwaOptions` to the `needlePlugin` and `VitePWA` plugins:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you want to manage PWA building yourself and skip this check, please pass `{ pwa: false }` to needlePlugins.");
                 }
             },
         }
     }
     // @ts-ignore // TODO need an extra type so we can add more options into the VitePWAOptions object
     /** @type {number | undefined} */
     const updateInterval = pwaOptions.updateInterval || undefined;
     if ((command !== "build" && !pwaOptions?.devOptions?.enabled) || pwaOptions?.disable) return;
-    // The PWA files should not have gzip compression – this will mess up with the precache and the service worker.
-    // If gzip is wanted, the server should serve files with gzip compression on the fly.
-    if (config) config.gzip = false;
     if (!pwaOptions.registerType) {
         // log("Set PWA registerType to autoUpdate. This will automatically update the service worker when the content changes. If you want to manually update the service worker set the registerType to manual. See https://vite-pwa-org.netlify.app/guide/#configuring-vite-plugin-pwa");
         pwaOptions.registerType = "autoUpdate";
@@ -87,11 +82,27 @@
         name: 'needle-pwa',
         apply: 'build',
         enforce: "post",
+        config(viteConfig) {
+            // Remove the gzip plugin
+            if(viteConfig.plugins){
+                for(let i = viteConfig.plugins.length-1; i >= 0; i--) {
+                    const plugin = viteConfig.plugins[i];
+                    if(plugin && "name" in plugin && plugin.name === "vite:compression") {
+                        // override the closeBundle method so gzip is not be applied
+                        // The PWA files should not have gzip compression – this will mess up with the precache and the service worker.
+                        // If gzip is wanted, the server should serve files with gzip compression on the fly.
+                        plugin.closeBundle = () => {
+                            console.log("[needle-pwa] gzip compression is disabled because you're building a PWA. This will otherwise mess up with the precache and the service worker.");
+                        }
+                    }
+                }
+            }
+        },
         configResolved(config) {
             try {
                 const plugin = findVitePWAPlugin(config);
                 if (!plugin) {
-                    errorThrow("It seems that you're trying to build a PWA!.\nRun `npm install vite-plugin-pwa`, and add VitePWA to the vite config:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you don't intend to build a PWA, pass `{ pwa: false }` to needlePlugins or remove the `pwa` entry.");
+                    errorThrow("It seems that you're trying to build a PWA!.\nRun `npm install vite-plugin-pwa --save-dev` to install the plugin\nThen add VitePWA to your vite.config.js and pass the pwaOptions to both Needle and VitePWA:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    \n    const pwaOptions = {};\n    \n    plugins: [\n        needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n        VitePWA(pwaOptions),\n    ]\n\nIf you don't intend to build a PWA, pass `{ pwa: false }` to needlePlugins or remove the `pwa` entry.");
                 }
                 // check if the index header contains the webmanifest ALSO
@@ -201,7 +212,7 @@
 }
 /** Checks if the vite-plugin-pwa is present in the vite config
- * @param {import('vite').UserConfig} config
+ * @param {import('vite').ResolvedConfig} config
  * @returns {import('vite-plugin-pwa').VitePWAOptions | null}
  */
 function findVitePWAPlugin(config) {
@@ -233,7 +244,7 @@
 /** Throws an error with defined stacktrace.
  * @param {string} message
- * @param {number} stackTraceLimit How many stack frames to show in the error message
+ * @param {number} traceLimit How many stack frames to show in the error message
 */
 function errorThrow(message, traceLimit = 0) {
     const { stackTraceLimit } = Error;
@@ -267,16 +278,20 @@
     }
     processIcons(manifest, outDir, context);
     // TODO include assets in the manifest instead of manually copying
     // if (pwaOptions.includeAssets === undefined) pwaOptions.includeAssets = [];
     // pwaOptions.includeAssets = [...pwaOptions.includeAssets, ...manifest.icons?.map(i => i.src)];
     const packageJsonPath = process.cwd() + "/package.json";
     const packageJson = existsSync(packageJsonPath) ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : {};
     const name = packageJson.name;
     const appName = config?.sceneName || packageJson.name || "Needle App";
+    const description = typeof config?.meta === "string"
+        ? config.meta : config?.meta?.description
+        || packageJson.description
+        || "Made with Needle Engine";
     /** @type {Partial<import("vite-plugin-pwa").ManifestOptions>} */
     const defaultManifest = {
@@ -284,7 +299,7 @@
         name: appName,
         short_name: appName,
         id: "app.made-with-needle." + name.toLowerCase().replace(/[^a-z0-9\/\-]/g, '').replace("\/", "."),
-        description: config.description || packageJson.description || "Made with Needle Engine",
+        description,
         start_url: "./index.html",
         display: "standalone",
         display_override: [
@@ -298,11 +313,11 @@
         prefer_related_applications: false,
         categories: ["spatial", "3D", "needle", "webgl", "webxr", "xr"],
     };
     // Use the poster image if that exists
-    if (!userSettings.noPoster) {
+    if (!userSettings?.noPoster) {
         const posterPath = getPosterPath();
-        defaultManifest.screenshots = [{
+        defaultManifest.screenshots = [{
             src: "./" + posterPath,
             type: "image/webp",
             sizes: "1080x1080", // TODO get actual size

src/engine-components/Animation.ts CHANGED Viewed

@@ -113,14 +113,18 @@
      * @default 0
      */
     get time() {
-        for (const action of this.actions) {
-            if (action.isRunning()) return action.time;
+        if (this.actions) {
+            for (const action of this.actions) {
+                if (action.isRunning()) return action.time;
+            }
         }
         return 0;
     }
     set time(val: number) {
-        for (const act of this.actions) {
-            act.time = val;
+        if (this.actions) {
+            for (const act of this.actions) {
+                act.time = val;
+            }
         }
     }
@@ -330,6 +334,16 @@
     }
     /**
+     * Resume all paused animations.
+     * Note that this will not fade animations in or out and just unpause previous animations. If an animation was faded out which means it's not running anymore, it will not be resumed.
+     */
+    resume() {
+        for (const act of this.actions) {
+            act.paused = false;
+        }
+    }
+    /**
      * Play an animation clip or an clip at the specified index.
      * @param clipOrNumber the animation clip, index or name to play. If undefined, the first animation in the animations array will be played
      * @param options the play options. Use to set the fade duration, loop, speed, start time, end time, clampWhenFinished
@@ -376,25 +390,28 @@
     }
     private internalOnPlay(action: AnimationAction, options: PlayOptions): Promise<AnimationAction> {
-        var prev = this.actions.find(a => a === action);
-        if (prev === action && prev.isRunning() && prev.time < prev.getClip().duration) {
+        var existing = this.actions.find(a => a === action);
+        if (existing === action && existing.isRunning() && existing.time < existing.getClip().duration) {
             const handle = this.tryFindHandle(action);
-            if (prev.paused) {
-                prev.paused = false;
+            if (existing.paused) {
+                existing.paused = false;
             }
             if (handle) return handle.waitForFinish();
         }
         // Assign defaults
-        if (!options.minMaxOffsetNormalized) options.minMaxOffsetNormalized = this.minMaxOffsetNormalized;
-        if (!options.minMaxSpeed) options.minMaxSpeed = this.minMaxSpeed;
         if (options.loop === undefined) options.loop = this.loop;
         if (options.clampWhenFinished === undefined) options.clampWhenFinished = this.clampWhenFinished;
+        if (options.minMaxOffsetNormalized === undefined && this.randomStartTime) options.minMaxOffsetNormalized = this.minMaxOffsetNormalized;
+        if (options.minMaxSpeed === undefined) options.minMaxSpeed = this.minMaxSpeed;
         // Reset currently running animations
         const stopOther = options?.exclusive ?? true;
         if (stopOther) {
-            this.stopAll(options);
+            for (const act of this.actions) {
+                if (act != existing)
+                    act.stop();
+            }
         }
         if (options?.fadeDuration) {
             action.fadeIn(options.fadeDuration);
@@ -402,13 +419,14 @@
         action.enabled = true;
         // Apply start time
-        if (options?.minMaxOffsetNormalized) {
+        if (options?.startTime != undefined) {
+            action.time = options.startTime;
+        }
+        // Only apply random start offset if it's not 0:0 (default). Otherwise `play` will not resume paused animations but instead restart them
+        else if (options?.minMaxOffsetNormalized && options.minMaxOffsetNormalized.x != 0 && options.minMaxOffsetNormalized.y != 0) {
             const clip = action.getClip();
             action.time = Mathf.lerp(options.minMaxOffsetNormalized.x, options.minMaxOffsetNormalized.y, Math.random()) * clip.duration;
         }
-        else if (options?.startTime != undefined) {
-            action.time = options.startTime;
-        }
         // Apply speed
         if (options?.minMaxSpeed) {

src/engine-components/DragControls.ts CHANGED Viewed

@@ -13,7 +13,6 @@
 import { Avatar_POI } from "./avatar/Avatar_Brain_LookAt.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { UsageMarker } from "./Interactable.js";
-import { OrbitControls } from "./OrbitControls.js";
 import { Rigidbody } from "./RigidBody.js";
 import { SyncedTransform } from "./SyncedTransform.js";
 import type { IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.js";
@@ -85,7 +84,6 @@
     /** The object to be dragged – we pass this to handlers when they are created */
     private targetObject: GameObject | null = null;
-    private orbit: OrbitControls | null = null;
     private _dragHelper: LegacyDragVisualsHelper | null = null;
     private static lastHovered: Object3D;
     private _draggingRigidbodies: Rigidbody[] = [];
@@ -117,7 +115,6 @@
     }
     start() {
-        this.orbit = GameObject.findObjectOfType(OrbitControls, this.context);
         if (!this.gameObject.getComponentInParent(ObjectRaycaster))
             this.gameObject.addComponent(ObjectRaycaster);
     }
@@ -171,10 +168,6 @@
             const newDragHandler = new DragPointerHandler(this, this.targetObject || this.gameObject);
             this._dragHandlers.set(args.event.space, newDragHandler);
-            // We need to turn off OrbitControls immediately, otherwise they still get data for a short moment
-            // and they don't properly handle being disabled while already processing data (smoothing happens when enabling again)
-            if (this.orbit) this.orbit.enabled = false;
             newDragHandler.onDragStart(args);
             if (this._dragHandlers.size === 2) {
@@ -223,10 +216,6 @@
             }
             args.use();
         }
-        if (DragControls._active === 0) {
-            if (this.orbit) this.orbit.enabled = true;
-        }
     }
     update(): void {
@@ -261,12 +250,6 @@
     /** Called when the first pointer starts dragging on this object. Not called for subsequent pointers on the same object. */
     private onFirstDragStart(evt: PointerEventData) {
-        if (!this._dragHelper) {
-            if (this.context.mainCamera)
-                this._dragHelper = new LegacyDragVisualsHelper(this.context.mainCamera);
-            else
-                return;
-        }
         if (!evt || !evt.object) return;
         const dc = GameObject.getComponentInParent(evt.object, DragControls);
@@ -280,8 +263,6 @@
         if (!object) return;
         this._isDragging = true;
-        this._dragHelper.setSelected(object, this.context);
-        if (this.orbit) this.orbit.enabled = false;
         const sync = GameObject.getComponentInChildren(object, SyncedTransform);
         if (debug) console.log("DRAG START", sync, object);
@@ -328,7 +309,6 @@
         const selected = this._dragHelper.selected;
         if (debug) console.log("DRAG END", selected, selected?.visible)
         this._dragHelper.setSelected(null, this.context);
-        if (this.orbit) this.orbit.enabled = true;
         if (evt?.object) {
             const sync = GameObject.getComponentInChildren(evt.object, SyncedTransform);
             if (sync) {
@@ -939,9 +919,9 @@
             // Idea: Do a sphere cast if we're still in the proximity of the current draggedObject.
             // This would allow dragging slightly out of the object's bounds and still continue snapping to it.
             // Do a regular raycast (without the dragged object) to determine if we should change what is dragged onto.
-            const opts = new RaycastOptions();
-            opts.testObject = o => o !== this.followObject && o !== dragSource && o !== draggedObject;
-            const hits = this.context.physics.raycastFromRay(ray, opts);
+            const hits = this.context.physics.raycastFromRay(ray, {
+                testObject: o => o !== this.followObject && o !== dragSource && o !== draggedObject// && !(o instanceof GroundedSkybox)
+            });
             if (hits.length > 0) {
                 const hit = hits[0];
@@ -1257,11 +1237,11 @@
         if (!this._selected) return;
-        const wp = getWorldPosition(this._selected);
-        this.onUpdateWorldPosition(wp, this._groundPlanePoint, false);
-        this.onUpdateGroundPlane();
-        this._didDragOnGroundPlaneLastFrame = true;
-        this._hasGroundPlane = true;
+        // const wp = getWorldPosition(this._selected);
+        // this.onUpdateWorldPosition(wp, this._groundPlanePoint, false);
+        // this.onUpdateGroundPlane();
+        // this._didDragOnGroundPlaneLastFrame = true;
+        // this._hasGroundPlane = true;
         /*
         if (!this._context) return;

src/engine-components/Duplicatable.ts CHANGED Viewed

@@ -2,9 +2,11 @@
 import { isDevEnvironment } from "../engine/debug/index.js";
 import { InstantiateOptions } from "../engine/engine_gameobject.js";
+import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { Behaviour, GameObject } from "./Component.js";
-import { DragControls } from "./DragControls.js";
+import { DragControls, DragMode } from "./DragControls.js";
+import { SyncedTransform } from "./SyncedTransform.js";
 import { type IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.js";
 import { ObjectRaycaster } from "./ui/Raycaster.js";
@@ -18,18 +20,22 @@
     @serializable(Object3D)
     parent: GameObject | null = null;
-    /** The object to be duplicated */
+    /** The object to be duplicated. If no object is assigned then the object the Duplicatable component is attached to will be used for cloning.
+     * @default null
+     */
     @serializable(Object3D)
     object: GameObject | null = null;
     /**
      * The maximum number of objects that can be duplicated in the interval.
+     * @default 10
      */
     @serializable()
     limitCount = 10;
     /**
      * The interval in seconds in which the limitCount is reset.
+     * @default 60
      */
     @serializable()
     limitInterval = 60;
@@ -39,25 +45,50 @@
     private _startQuaternion: Quaternion | null = null;
     start(): void {
+        this._currentCount = 0;
+        this._startPosition = null;
+        this._startQuaternion = null;
+        if (!this.object) {
+            this.object = this.gameObject;
+        }
         if (this.object) {
-            if (this.object as any === this.gameObject) {
-                console.error("Can not duplicate self");
-                return;
+            if (this.object === this.gameObject) {
+                // console.error("Can not duplicate self");
+                // return;
+                const instanceIdProvider = new InstantiateIdProvider(this.guid);
+                this.object = GameObject.instantiate(this.object, { idProvider: instanceIdProvider, keepWorldPosition: false, });
+                const duplicatable = GameObject.getComponent(this.object, Duplicatable);
+                duplicatable?.destroy();
+                let dragControls = this.object.getComponentInChildren(DragControls);
+                if (!dragControls) {
+                    dragControls = this.object.addComponent(DragControls, {
+                        dragMode: DragMode.SnapToSurfaces
+                    });
+                    dragControls.guid = instanceIdProvider.generateUUID();
+                }
+                let syncedTransfrom = GameObject.getComponent(dragControls.gameObject, SyncedTransform);
+                if (!syncedTransfrom) {
+                    syncedTransfrom = dragControls.gameObject.addComponent(SyncedTransform);
+                    syncedTransfrom.guid = instanceIdProvider.generateUUID();
+                }
             }
             this.object.visible = false;
+            // legacy – DragControls was required for duplication and so often the component is still there; we work around that by disabling it here
+            const dragControls = this.gameObject.getComponent(DragControls);
+            if (dragControls) {
+                // if (isDevEnvironment()) console.warn(`Please remove DragControls from \"${dragControls.name}\": it's not needed anymore when the object also has a Duplicatable component`);
+                dragControls.enabled = false;
+            }
             // when this is in a moveable parent in multiuser scenario somehow the object position gets an offset and might stay that way
             // this is just a workaround to set the object position before duplicating
             this._startPosition = this.object.position?.clone() ?? new Vector3(0, 0, 0);
             this._startQuaternion = this.object.quaternion?.clone() ?? new Quaternion(0, 0, 0, 1);
         }
-        // legacy – DragControls was required for duplication and so often the component is still there; we work around that by disabling it here
-        const dragControls = this.gameObject.getComponent(DragControls);
-        if (dragControls) {
-            if (isDevEnvironment()) console.warn(`Please remove DragControls from \"${dragControls.name}\": it's not needed anymore when the object also has a Duplicatable component`);
-            dragControls.enabled = false;
-        }
         if (!this.gameObject.getComponentInParent(ObjectRaycaster))
             this.gameObject.addComponent(ObjectRaycaster);
@@ -67,12 +98,27 @@
     private _forwardPointerEvents: Map<Object3D, DragControls> = new Map();
+    onPointerEnter(args: PointerEventData) {
+        if (args.used) return;
+        if (!this.object) return;
+        if (!this.context.connection.allowEditing) return;
+        if (args.button !== 0) return;
+        this.context.input.setCursorPointer();
+    }
+    onPointerExit(args: PointerEventData) {
+        if (args.used) return;
+        if (!this.object) return;
+        if (!this.context.connection.allowEditing) return;
+        if (args.button !== 0) return;
+        this.context.input.setCursorNormal();
+    }
     /** @internal */
     onPointerDown(args: PointerEventData) {
+        if (args.used) return;
         if (!this.object) return;
         if (!this.context.connection.allowEditing) return;
         if (args.button !== 0) return;
         const res = this.handleDuplication();
         if (res) {
             const dragControls = GameObject.getComponent(res, DragControls);
@@ -86,6 +132,7 @@
     /** @internal */
     onPointerUp(args: PointerEventData) {
+        if (args.used) return;
         const dragControls = this._forwardPointerEvents.get(args.event.space);
         if (dragControls) {
             dragControls.onPointerUp(args);
@@ -106,7 +153,7 @@
     private handleDuplication(): Object3D | null {
         if (!this.object) return null;
         if (this._currentCount >= this.limitCount) return null;
-        if (this.object as any === this.gameObject) return null;
+        if (this.object === this.gameObject) return null;
         this.object.visible = true;

src/engine/engine_context.ts CHANGED Viewed

@@ -151,7 +151,8 @@
 	private static _defaultWebglRendererParameters: WebGLRendererParameters = {
 		antialias: true,
 		alpha: false,
-		powerPreference: "high-performance",
+		// Note: this is due to a bug on OSX devices. See NE-5370
+		powerPreference: (utils.isiOS() || utils.isMacOS()) ? "default" : "high-performance",
 	};
 	/** The default parameters that will be used when creating a new WebGLRenderer.
 	 * Modify in global context to change the default parameters for all new contexts.
@@ -808,8 +809,26 @@
 			if (debug) console.log("Waiting for dependencies to be ready");
 			await dependenciesReady
 				.catch(err => {
-					if (debug || isDevEnvironment())
-						console.error("Needle Engine dependencies failed to load", err)
+					if (debug || isDevEnvironment()) {
+						showBalloonError("Needle Engine dependencies failed to load. Please check the console for more details");
+						const printedError = false;
+						if (err instanceof ReferenceError) {
+							let offendingComponentName = "YourComponentName";
+							const offendingComponentStartIndex = err.message.indexOf("'");
+							if (offendingComponentStartIndex > 0) {
+								const offendingComponentEndIndex = err.message.indexOf("'", offendingComponentStartIndex + 1);
+								if (offendingComponentEndIndex > 0) {
+									const name = err.message.substring(offendingComponentStartIndex + 1, offendingComponentEndIndex);
+									if (name.length > 3) offendingComponentName = name;
+								}
+							}
+							console.error(`Needle Engine dependencies failed to load:\n\n# Make sure you don't have circular imports in your scripts!\n→ Possible solution: Replace @serializable(${offendingComponentName}) in your script with @serializable(Behaviour)\n\n---`, err)
+							return;
+						}
+						if (!printedError) {
+							console.error("Needle Engine dependencies failed to load", err);
+						}
+					}
 				})
 				.then(() => {
 					if (debug) console.log("Needle Engine dependencies are ready");

src/engine/engine_input.ts CHANGED Viewed

@@ -224,7 +224,7 @@
     /** For addEventListener: The queue to add the listener to. Listeners in the same queue are called in the order they were added. Default is 0.
      * For removeEventListener: The queue to remove the listener from. If no queue is specified the listener will be removed from all queues
      */
-    queue?: InputEventQueue;
+    queue?: InputEventQueue | number;
     /** If true, the listener will be removed after it is invoked once. */
     once?: boolean;
     /** The listener will be removed when the given AbortSignal object's `abort()` method is called. If not specified, no AbortSignal is associated with the listener. */
@@ -390,20 +390,17 @@
             this.context.domElement.style.cursor = "default";
     }
-    setPointerUsed(i: number, used: boolean = true) {
-        if (i >= this._pointerUsed.length) {
-            if (i >= this._pointerIds.length)
-                return;
-            while (this._pointerUsed.length <= i) {
-                this._pointerUsed.push(false);
+    /**
+     * Check if a pointer id is currently used.
+     */
+    getIsPointerIdInUse(pointerId: number) {
+        for (const evt of this._pointerEventsPressed) {
+            if (evt.pointerId === pointerId) {
+                if (evt.used) return true;
             }
         }
-        this._pointerUsed[i] = used;
+        return false;
     }
-    getPointerUsed(i: number) {
-        if (i >= this._pointerUsed.length) return false;
-        return this._pointerUsed[i];
-    }
     /** how many pointers are currently pressed */
     getPointerPressedCount(): number {
         let count = 0;
@@ -552,12 +549,12 @@
     private _mouseWheelChanged: boolean[] = [false];
     private _mouseWheelDeltaY: number[] = [0];
     private _pointerEvent: Event[] = [];
-    private _pointerUsed: boolean[] = [];
+    /** current pressed pointer events. Used to check if any of those events was used  */
+    private _pointerEventsPressed: NEPointerEvent[] = [];
     /** This is added/updated for pointers. screenspace pointers set this to the camera near plane  */
     private _pointerSpace: IGameObject[] = [];
     private readonly _pressedStack = new Map<number, number[]>();
     private onDownButton(pointerId: number, button: number) {
         let stack = this._pressedStack.get(pointerId);
@@ -1028,6 +1025,7 @@
         this.updatePointerPosition(evt);
+        this._pointerEventsPressed.push(evt);
         this.onDispatchEvent(evt);
     }
     // moveEvent?: Event;
@@ -1058,11 +1056,16 @@
         this.setPointerStateT(index, this._pointerEvent, evt.source);
         this.setPointerState(index, this._pointerUp, true);
-        while (index >= this._pointerUsed.length) this._pointerUsed.push(false);
-        this.setPointerState(index, this._pointerUsed, false);
         this.updatePointerPosition(evt);
+        for (let i = this._pointerEventsPressed.length - 1; i >= 0; i--) {
+            const ptr = this._pointerEventsPressed[i];
+            if (ptr.pointerId === index) {
+                this._pointerEventsPressed.splice(i, 1);
+                break;
+            }
+        }
         if (!this._pointerPositionDown[index]) {
             if (debug) showBalloonWarning("Received pointer up event without matching down event for button: " + index);
             console.warn("Received pointer up event without matching down event for button: " + index)

src/engine/engine_physics.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { getRaycastMesh } from '@needle-tools/gltf-progressive';
-import { ArrayCamera, AxesHelper, Box3, BufferGeometry, Camera, type Intersection, Layers, Line, Mesh, Object3D, PerspectiveCamera, Ray, Raycaster, Sphere, Vector2, Vector3 } from 'three'
+import { ArrayCamera, AxesHelper, Box3, BufferGeometry, Camera, type Intersection, Layers, Line, Matrix3, Matrix4, Mesh, Object3D, PerspectiveCamera, Plane, Ray, Raycaster, Sphere, SphereGeometry,Vector2, Vector3 } from 'three'
+import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js';
 import { Gizmos } from './engine_gizmos.js';
 import { Context } from './engine_setup.js';
@@ -321,7 +322,15 @@
                     const raycastMesh = getRaycastMesh(obj);
                     if (raycastMesh) mesh.geometry = raycastMesh;
                     const lastResultsCount = results.length;
-                    if (options.precise === false && customRaycast(mesh, raycaster, results)) {
+                    let usePrecise = true;
+                    if (options.precise === false) usePrecise = false;
+                    usePrecise ||= geometry.getAttribute("position").array?.length < 64;
+                    if (mesh instanceof GroundedSkybox) {
+                        usePrecise = false;
+                    }
+                    if (!usePrecise && customRaycast(mesh, raycaster, results)) {
                         // did handle raycast
                     }
                     else {
@@ -343,6 +352,9 @@
 }
 const tempSphere = new Sphere();
+const tempPlane = new Plane();
+const normalUpMatrix = new Matrix3();
 /**
  * @returns false if custom raycasting can not run, otherwise true
  */
@@ -361,16 +373,34 @@
             const self = this as Mesh;
             const boundingSphere = self.geometry.boundingSphere;
             if (boundingSphere) {
+                if (self instanceof GroundedSkybox) {
+                    tempPlane.setFromNormalAndCoplanarPoint(getTempVector(0, 1, 0), getTempVector(0, -self.position.y, 0));
+                    tempPlane.applyMatrix4(self.matrixWorld, normalUpMatrix);
+                    const point = raycaster.ray.intersectPlane(tempPlane, getTempVector());
+                    if (point) {
+                        tempSphere.copy(boundingSphere);
+                        tempSphere.applyMatrix4(self.matrixWorld);
+                        const dir = getTempVector(point).sub(raycaster.ray.origin);
+                        const distance = dir.length();
+                        const groundProjectionFloorRadius = tempSphere.radius * .5;
+                        if (distance < groundProjectionFloorRadius) // make sure we're inside the sphere
+                            intersects.push({ distance: distance, point, object: self, normal: tempPlane.normal.clone() });
+                    }
+                    return;
+                }
                 tempSphere.copy(boundingSphere);
                 tempSphere.applyMatrix4(self.matrixWorld);
                 const point = raycaster.ray.intersectSphere(tempSphere, getTempVector());
                 if (point) {
-                    // const dir = getTempVector(tempSphere.center).sub(raycaster.ray.origin);
-                    // const pointOnSphere = getTempVector(dir).normalize().multiplyScalar(tempSphere.radius);
-                    // // const pointOnBoundingSphere = raycaster.ray.closestPointToPoint(boundingSphere.center, getTempVector());
-                    // const distance = dir.length();//pointOnBoundingSphere.distanceTo(raycaster.ray.origin);
-                    const distance = point.distanceTo(raycaster.ray.origin);
-                    intersects.push({ object: self, distance: distance, point: point });
+                    const dir = getTempVector(point).sub(raycaster.ray.origin);
+                    const distance = dir.length();
+                    // Ignore hits when we're inside the sphere
+                    if (distance > tempSphere.radius) {
+                        const normal = dir.clone().normalize();
+                        intersects.push({ distance: distance, point, object: self, normal });
+                    }
                 }
             }
         }

src/engine/engine_utils.ts CHANGED Viewed

@@ -554,6 +554,18 @@
 };
+declare global {
+    interface NavigatorUAData {
+        platform: string;
+    }
+    interface Navigator {
+        userAgentData?: NavigatorUAData;
+    }
+}
 /** Is MacOS or Windows (and not hololens) */
 export function isDesktop() {
     const ua = window.navigator.userAgent;
@@ -581,10 +593,26 @@
     return /WebXRViewer\//i.test(navigator.userAgent);
 }
+let __isMacOs: boolean | undefined;
+// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
+export function isMacOS() {
+    if (__isMacOs !== undefined) return __isMacOs;
+    if (navigator.userAgentData) {
+        // Use modern UA Client Hints API if available
+        return __isMacOs = navigator.userAgentData.platform === 'macOS';
+    } else {
+        // Fallback to user agent string parsing
+        const userAgent = navigator.userAgent.toLowerCase();
+        return __isMacOs = userAgent.includes('mac os x') || userAgent.includes('macintosh');
+    }
+}
+let __isiOS: boolean | undefined;
 const iosDevices = ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'];
 /** @returns `true` for iOS devices like iPad, iPhone, iPod... */
 export function isiOS() {
-    return iosDevices.includes(navigator.platform)
+    if (__isiOS !== undefined) return __isiOS;
+    return __isiOS = iosDevices.includes(navigator.platform)
         // iPad on iOS 13 detection
         || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
 }

src/engine-components/GroundProjection.ts CHANGED Viewed

@@ -153,6 +153,7 @@
             this._projection?.removeFromParent();
             this._projection = new GroundProjection(this.context.scene.environment, this._height, this.radius, 64);
             this._projection.position.y = this._height - offset;
+            this._projection.name = "GroundProjection";
             setVisibleInCustomShadowRendering(this._projection, false);
         }
@@ -181,12 +182,7 @@
         this.env.radius = this._radius;
         this.env.height = this._height;
         */
-        // dont make the ground projection raycastable by default
-        if (this._projection.isObject3D === true) {
-            this._projection.layers.set(2);
-        }
         if (this.context.scene.backgroundBlurriness > 0.001 || this._needsTextureUpdate) {
             this.updateBlurriness();
         }

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -30,6 +30,7 @@
 declare type ComponentType = "button" | "thumbstick" | "squeeze";
 declare type GamepadKey = "button" | "xAxis" | "yAxis";
+declare type NeedleXRControllerButtonName = ButtonName | "primary-button" | "primary";
 declare type ComponentMap = {
     type: ComponentType,
@@ -250,7 +251,35 @@
     }
     private readonly _ray;
+    /** Recalculated once per update */
+    private _hand_wristDotUp: number | undefined = undefined;
+    /**
+     * The dot product of the hand palm with the up vector.
+     * This is a number between -1 and 1, where 1 means the palm is directly up and -1 means the palm is directly down (upside down).
+     * This value is undefined if there's no hand
+     */
+    get handWristDotUp(): number | undefined {
+        if (this._hand_wristDotUp !== undefined) return this._hand_wristDotUp;
+        const handPalm = this.handObject?.joints["wrist"];
+        if (handPalm) {
+            const up = getTempVector(0, 1, 0).applyQuaternion(handPalm.quaternion);
+            const dot = getTempVector(0, 1, 0).dot(up);
+            return this._hand_wristDotUp = dot;
+        }
+        return undefined;
+    }
+    /**
+     * Uses
+     * @returns true if the hand is upside down
+     */
+    get isHandUpsideDown() {
+        return this.handWristDotUp !== undefined ? this.handWristDotUp < -.7 : false;
+    }
+    get isTeleportGesture() {
+        return this.isHandUpsideDown;
+    }
     /** The controller object space.
      * You can use it to attach objects to the controller.
      * Children will be automatically detached and put into the scene when the controller disconnects
@@ -343,6 +372,7 @@
     private onUpdateFrame(frame: XRFrame) {
         // make sure this is cleared every frame
         this._handJointPoses.clear();
+        this._hand_wristDotUp = undefined;
         if (!this.xr.referenceSpace) {
             this._isTracking = false;
@@ -478,7 +508,7 @@
      * @param key the controller button name e.g. x-button
      * @returns the gamepad button if it exists on the controller - otherwise undefined
      */
-    getButton(key: ButtonName | "primary-button" | "primary"): NeedleGamepadButton | undefined {
+    getButton(key: NeedleXRControllerButtonName): NeedleGamepadButton | undefined {
         if (!this._layout) return undefined;
         switch (key) {
@@ -488,12 +518,12 @@
                 else return undefined;
                 break;
             case "primary":
-                return this.toNeedleGamepadButton(0);
+                return this.toNeedleGamepadButton(0, key);
         }
         if (this._buttonMap.has(key)) {
-            return this.toNeedleGamepadButton(this._buttonMap.get(key)!);
+            return this.toNeedleGamepadButton(this._buttonMap.get(key)!, key);
         }
         const componentModel = this._layout?.components[key];
         if (componentModel?.gamepadIndices) {
@@ -503,7 +533,7 @@
                     if (this.inputSource.gamepad) {
                         const index = componentModel.gamepadIndices!.button!;
                         this._buttonMap.set(key, index);
-                        return this.toNeedleGamepadButton(index);
+                        return this.toNeedleGamepadButton(index, key);
                     }
                     break;
                 default:
@@ -520,7 +550,7 @@
         const state = this.states[key];
         if (!state) return null;
         this.states[key] = state;
-        const needleButton = this._needleGamepadButtons[key] || new NeedleGamepadButton();
+        const needleButton = this._needleGamepadButtons[key] || new NeedleGamepadButton(undefined, key);
         needleButton.pressed = state.pressed;
         needleButton.value = state.value;
         needleButton.isDown = state.isDown;
@@ -529,13 +559,45 @@
         return needleButton;
     }
+    /**
+     * Get the pointer id for a specific button of this input device.
+     * This is useful if you want to check if a button (e.g. trigger) is currently being in use which can be queried on the inputsystem.
+     * @returns the pointer id for the button or undefined if the button is not supported
+     * @example
+     * ```ts
+     * const pointerId = controller.getPointerId("primary");
+     * if (pointerId !== undefined) {
+     *     const isUsed = this.context.input.getPointerUsed(pointerId);
+     *     console.log(controller.side, "used?", isUsed);
+     * }
+     * ```
+     */
+    getPointerId(button: number): number;
+    getPointerId(button: NeedleXRControllerButtonName | XRGestureName): number | undefined;
+    getPointerId(button: number | NeedleXRControllerButtonName | XRGestureName): number | undefined {
+        if (button === "primary") {
+            button = 0;
+        }
+        else if (button === "pinch") {
+            button = 0;
+        }
+        if (typeof button !== "number") {
+            const needleButton = this._buttonMap.get(button);
+            if (needleButton === undefined) {
+                return undefined;
+            }
+            button = needleButton;
+        }
+        return this.index * 10 + button;
+    }
     private readonly _needleGamepadButtons: { [key: number | string]: NeedleGamepadButton } = {};
     /** combine the InputState information + the GamepadButton information (since GamepadButtons can not be extended) */
-    private toNeedleGamepadButton(index: number): NeedleGamepadButton | undefined {
+    private toNeedleGamepadButton(index: number, name: string): NeedleGamepadButton | undefined {
         if (!this.inputSource.gamepad?.buttons) return undefined
         const button = this.inputSource.gamepad?.buttons[index];
         const state = this.states[index];
-        const needleButton = this._needleGamepadButtons[index] || new NeedleGamepadButton();
+        const needleButton = this._needleGamepadButtons[index] || new NeedleGamepadButton(index, name);
         if (button) {
             needleButton.pressed = button.pressed;
             needleButton.value = button.value;
@@ -585,7 +647,7 @@
         return { x: 0, y: 0, z: 0 }
     }
-    private readonly _buttonMap = new Map<ButtonName, number>();
+    private readonly _buttonMap = new Map<NeedleXRControllerButtonName, number>();
     // the motion controller contains the controller scheme, we use this to simplify button access
     private _motioncontroller?: MotionController;
@@ -706,9 +768,9 @@
     private updateInputEvents() {
         // https://immersive-web.github.io/webxr-gamepads-module/#xr-standard-heading
         if (this.gamepad?.buttons) {
-            for (let k = 0; k < this.gamepad.buttons.length; k++) {
-                const button = this.gamepad.buttons[k];
-                const state = this.states[k] || new InputState();
+            for (let index = 0; index < this.gamepad.buttons.length; index++) {
+                const button = this.gamepad.buttons[index];
+                const state = this.states[index] || new InputState();
                 let eventName: InputEventNames | null = null;
                 // is down
@@ -730,15 +792,15 @@
                 state.value = button.value;
                 state.pressed = button.pressed;
-                this.states[k] = state;
+                this.states[index] = state;
                 // the selection event is handled in the "selectstart" callback
-                const emitEvent = k !== this._selectButtonIndex && k !== this._squeezeButtonIndex;
+                const emitEvent = index !== this._selectButtonIndex && index !== this._squeezeButtonIndex;
                 if (eventName != null && emitEvent) {
-                    const name = this._layout?.gamepad[k];
-                    if (debug || debugCustomGesture) console.log("Emitting pointer event", eventName, k, name, button.value, this.gamepad, this._layout);
-                    this.emitPointerEvent(eventName, k, name ?? "none", false, null, button.value);
+                    const name = this._layout?.gamepad[index];
+                    if (debug || debugCustomGesture) console.log("Emitting pointer event", eventName, index, name, button.value, this.gamepad, this._layout);
+                    this.emitPointerEvent(eventName, index, name ?? "none", false, null, button.value);
                 }
             }
         }
@@ -752,14 +814,13 @@
                 const thumbTip = handObject.joints["thumb-tip"];
                 if (indexTip && thumbTip) {
                     const distance = indexTip.position.distanceTo(thumbTip.position);
-                    if(distance !== 0) { // ignore exactly 0 which happens when we switch from hands to controllers
+                    if (distance !== 0) { // ignore exactly 0 which happens when we switch from hands to controllers
                         const pinchThreshold = .02;
                         const pinchHysteresis = .01;
                         const state = this.states["pinch"] || new InputState();
                         const maxDistance = (pinchThreshold + pinchHysteresis) * 1.5;
-                        if (this.isRight) console.log(distance);
                         state.value = 1 - ((distance - pinchThreshold) / maxDistance);
                         const isPressed = distance < (pinchThreshold - pinchHysteresis);
                         const isReleased = distance > (pinchThreshold + pinchHysteresis);
                         if (isPressed && !state.pressed) {
@@ -847,7 +908,7 @@
         // Not sure if *this* is enough to determine if the event is spatial or not
         if (this.xr.mode === "immersive-vr" || this.xr.isPassThrough) {
             this.pointerInit.origin = this;
-            this.pointerInit.pointerId = this.index * 10 + button;
+            this.pointerInit.pointerId = this.getPointerId(button);
             this.pointerInit.pointerType = this.hand ? "hand" : "controller";
             this.pointerInit.button = button;
             this.pointerInit.buttonName = buttonName;
@@ -864,6 +925,8 @@
             Context.Current = prevContext;
         }
     }
 }
 class InputState {
@@ -878,6 +941,10 @@
 /** Enhanced GamepadButton with `isDown` and `isUp` information */
 class NeedleGamepadButton {
+    /** The index of the button in the input gamepad */
+    readonly index: number | undefined;
+    readonly name: string;
     touched: boolean = false;
     pressed: boolean = false;
     value: number = 0;
@@ -885,4 +952,9 @@
     isDown: boolean = false;
     /** was the button just released the last update */
     isUp: boolean = false;
+    constructor(index: number | undefined, name: string) {
+        this.index = index;
+        this.name = name;
+    }
 }

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { setCameraController } from "../engine/engine_camera.js";
 import { Gizmos } from "../engine/engine_gizmos.js";
-import { NEPointerEvent } from "../engine/engine_input.js";
+import { InputEventQueue, NEPointerEvent } from "../engine/engine_input.js";
 import { Mathf } from "../engine/engine_math.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -324,8 +324,11 @@
             }
         }
         this._syncedTransform = GameObject.getComponent(this.gameObject, SyncedTransform) ?? undefined;
-        this.context.input.addEventListener("pointerup", this._onPointerDown);
         this.context.pre_render_callbacks.push(this.__onPreRender);
+        this._activePointerEvents = [];
+        this.context.input.addEventListener("pointerdown", this._onPointerDown, { queue: InputEventQueue.Early });
+        this.context.input.addEventListener("pointerup", this._onPointerUp, { queue: InputEventQueue.Early });
     }
     /** @internal */
@@ -339,13 +342,29 @@
             this._controls.removeEventListener("start", this.onControlsChangeStarted);
             // this._controls.reset();
         }
-        this.context.input.removeEventListener("pointerup", this._onPointerDown);
+        this._activePointerEvents.length = 0;
+        this.context.input.removeEventListener("pointerdown", this._onPointerDown);
+        this.context.input.removeEventListener("pointerup", this._onPointerUp);
     }
+    private _activePointerEvents!: NEPointerEvent[];
     private _lastTimeClickOnBackground: number = -1;
     private _clickOnBackgroundCount: number = 0;
-    private _onPointerDown = (evt: NEPointerEvent) => {
+    private _onPointerDown = (_evt: NEPointerEvent) => {
+        this._activePointerEvents.push(_evt);
+    }
+    private _onPointerUp = (evt: NEPointerEvent) => {
+        // make sure we cleanup the active pointer events
+        for (let i = this._activePointerEvents.length - 1; i >= 0; i--) {
+            const registered = this._activePointerEvents[i];
+            if (registered.pointerId === evt.pointerId && registered.button === evt.button) {
+                this._activePointerEvents.splice(i, 1);
+                break;
+            }
+        }
         if (this.clickBackgroundToFitScene > 0 && evt.isClick && evt.button === 0) {
             // it's possible that we didnt raycast in this frame
@@ -414,8 +433,8 @@
             this._lookTargetLerpActive = false;
         }
         this._inputs = 0;
         if (this.autoTarget) {
             // we want to wait one frame so all matrixWorlds are updated
             // otherwise raycasting will not work correctly
@@ -486,7 +505,7 @@
         if (this._controls) {
             if (this.debugLog)
                 this._controls.domElement = this.context.renderer.domElement;
-            this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent && !this.context.isInXR;
+            this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent && !this.context.isInXR && !this._activePointerEvents.some(e => e.used);
             this._controls.keys = this.enableKeys ? defaultKeys : disabledKeys;
             this._controls.autoRotate = this.autoRotate;
             this._controls.autoRotateSpeed = this.autoRotateSpeed;

src/engine-components/ui/PointerEvents.ts CHANGED Viewed

@@ -45,8 +45,6 @@
         if (this._used) return;
         this._used = true;
         this.event.use();
-        if (this.pointerId !== undefined)
-            this.input.setPointerUsed(this.pointerId);
     }
     private _propagationStopped: boolean = false;

src/engine-components/SyncedRoom.ts CHANGED Viewed

@@ -262,7 +262,9 @@
             }
             else {
                 if (this.urlParameterName) {
-                    if (!getParam(this.urlParameterName)) {
+                    const name = getParam(this.urlParameterName);
+                    // true check for ?room= without an actual name
+                    if (!name || name === true) {
                         if (this._lastJoinedRoom)
                             utils.setParamWithoutReload(this.urlParameterName, this._lastJoinedRoom);
                         else

src/engine-components/webxr/controllers/XRControllerMovement.ts CHANGED Viewed

@@ -1,7 +1,8 @@
-import { AdditiveBlending, BufferAttribute, Color, DoubleSide, Intersection, Line, Line3, Mesh, MeshBasicMaterial, Object3D, Plane, RingGeometry, SphereGeometry, SubtractiveBlending, Vector3 } from "three";
+import { AdditiveBlending, BufferAttribute, Color, DoubleSide, Intersection, Line, Line3, Material, Mesh, MeshBasicMaterial, Object3D, Plane, RingGeometry, Scene, SphereGeometry, SubtractiveBlending, Vector3 } from "three";
 import { Line2 } from "three/examples/jsm/lines/Line2.js";
 import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";
 import { Gizmos } from "../../../engine/engine_gizmos.js";
 import { Mathf } from "../../../engine/engine_math.js";
@@ -18,6 +19,7 @@
 const debug = getParam("debugwebxr");
+declare type HitPointObject = Object3D & { material: Material & { opacity: number } }
 /**
  * XRControllerMovement is a component that allows to move the XR rig using the XR controller input.
  */
@@ -151,7 +153,7 @@
     protected onHandleTeleport(controller: NeedleXRController, rig: IGameObject) {
         let teleportInput = 0;
-        if (controller.hand && this.usePinchToTeleport) {
+        if (controller.hand && this.usePinchToTeleport && controller.isTeleportGesture) {
             const pinch = controller.getGesture("pinch");
             if (pinch) {
                 teleportInput = pinch.value;
@@ -169,10 +171,12 @@
         else if (teleportInput > .8) {
             this._didTeleport = true;
             const hit = this.context.physics.raycastFromRay(controller.ray)[0];
-            // Ignore hits on objects with interactive components if teleport target is disabled
-            if (hit && controller.hand && !this.useTeleportTarget) {
-                if (this.isObjectWithInteractiveComponent(hit.object)) return;
+            if (hit.object instanceof GroundedSkybox) {
+                const dot_up = hit.normal?.dot(getTempVector(0, 1, 0));
+                // Make sure we can only teleport on the ground / floor plane
+                if (dot_up !== undefined && dot_up < 0.4) {
+                    return;
+                }
             }
             let point: Vector3 | null = hit?.point;
@@ -214,8 +218,9 @@
     private _plane: Plane | null = null;
     private readonly _lines: Line2[] = [];
-    private readonly _hitDiscs: Object3D[] = [];
+    private readonly _hitDiscs: HitPointObject[] = [];
     private readonly _hitDistances: Array<number | null> = [];
+    private readonly _lastHitDistances: Array<number | null | undefined> = [];
     protected renderRays(session: NeedleXRSession) {
@@ -247,15 +252,24 @@
             line.position.copy(pos);
             line.quaternion.copy(rot);
             const scale = session.rigScale;
-            const distance = this._hitDistances[i];
-            const hasHit = distance != null;
-            const dist = hasHit ? distance : scale;
+            const forceShowRay = this.usePinchToTeleport && ctrl.isTeleportGesture;
+            const distance = this._lastHitDistances[i];
+            const hasHit = this._hitDistances[i] != null;
+            const dist = distance != null ? distance : scale;
             line.scale.set(scale, scale, dist);
             line.visible = true;
             line.layers.disableAll();
             line.layers.enable(2);
             let targetOpacity = line.material.opacity;
-            if (ctrl.getButton("primary")?.pressed) {
+            if (forceShowRay) {
+                targetOpacity = 1;
+            }
+            else if (this.showHits && dist < session.rigScale * 0.5) {
+                targetOpacity = 0;
+            }
+            else if (ctrl.getButton("primary")?.pressed) {
                 targetOpacity = .5;
             }
             else {
@@ -279,26 +293,49 @@
         for (let i = 0; i < session.controllers.length; i++) {
             const ctrl = session.controllers[i];
             if (!ctrl.connected || !ctrl.isTracking || !ctrl.ray || !ctrl.hasSelectEvent) continue;
+            let disc = this._hitDiscs[i];
+            let runRaycast = true;
+            // Check if the primary input button is in use
+            const pointerId: number | undefined = ctrl.getPointerId("primary");
+            if (pointerId != undefined) {
+                const isCurrentlyUsed = this.context.input.getIsPointerIdInUse(pointerId);
+                // if the input is being used then we hide the ray
+                if (isCurrentlyUsed) {
+                    if (disc) disc.visible = false;
+                    this._hitDistances[i] = null;
+                    this._lastHitDistances[i] = 0;
+                    runRaycast = false;
+                }
+            }
             // save performance by only raycasting every nth frame
             const interval = this.context.time.smoothedFps >= 59 ? 1 : 10;
             if ((this.context.time.frame + ctrl.index) % interval !== 0) {
+                runRaycast = false;
+            }
+            if (!runRaycast) {
                 const disc = this._hitDiscs[i];
-                // if the disc had a hit last frame, we can show it again
-                if (disc && disc["hit"]) {
-                    disc.visible = true;
-                    this.hitPointerSetPosition(ctrl, disc, disc["hit"].distance);
+                // if the disc had a hit last frame, we can update it here
+                if (disc && disc.visible && disc["hit"]) {
+                    this.updateHitPointerPosition(ctrl, disc, disc["hit"].distance);
                 }
                 continue;
             }
             const hits = this.context.physics.raycastFromRay(ctrl.ray, { testObject: this.hitPointRaycastFilter, precise: false });
-            const hit = hits.find(h => {
+            let hit = hits.find(hit => {
+                if (this.usePinchToTeleport && ctrl.isTeleportGesture) return true;
                 // Only render hits on interactable objects
-                return this.isObjectWithInteractiveComponent(h.object);
+                return this.isObjectWithInteractiveComponent(hit.object);
             });
+            // Fallback to use the first hit
+            if (!hit) {
+                hit = hits[0];
+            }
-            let disc = this._hitDiscs[i];
             if (disc) // save the hit object on the disc
             {
                 disc["controller"] = ctrl;
@@ -307,6 +344,7 @@
             this._hitDistances[i] = hit?.distance || null;
             if (hit) {
+                this._lastHitDistances[i] = hit.distance;
                 const rigScale = (session.rigScale ?? 1);
                 if (debug) {
@@ -318,24 +356,36 @@
                     disc = this.createHitPointObject();
                     this._hitDiscs[i] = disc;
                 }
-                disc.visible = true;
-                const size = (.01 * (rigScale + hit.distance));
-                disc.scale.set(size, size, size);
-                disc.layers.disableAll();
-                disc.layers.enable(2);
                 disc["hit"] = hit;
-                if (hit.normal) {
-                    this.hitPointerSetPosition(ctrl, disc, hit.distance);
-                    const worldNormal = hit.normal.applyQuaternion(getWorldQuaternion(hit.object));
-                    disc.quaternion.setFromUnitVectors(up, worldNormal);
+                // hide the disc if the hit point is too close
+                disc.visible = hit.distance > rigScale * 0.05;
+                let size = (.01 * (rigScale + hit.distance));
+                const primaryPressed = ctrl.getButton("primary")?.pressed;
+                if (primaryPressed) size *= 1.1;
+                disc.scale.set(size, size, size);
+                disc.layers.set(2);
+                let targetOpacity = disc.material.opacity;
+                if (primaryPressed) {
+                    targetOpacity = 1;
                 }
                 else {
-                    this.hitPointerSetPosition(ctrl, disc, hit.distance);
+                    targetOpacity = hit.distance < .15 * rigScale ? .2 : .6;
                 }
+                disc.material.opacity = Mathf.lerp(disc.material.opacity, targetOpacity, this.context.time.deltaTimeUnscaled / .1);
-                if (disc.parent !== this.context.scene) {
-                    this.context.scene.add(disc);
+                if (disc.visible) {
+                    if (hit.normal) {
+                        this.updateHitPointerPosition(ctrl, disc, hit.distance);
+                        const worldNormal = hit.normal.applyQuaternion(getWorldQuaternion(hit.object));
+                        disc.quaternion.setFromUnitVectors(up, worldNormal);
+                    }
+                    else {
+                        this.updateHitPointerPosition(ctrl, disc, hit.distance);
+                    }
+                    if (disc.parent !== this.context.scene) {
+                        this.context.scene.add(disc);
+                    }
                 }
             }
             else {
@@ -346,13 +396,17 @@
         }
     }
-    private isObjectWithInteractiveComponent(object: Object3D) {
-        return hasPointerEventComponent(object) || (object["isUI"] === true || object.parent?.["isUI"] === true)
+    private isObjectWithInteractiveComponent(object: Object3D, level: number = 0) {
+        if (hasPointerEventComponent(object) || (object["isUI"] === true)) return true;
+        if ((object as Scene).isScene) return false;
+        if (object.parent) return this.isObjectWithInteractiveComponent(object.parent, level + 1);
+        return false;
     }
-    private hitPointerSetPosition(ctrl: NeedleXRController, disc: Object3D, distance: number) {
-        disc.position.copy(ctrl.rayWorldPosition)
-        disc.position.add(getTempVector(0, 0, distance - .01).applyQuaternion(ctrl.rayWorldQuaternion));
+    private updateHitPointerPosition(ctrl: NeedleXRController, pt: Object3D, distance: number) {
+        const targetPos = getTempVector(ctrl.rayWorldPosition);
+        targetPos.add(getTempVector(0, 0, distance - .01).applyQuaternion(ctrl.rayWorldQuaternion));
+        pt.position.lerp(targetPos, this.context.time.deltaTimeUnscaled / .05);
     }
     protected hitPointRaycastFilter: RaycastTestObjectCallback = (obj: Object3D) => {
@@ -362,9 +416,9 @@
     }
     /** create an object to visualize hit points in the scene */
-    protected createHitPointObject(): Object3D {
-        var container = new Object3D();
-        const disc = new Mesh(
+    protected createHitPointObject(): HitPointObject {
+        // var container = new Object3D();
+        const mesh = new Mesh(
             new SphereGeometry(.3, 6, 6),// new RingGeometry(.3, 0.5, 32).rotateX(- Math.PI / 2),
             new MeshBasicMaterial({
                 color: 0xeeeeee,
@@ -374,9 +428,9 @@
                 side: DoubleSide,
             })
         );
-        disc.layers.disableAll();
-        disc.layers.enable(2);
-        container.add(disc);
+        mesh.layers.disableAll();
+        mesh.layers.enable(2);
+        // container.add(disc);
         // const disc2 = new Mesh(
         //     new RingGeometry(.43, 0.5, 32).rotateX(- Math.PI / 2),
@@ -391,7 +445,7 @@
         // disc2.layers.enable(2);
         // disc2.position.y = .01;
         // container.add(disc2);
-        return container;
+        return mesh;
     }
     /** create an object to visualize controller rays */