@threlte/xr 1.5.4 → 1.5.5

package/dist/components/Controller.svelte

@@ -117,7 +117,10 @@
   {/if}
 
   {#if targetRay}
-    <T is={targetRay}>
+    <T
+      is={targetRay}
+      attach={scene}
+    >
       {@render targetRaySnippet?.()}
 
       {#if hasPointerControls || hasTeleportControls}

package/dist/components/Hand.svelte

@@ -117,7 +117,10 @@
   </T>
 
   {#if targetRay !== undefined}
-    <T is={xrHand.targetRay}>
+    <T
+      is={xrHand.targetRay}
+      attach={scene}
+    >
       {@render targetRay()}
     </T>
   {/if}

package/dist/components/XR.svelte

@@ -128,7 +128,7 @@ This should be placed within a Threlte `<Canvas />`.
   }
 
   const handleInputSourcesChange = (event: XRInputSourcesChangeEvent) => {
-    isHandTracking.current = Object.values(event.session.inputSources).some((source) => source.hand)
+    isHandTracking.current = Array.from(event.session.inputSources).some((source) => source.hand)
     oninputsourceschange?.(event)
   }
 

package/dist/components/internal/Cursor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Color, DoubleSide, RawShaderMaterial, type ColorRepresentation } from 'three'
+  import { Color, DoubleSide, ShaderMaterial, type ColorRepresentation } from 'three'
   import { T } from '@threlte/core'
 
   interface Props {
@@ -11,10 +11,6 @@
   const { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
 
   const vertexShader = `
-    uniform mat4 projectionMatrix;
-    uniform mat4 modelViewMatrix;
-    attribute vec2 uv;
-    attribute vec3 position;
     varying vec2 vUv;
     void main() {
       vUv = uv;
@@ -23,14 +19,13 @@
   `
 
   const fragmentShader = `
-    precision mediump float;
     uniform float thickness;
     uniform vec3 color;
     varying vec2 vUv;
     void main() {
-      float radius = 0.1;
-      float dist = length(vUv - vec2(0.5));
-      float alpha = 1.0 - step(thickness, abs(distance(vUv, vec2(0.5)) - 0.25));
+      float d = abs(distance(vUv, vec2(0.5)) - 0.25);
+      float edge = fwidth(d);
+      float alpha = 1.0 - smoothstep(thickness - edge, thickness + edge, d);
       gl_FragColor = vec4(color, alpha);
     }
   `
@@ -40,7 +35,7 @@
     color: { value: color }
   }
 
-  const shaderMaterial = new RawShaderMaterial({
+  const shaderMaterial = new ShaderMaterial({
     vertexShader,
     fragmentShader,
     uniforms,

package/dist/components/internal/PointerCursor.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import { T, useTask, useThrelte } from '@threlte/core'
+  import { untrack } from 'svelte'
   import { pointerIntersection, pointerState } from '../../internal/state.svelte.js'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
@@ -28,6 +29,8 @@
 
   const ref = new Group()
 
+  const SURFACE_OFFSET = 0.002
+
   useTask(
     () => {
       if (intersection === undefined) {
@@ -43,17 +46,28 @@
 
       normalMatrix.getNormalMatrix(object.matrixWorld)
       worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-      ref.lookAt(vec3.addVectors(point, worldNormal))
+
+      // Float the reticle just above the surface so it doesn't z-fight
+      // with the coplanar face underneath.
+      ref.position.addScaledVector(worldNormal, SURFACE_OFFSET)
+
+      ref.lookAt(vec3.addVectors(ref.position, worldNormal))
     },
     {
       running: () => hovering && intersection !== undefined
     }
   )
 
+  // Snap to the hit point on hover entry so the reticle doesn't visibly
+  // fly in from its previous location. `intersection` is read untracked
+  // so this only reruns on hover transitions, not every frame.
   $effect.pre(() => {
-    if (hovering && intersection) {
-      ref.position.copy(intersection.point)
-    }
+    if (!hovering) return
+    untrack(() => {
+      if (intersection) {
+        ref.position.copy(intersection.point)
+      }
+    })
   })
 </script>
 

package/dist/components/internal/TeleportCursor.svelte

@@ -40,7 +40,10 @@
       if (face) {
         normalMatrix.getNormalMatrix(object.matrixWorld)
         worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-        ref.lookAt(vec3.addVectors(point, worldNormal))
+        // lookAt from the lerped position (matches PointerCursor) — using the
+        // raw hit point here causes orientation to wobble while position is
+        // still easing toward the target.
+        ref.lookAt(vec3.addVectors(ref.position, worldNormal))
       }
     },
     {

package/dist/hooks/useHandJoint.svelte.js

@@ -1,5 +1,6 @@
 import { useTask, useThrelte } from '@threlte/core';
 import { hands } from './useHand.svelte.js';
+import { isPresenting } from '../internal/state.svelte.js';
 import { toCurrentReadable } from './currentReadable.svelte.js';
 /**
  * Provides a reference to a requested hand joint, once available.
@@ -22,6 +23,6 @@ export const useHandJoint = (handedness, joint) => {
             jointSpace = undefined;
             invalidate();
         }
-    });
+    }, { running: () => isPresenting.current });
     return toCurrentReadable(() => jointSpace);
 };

package/dist/internal/setupControllers.js

@@ -9,12 +9,12 @@ export const setupControllers = (factory) => {
     const hasHands = useHandTrackingState();
     const targetRaySpaces = [xr.getController(0), xr.getController(1)];
     const indexMap = new Map();
+    const modelFactory = factory ?? new XRControllerModelFactory();
     targetRaySpaces.forEach((targetRay, index) => {
-        const model = (factory ?? new XRControllerModelFactory()).createControllerModel(targetRay);
         indexMap.set(targetRay, {
             targetRay,
             grip: xr.getControllerGrip(index),
-            model
+            model: modelFactory.createControllerModel(targetRay)
         });
     });
     onMount(() => {
@@ -25,8 +25,13 @@ export const setupControllers = (factory) => {
             controllerEvents[data.handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
-            const { model, targetRay, grip } = indexMap.get(this);
             const { data: inputSource } = event;
+            // The targetRaySpace 'connected' event fires for both controller and
+            // hand-tracking input sources. The controllers slot represents a physical
+            // controller — setupHands handles the hand-tracking side.
+            if (inputSource.hand)
+                return;
+            const { model, targetRay, grip } = indexMap.get(this);
             controllers[event.data.handedness] = {
                 inputSource,
                 targetRay,

package/dist/internal/setupHands.js

@@ -9,12 +9,12 @@ export const setupHands = (factory) => {
     const hasHands = useHandTrackingState();
     const handSpaces = [xr.getHand(0), xr.getHand(1)];
     const map = new Map();
+    const modelFactory = factory ?? new XRHandModelFactory();
     handSpaces.forEach((handSpace, index) => {
-        const model = (factory ?? new XRHandModelFactory()).createHandModel(handSpace, 'mesh');
         map.set(handSpace, {
             hand: handSpace,
             targetRay: xr.getController(index),
-            model
+            model: modelFactory.createHandModel(handSpace, 'mesh')
         });
     });
     onMount(() => {

package/dist/lib/toggleXRSession.js

@@ -15,10 +15,10 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
         return currentSession;
     if (force === 'exit' && !hasSession)
         return;
-    // Exit a session if entered
+    // Exit a session if entered. `session.current` is cleared by XR.svelte's
+    // `handleSessionEnd` when the 'end' event fires — don't duplicate that here.
     if (hasSession) {
         await currentSession.end();
-        session.current = undefined;
         return;
     }
     if (xr.current === undefined) {

package/dist/plugins/pointerControls/compute.js

@@ -5,6 +5,10 @@ export const defaultComputeFunction = (context, handContext) => {
     const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
+    // `<Controller>` attaches targetRay to the scene root so local === world;
+    // we can read `.position`/`.quaternion` directly without a matrixWorld
+    // roundtrip (which would force-recompose the matrix three.js writes from
+    // the XR pose and introduce a drift against the visible render).
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
     context.raycaster.set(targetRay.position, forward);
 };

package/dist/plugins/pointerControls/index.js

@@ -5,7 +5,6 @@ import { injectPointerControlsPlugin } from './plugin.svelte.js';
 import { setupPointerControls } from './setup.svelte.js';
 import { getControlsContext, getHandContext, setControlsContext, setHandContext, setInternalContext } from './context.js';
 import { pointerState } from '../../internal/state.svelte.js';
-let controlsCounter = 0;
 export const pointerControls = (handedness, options) => {
     if (getControlsContext() === undefined) {
         injectPointerControlsPlugin();
@@ -35,8 +34,7 @@ export const pointerControls = (handedness, options) => {
     }
     const handContext = getHandContext(handedness);
     observe.pre(() => [handContext.enabled], ([enabled]) => {
-        controlsCounter += enabled ? 1 : -1;
-        pointerState[handedness].enabled = controlsCounter > 0;
+        pointerState[handedness].enabled = enabled;
     });
     observe.pre(() => [handContext.pointerOverTarget], ([hovering]) => {
         pointerState[handedness].hovering = hovering;

package/dist/plugins/pointerControls/plugin.svelte.js

@@ -5,11 +5,6 @@ export const injectPointerControlsPlugin = () => {
     injectPlugin('threlte-pointer-controls', (args) => {
         if (!isInstanceOf(args.ref, 'Object3D'))
             return;
-        const hasEventHandlers = Object.entries(args.props).some(([key, value]) => {
-            return value !== undefined && events.includes(key);
-        });
-        if (!hasEventHandlers)
-            return;
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
         $effect.pre(() => {
             const ref = args.ref;

package/dist/plugins/pointerControls/setup.svelte.js

@@ -5,8 +5,19 @@ import { controllers } from '../../hooks/useController.svelte.js';
 import { useHand } from '../../hooks/useHand.svelte.js';
 import { useFixed } from '../../internal/useFixed.js';
 import { isPresenting, pointerIntersection } from '../../internal/state.svelte.js';
+// Hover identity must match the dedup key used in `getHits`, otherwise the ID
+// changes mid-hover (e.g. the hit's face index changes as the ray sweeps a
+// plain mesh) and the object flickers between pointerout/pointerenter every
+// frame.
 const getIntersectionId = (intersection) => {
-    return `${(intersection.eventObject || intersection.object).uuid}|${intersection.index}|${intersection.instanceId}`;
+    const target = intersection.eventObject ?? intersection.object;
+    if (intersection.instanceId !== undefined) {
+        return `${target.uuid}|${intersection.instanceId}`;
+    }
+    if (intersection.object.isPoints) {
+        return `${target.uuid}|${intersection.index}`;
+    }
+    return target.uuid;
 };
 const EPSILON = 0.0001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
@@ -29,24 +40,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         handleEvent('onpointerup', event);
     };
     const handleClick = (event) => {
-        // If a click yields no results, pass it back to the user as a miss
-        // Missed events have to come first in order to establish user-land side-effect clean up
-        if (hits.length === 0) {
-            pointerMissed(context.interactiveObjects, event);
-        }
         handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
         if (handContext.hovered.size === 0)
             return;
+        const currentIds = new Set();
+        for (const hit of intersections) {
+            currentIds.add(getIntersectionId(hit));
+        }
         const toRemove = [];
         for (const [id, hoveredObj] of handContext.hovered) {
-            // When no objects were hit or the hovered object wasn't found underneath the cursor
-            // we call pointerout and delete the object from the hovered elements map
-            if (intersections.length === 0 ||
-                !intersections.some((hit) => hit.object === hoveredObj.object &&
-                    hit.index === hoveredObj.index &&
-                    hit.instanceId === hoveredObj.instanceId)) {
+            if (!currentIds.has(id)) {
                 toRemove.push([id, hoveredObj]);
             }
         }
@@ -114,7 +119,13 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     const handleEvent = (name, event) => {
         const isPointerMove = name === 'onpointermove';
         const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
-        // Take care of unhover
+        // Fire pointermissed for objects that were not under the pointer at pointerdown.
+        // Must come before the dispatch loop so user-land cleanup runs first.
+        if (isClickEvent) {
+            pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
+        }
+        // Update hover state before dispatch so that pointerout/pointerleave fire
+        // before pointerover/pointerenter on newly hit objects.
         if (isPointerMove)
             cancelPointer(hits);
         let stopped = false;
@@ -127,6 +138,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 stopped,
                 ...hit,
                 intersections: hits,
+                handedness,
                 stopPropagation() {
                     stopped = true;
                     intersectionEvent.stopped = true;
@@ -166,15 +178,11 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 // Call pointer move
                 events.onpointermove?.(intersectionEvent);
             }
-            else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                events[name] !== undefined) {
-                // Missed events have to come first
-                pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
-                // Call the event
-                events[name]?.(intersectionEvent);
-            }
-            else if (isClickEvent && handContext.initialHits.includes(hit.eventObject)) {
-                pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
+            else if (events[name] !== undefined) {
+                // All other events
+                if (!isClickEvent || handContext.initialHits.includes(hit.eventObject)) {
+                    events[name]?.(intersectionEvent);
+                }
             }
             if (stopped)
                 break dispatchEvents;
@@ -194,42 +202,28 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         autoStart: false
     });
     observe.pre(() => [controller, handContext.enabled], ([controller, $enabled]) => {
-        if (controller === undefined)
+        if (controller === undefined || !$enabled)
             return;
-        const removeHandlers = () => {
+        controller.targetRay.addEventListener('selectstart', handlePointerDown);
+        controller.targetRay.addEventListener('selectend', handlePointerUp);
+        controller.targetRay.addEventListener('select', handleClick);
+        return () => {
             controller.targetRay.removeEventListener('selectstart', handlePointerDown);
             controller.targetRay.removeEventListener('selectend', handlePointerUp);
             controller.targetRay.removeEventListener('select', handleClick);
         };
-        if ($enabled) {
-            controller.targetRay.addEventListener('selectstart', handlePointerDown);
-            controller.targetRay.addEventListener('selectend', handlePointerUp);
-            controller.targetRay.addEventListener('select', handleClick);
-            return removeHandlers;
-        }
-        else {
-            removeHandlers();
-            return;
-        }
     });
     observe.pre(() => [hand, handContext.enabled], ([input, enabled]) => {
-        if (input === undefined)
+        if (input === undefined || !enabled)
             return;
-        const removeHandlers = () => {
+        input.hand.addEventListener('pinchstart', handlePointerDown);
+        input.hand.addEventListener('pinchend', handlePointerUp);
+        input.hand.addEventListener('pinchend', handleClick);
+        return () => {
             input.hand.removeEventListener('pinchstart', handlePointerDown);
             input.hand.removeEventListener('pinchend', handlePointerUp);
             input.hand.removeEventListener('pinchend', handleClick);
         };
-        if (enabled) {
-            input.hand.addEventListener('pinchstart', handlePointerDown);
-            input.hand.addEventListener('pinchend', handlePointerUp);
-            input.hand.addEventListener('pinchend', handleClick);
-            return removeHandlers;
-        }
-        else {
-            removeHandlers();
-            return;
-        }
     });
     observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
         if (isPresenting && $enabled) {

package/dist/plugins/pointerControls/types.d.ts

@@ -13,6 +13,8 @@ export interface IntersectionEvent extends Intersection {
     eventObject: Object3D;
     /** An array of intersections */
     intersections: Intersection[];
+    /** Which hand dispatched this event. Each controller/hand fires enter/leave/etc. independently. */
+    handedness: 'left' | 'right';
     /** Normalized event coordinates */
     pointer: Vector3;
     /** Delta between first click and this event */

package/dist/plugins/pointerControls/types.js

@@ -7,5 +7,6 @@ export const events = [
     'onpointerout',
     'onpointerenter',
     'onpointerleave',
-    'onpointermove'
+    'onpointermove',
+    'onpointermissed'
 ];

package/dist/plugins/teleportControls/compute.js

@@ -5,6 +5,10 @@ export const defaultComputeFunction = (context, handContext) => {
     const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
+    // `<Controller>` attaches targetRay to the scene root so local === world;
+    // we can read `.position`/`.quaternion` directly without a matrixWorld
+    // roundtrip (which would force-recompose the matrix three.js writes from
+    // the XR pose and introduce a drift against the visible render).
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
     context.raycaster.set(targetRay.position, forward);
 };

package/dist/plugins/teleportControls/index.js

@@ -4,7 +4,6 @@ import { injectTeleportControlsPlugin } from './plugin.svelte.js';
 import { setHandContext } from './context.js';
 import { setupTeleportControls } from './setup.svelte.js';
 import { teleportState } from '../../internal/state.svelte.js';
-let controlsCounter = 0;
 export const teleportControls = (handedness, options) => {
     if (useTeleportControls() === undefined) {
         injectTeleportControlsPlugin();
@@ -13,7 +12,6 @@ export const teleportControls = (handedness, options) => {
     const context = useTeleportControls();
     if (getHandContext(handedness) === undefined) {
         const enabled = options?.enabled ?? true;
-        controlsCounter += enabled ? 1 : -1;
         const ctx = {
             hand: handedness,
             active: currentWritable(false),
@@ -25,8 +23,7 @@ export const teleportControls = (handedness, options) => {
     }
     const handContext = getHandContext(handedness);
     observe.pre(() => [handContext.enabled], ([enabled]) => {
-        controlsCounter += enabled ? 1 : -1;
-        teleportState[handedness].enabled = controlsCounter > 0;
+        teleportState[handedness].enabled = enabled;
     });
     observe.pre(() => [handContext.active], ([hovering]) => {
         teleportState[handedness].hovering = hovering;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
@@ -28,7 +28,8 @@
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.5.9"
+    "@threlte/core": "8.5.9",
+    "@threlte/extras": "9.14.9"
   },
   "peerDependencies": {
     "svelte": ">=5",