@threlte/xr 1.5.3 → 1.5.4

package/dist/components/Controller.svelte

@@ -75,7 +75,8 @@
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
-    controllerEvents[handedness] = {
+    const key = handedness
+    controllerEvents[key] = {
       onconnected,
       ondisconnected,
       onselect,
@@ -87,7 +88,7 @@
     }
 
     return () => {
-      controllerEvents[handedness] = undefined
+      controllerEvents[key] = undefined
     }
   })
 

package/dist/components/Hand.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Group } from 'three'
-  import { T, useThrelte, useTask } from '@threlte/core'
+  import { T, useThrelte, useTask, useStage } from '@threlte/core'
   import type { XRHandEvents } from '../types.js'
   import { isHandTracking, handEvents } from '../internal/state.svelte.js'
   import { hands } from '../hooks/useHand.svelte.js'
@@ -45,12 +45,13 @@
     wrist
   }: Props = $props()
 
-  const { scene, renderer, scheduler, renderStage } = useThrelte()
+  const { scene, renderer, renderStage } = useThrelte()
 
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
-    handEvents[handedness] = {
+    const key = handedness
+    handEvents[key] = {
       onconnected,
       ondisconnected,
       onpinchend,
@@ -58,10 +59,12 @@
     }
 
     return () => {
-      handEvents[handedness] = undefined
+      handEvents[key] = undefined
     }
   })
 
+  const stage = useStage(Symbol('xr-hand-stage'), { before: renderStage })
+
   const group = new Group()
 
   /**
@@ -90,7 +93,7 @@
       group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w)
     },
     {
-      stage: scheduler.createStage(Symbol('xr-hand-stage'), { before: renderStage }),
+      stage,
       running: () =>
         isHandTracking.current &&
         (wrist !== undefined || children !== undefined) &&

package/dist/components/XR.svelte

@@ -21,7 +21,7 @@ This should be placed within a Threlte `<Canvas />`.
   import type { EventListener, WebXRManager, Event as ThreeEvent } from 'three'
   import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js'
   import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js'
-  import type { Snippet } from 'svelte'
+  import { untrack, type Snippet } from 'svelte'
   import { useThrelte } from '@threlte/core'
   import {
     isHandTracking,
@@ -78,6 +78,9 @@ This should be placed within a Threlte `<Canvas />`.
 
     /** Called when available inputsources change */
     oninputsourceschange?: (event: XRSessionEvent) => void
+
+    /** Called when the session frame rate changes. */
+    onframeratechange?: (event: XRSessionEvent) => void
   }
 
   let {
@@ -88,6 +91,7 @@ This should be placed within a Threlte `<Canvas />`.
     onsessionend,
     onvisibilitychange,
     oninputsourceschange,
+    onframeratechange,
     fallback,
     children,
     handFactory,
@@ -96,8 +100,6 @@ This should be placed within a Threlte `<Canvas />`.
 
   const { renderer, renderMode } = useThrelte()
 
-  let originalRenderMode = $renderMode
-
   setupRaf()
   setupHeadset()
   setupControllers(controllerFactory)
@@ -105,12 +107,19 @@ This should be placed within a Threlte `<Canvas />`.
 
   const handleSessionStart: EventListener<object, 'sessionstart', WebXRManager> = (event) => {
     isPresenting.current = true
+    const currentSession = renderer.xr.getSession()
+    if (currentSession !== null) {
+      isHandTracking.current = Array.from(currentSession.inputSources).some(
+        (source) => source.hand !== undefined
+      )
+    }
     onsessionstart?.(event)
   }
 
   const handleSessionEnd = (event: XRSessionEvent) => {
     onsessionend?.(event)
     isPresenting.current = false
+    isHandTracking.current = false
     session.current = undefined
   }
 
@@ -124,7 +133,7 @@ This should be placed within a Threlte `<Canvas />`.
   }
 
   const handleFramerateChange = (event: XRSessionEvent) => {
-    onvisibilitychange?.(event)
+    onframeratechange?.(event)
   }
 
   $effect(() => {
@@ -148,11 +157,15 @@ This should be placed within a Threlte `<Canvas />`.
   })
 
   $effect.pre(() => {
-    if (isPresenting.current) {
-      originalRenderMode = renderMode.current
-      renderMode.set('always')
-    } else {
-      renderMode.set(originalRenderMode)
+    if (!isPresenting.current) return
+
+    // Capture the mode from before we forced 'always' so it survives
+    // any manual renderMode changes made during the session.
+    const saved = untrack(() => renderMode.current)
+    renderMode.set('always')
+
+    return () => {
+      renderMode.set(saved)
     }
   })
 

package/dist/components/XR.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { WebXRManager, Event as ThreeEvent } from 'three';
 import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     /**
      * Enables foveated rendering. Default is `1`, the three.js default.
@@ -36,6 +36,8 @@ interface Props {
     onvisibilitychange?: (event: XRSessionEvent) => void;
     /** Called when available inputsources change */
     oninputsourceschange?: (event: XRSessionEvent) => void;
+    /** Called when the session frame rate changes. */
+    onframeratechange?: (event: XRSessionEvent) => void;
 }
 /**
  * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.

package/dist/hooks/useHandJoint.svelte.js

@@ -10,11 +10,18 @@ export const useHandJoint = (handedness, joint) => {
     let jointSpace = $state.raw();
     useTask(() => {
         const space = xrhand?.hand.joints[joint];
-        // The joint radius is a good indicator that the joint is ready
+        // The joint radius is a good indicator that the joint is ready.
+        // Re-check each frame so we pick up reconnects and clear on disconnect.
         if (space?.jointRadius !== undefined) {
-            jointSpace = space;
+            if (jointSpace !== space) {
+                jointSpace = space;
+                invalidate();
+            }
+        }
+        else if (jointSpace !== undefined) {
+            jointSpace = undefined;
             invalidate();
         }
-    }, { running: () => jointSpace === undefined });
+    });
     return toCurrentReadable(() => jointSpace);
 };

package/dist/internal/setupHands.js

@@ -42,7 +42,10 @@ export const setupHands = (factory) => {
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            hands[event.data.handedness] = undefined;
+            const { handedness } = event.data;
+            if (handedness === 'left' || handedness === 'right') {
+                hands[handedness] = undefined;
+            }
         };
         for (const handSpace of handSpaces) {
             handSpace.addEventListener('connected', handleConnected);

package/dist/internal/setupHeadset.svelte.js

@@ -1,11 +1,11 @@
 import { Group } from 'three';
-import { useThrelte, useTask } from '@threlte/core';
+import { useThrelte, useTask, useStage } from '@threlte/core';
 import { isPresenting } from './state.svelte.js';
 export const headset = new Group();
 export const setupHeadset = () => {
-    const { renderer, camera, scheduler, renderStage } = useThrelte();
+    const { renderer, camera, renderStage } = useThrelte();
+    const stage = useStage(Symbol('xr-headset-stage'), { before: renderStage });
     const { xr } = renderer;
-    const stage = scheduler.createStage(Symbol('xr-headset-stage'), { before: renderStage });
     useTask(() => {
         const space = xr.getReferenceSpace();
         if (space === null)

package/dist/plugins/pointerControls/hook.js

@@ -15,6 +15,8 @@ export const usePointerControls = () => {
     };
     const removeInteractiveObject = (object) => {
         const index = context.interactiveObjects.indexOf(object);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         dispatchers.delete(object);
     };

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

@@ -1,4 +1,4 @@
-import { injectPlugin, isInstanceOf, observe } from '@threlte/core';
+import { injectPlugin, isInstanceOf } from '@threlte/core';
 import { usePointerControls } from './hook.js';
 import { events } from './types.js';
 export const injectPointerControlsPlugin = () => {
@@ -22,10 +22,6 @@ export const injectPointerControlsPlugin = () => {
                 removeInteractiveObject(ref);
             };
         });
-        observe.pre(() => [args.ref], ([ref]) => {
-            addInteractiveObject(ref, args.props);
-            return () => removeInteractiveObject(ref);
-        });
         return {
             pluginProps: events
         };

package/dist/plugins/teleportControls/context.js

@@ -27,6 +27,8 @@ export const createTeleportContext = (compute) => {
     };
     const removeSurface = (mesh) => {
         const index = context.interactiveObjects.indexOf(mesh);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         context.surfaces.delete(mesh.uuid);
         context.dispatchers.delete(mesh);
@@ -41,6 +43,8 @@ export const createTeleportContext = (compute) => {
     };
     const removeBlocker = (mesh) => {
         const index = context.interactiveObjects.indexOf(mesh);
+        if (index === -1)
+            return;
         context.interactiveObjects.splice(index, 1);
         context.blockers.delete(mesh.uuid);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "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,7 @@
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.5.8"
+    "@threlte/core": "8.5.9"
   },
   "peerDependencies": {
     "svelte": ">=5",