@threlte/xr 1.0.7 → 1.1.0

package/dist/hooks/useHandJoint.svelte.js

@@ -0,0 +1,21 @@
+import { useTask, useThrelte } from '@threlte/core';
+import { hands } from './useHand.svelte';
+import { toCurrentReadable } from './currentReadable.svelte';
+/**
+ * Provides a reference to a requested hand joint, once available.
+ */
+export const useHandJoint = (handedness, joint) => {
+    const { invalidate } = useThrelte();
+    const xrhand = $derived(hands[handedness]);
+    let jointSpace = $state.raw();
+    const { stop } = useTask(() => {
+        const space = xrhand?.hand.joints[joint];
+        // The joint radius is a good indicator that the joint is ready
+        if (space?.jointRadius !== undefined) {
+            jointSpace = space;
+            invalidate();
+            stop();
+        }
+    }, { autoInvalidate: false });
+    return toCurrentReadable(() => jointSpace);
+};

package/dist/hooks/useHeadset.js

@@ -1,4 +1,4 @@
-import { headset } from '../internal/setupHeadset';
+import { headset } from '../internal/setupHeadset.svelte';
 export const useHeadset = () => {
     return headset;
 };

package/dist/hooks/useHitTest.svelte.js

@@ -0,0 +1,67 @@
+import { Matrix4 } from 'three';
+import { useThrelte, useTask } from '@threlte/core';
+import { controllers } from './useController.svelte';
+import { isPresenting, session } from '../internal/state.svelte';
+/**
+ * Use this hook to perform a hit test per frame in an AR environment.
+ *
+ * ```ts
+ * useHitTest((hitMatrix, hit) => {
+ *   mesh.matrix.copy(hitMatrix)
+ * }, {
+ *   source: 'viewer' | 'leftInput' | 'rightInput' // Default 'viewer'
+ * })
+ * ```
+ */
+export const useHitTest = (hitTestCallback, options = {}) => {
+    const source = options.source ?? 'viewer';
+    const { xr } = useThrelte().renderer;
+    const hitMatrix = new Matrix4();
+    let hitTestSource = $state.raw();
+    const getHitTestSource = async (space) => {
+        if (space === undefined) {
+            return;
+        }
+        hitTestSource = await session.current?.requestHitTestSource?.({ space });
+    };
+    if (source === 'viewer') {
+        $effect.pre(() => {
+            session.current?.requestReferenceSpace('viewer').then((space) => {
+                getHitTestSource(space);
+            });
+        });
+    }
+    else {
+        const controller = $derived(controllers[source === 'leftInput' ? 'left' : 'right']);
+        $effect.pre(() => {
+            getHitTestSource(controller?.inputSource.targetRaySpace);
+        });
+    }
+    const { start, stop } = useTask(() => {
+        const referenceSpace = xr.getReferenceSpace();
+        if (referenceSpace === null || hitTestSource === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
+        const [hit] = xr.getFrame().getHitTestResults(hitTestSource);
+        const pose = hit?.getPose(referenceSpace);
+        if (pose === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
+        hitMatrix.fromArray(pose.transform.matrix);
+        hitTestCallback(hitMatrix, hit);
+    }, { autoStart: false });
+    $effect.pre(() => {
+        if (!isPresenting.current) {
+            stop();
+            return;
+        }
+        if (hitTestSource === undefined) {
+            stop();
+            // Execute callback one last time to inform consumers of no hits.
+            hitTestCallback(hitMatrix, undefined);
+        }
+        else {
+            start();
+        }
+    });
+};

package/dist/hooks/useTeleport.js

@@ -19,12 +19,11 @@ const offset = { x: 0, y: 0, z: 0 };
  */
 export const useTeleport = () => {
     const { xr } = useThrelte().renderer;
-    let space = xr.getReferenceSpace();
     /**
      * Teleports a player from the world origin to a position and optional orientation.
      */
     return (position, orientation = quaternion) => {
-        space ??= xr.getReferenceSpace();
+        const space = xr.getReferenceSpace();
         if (space === null)
             return;
         if (Array.isArray(position)) {

package/dist/hooks/useXR.d.ts

@@ -1,12 +1,11 @@
-import type { CurrentWritable } from '@threlte/core';
+import type { WebXRManager } from 'three';
+import { type CurrentReadable } from './currentReadable.svelte';
 /**
  * Provides access to context related to `<XR />`.
  */
 export declare const useXR: () => {
-    isPresenting: CurrentWritable<boolean>;
-    isHandTracking: CurrentWritable<boolean>;
-    session: CurrentWritable<XRSession | undefined>;
-    xrFrame: {
-        current: XRFrame;
-    };
+    isPresenting: CurrentReadable<boolean>;
+    isHandTracking: CurrentReadable<boolean>;
+    session: CurrentReadable<XRSession | undefined>;
+    xr: CurrentReadable<WebXRManager | undefined>;
 };

package/dist/hooks/useXR.js

@@ -1,15 +1,13 @@
-import { isPresenting, isHandTracking, session, xr } from '../internal/stores';
-const stores = {
-    isPresenting,
-    isHandTracking,
-    session,
-    xrFrame: {
-        get current() {
-            return xr.current.getFrame();
-        }
-    }
-};
+import { isPresenting, isHandTracking, session, xr } from '../internal/state.svelte';
+import { toCurrentReadable } from './currentReadable.svelte';
 /**
  * Provides access to context related to `<XR />`.
  */
-export const useXR = () => stores;
+export const useXR = () => {
+    return {
+        isPresenting: toCurrentReadable(() => isPresenting.current),
+        isHandTracking: toCurrentReadable(() => isHandTracking.current),
+        session: toCurrentReadable(() => session.current),
+        xr: toCurrentReadable(() => xr.current)
+    };
+};

package/dist/index.d.ts

@@ -10,11 +10,11 @@ export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
 export { pointerControls } from './plugins/pointerControls';
 export { teleportControls } from './plugins/teleportControls';
-export { useController } from './hooks/useController';
-export { useHand } from './hooks/useHand';
-export { useHandJoint } from './hooks/useHandJoint';
+export { useController } from './hooks/useController.svelte';
+export { useHand } from './hooks/useHand.svelte';
+export { useHandJoint } from './hooks/useHandJoint.svelte';
 export { useHeadset } from './hooks/useHeadset';
-export { useHitTest } from './hooks/useHitTest';
+export { useHitTest } from './hooks/useHitTest.svelte';
 export { useTeleport } from './hooks/useTeleport';
 export { useXR } from './hooks/useXR';
 export type { XRSessionEventType, XRControllerEventType, XRHandEventType, XRSessionEvent, XRControllerEvent, XRController, XRHand, XRHandEvent } from './types';

package/dist/index.js

@@ -14,10 +14,10 @@ export { handJoints } from './lib/handJoints';
 export { pointerControls } from './plugins/pointerControls';
 export { teleportControls } from './plugins/teleportControls';
 // Hooks
-export { useController } from './hooks/useController';
-export { useHand } from './hooks/useHand';
-export { useHandJoint } from './hooks/useHandJoint';
+export { useController } from './hooks/useController.svelte';
+export { useHand } from './hooks/useHand.svelte';
+export { useHandJoint } from './hooks/useHandJoint.svelte';
 export { useHeadset } from './hooks/useHeadset';
-export { useHitTest } from './hooks/useHitTest';
+export { useHitTest } from './hooks/useHitTest.svelte';
 export { useTeleport } from './hooks/useTeleport';
 export { useXR } from './hooks/useXR';

package/dist/internal/raf.d.ts

@@ -0,0 +1 @@
+export { raf } from 'svelte/internal/client';

package/dist/internal/raf.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line svelte/no-svelte-internal
+export { raf } from 'svelte/internal/client';

package/dist/internal/setupControllers.js

@@ -2,16 +2,15 @@ import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerM
 import { useThrelte } from '@threlte/core';
 import { onMount } from 'svelte';
 import { useHandTrackingState } from './useHandTrackingState';
-import { gaze, left, right } from '../hooks/useController';
-import { controllerEvents } from './stores';
+import { controllers } from '../hooks/useController.svelte';
+import { controllerEvents } from './state.svelte';
 export const setupControllers = () => {
     const factory = new XRControllerModelFactory();
-    const stores = { left, right, none: gaze };
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
-    const controllers = [xr.getController(0), xr.getController(1)];
+    const targetRaySpaces = [xr.getController(0), xr.getController(1)];
     const indexMap = new Map();
-    controllers.forEach((targetRay, index) => {
+    targetRaySpaces.forEach((targetRay, index) => {
         indexMap.set(targetRay, {
             targetRay,
             grip: xr.getControllerGrip(index),
@@ -23,24 +22,24 @@ export const setupControllers = () => {
             if (hasHands())
                 return;
             const { data } = event;
-            controllerEvents[data.handedness]?.current?.[`on${event.type}`]?.(event);
+            controllerEvents[data.handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay, grip } = indexMap.get(this);
             const { data: inputSource } = event;
-            stores[event.data.handedness].set({
+            controllers[event.data.handedness] = {
                 inputSource,
                 targetRay,
                 grip,
                 model
-            });
+            };
             dispatch(event);
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            stores[event.data.handedness].set(undefined);
+            controllers[event.data.handedness] = undefined;
         };
-        for (const targetRay of controllers) {
+        for (const targetRay of targetRaySpaces) {
             targetRay.addEventListener('connected', handleConnected);
             targetRay.addEventListener('disconnected', handleDisconnected);
             targetRay.addEventListener('select', dispatch);
@@ -51,7 +50,7 @@ export const setupControllers = () => {
             targetRay.addEventListener('squeezeend', dispatch);
         }
         return () => {
-            for (const targetRay of controllers) {
+            for (const targetRay of targetRaySpaces) {
                 targetRay.removeEventListener('connected', handleConnected);
                 targetRay.removeEventListener('disconnected', handleDisconnected);
                 targetRay.removeEventListener('select', dispatch);
@@ -61,9 +60,9 @@ export const setupControllers = () => {
                 targetRay.removeEventListener('squeezestart', dispatch);
                 targetRay.removeEventListener('squeezeend', dispatch);
             }
-            stores.left.set(undefined);
-            stores.right.set(undefined);
-            stores.none.set(undefined);
+            controllers.left = undefined;
+            controllers.right = undefined;
+            controllers.none = undefined;
         };
     });
 };

package/dist/internal/setupHands.js

@@ -1,12 +1,11 @@
 import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 import { useThrelte } from '@threlte/core';
 import { onMount } from 'svelte';
-import { left, right } from '../hooks/useHand';
+import { hands } from '../hooks/useHand.svelte';
 import { useHandTrackingState } from './useHandTrackingState';
-import { handEvents } from './stores';
+import { handEvents } from './state.svelte';
 export const setupHands = () => {
     const factory = new XRHandModelFactory();
-    const stores = { left, right };
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
     const handSpaces = [xr.getHand(0), xr.getHand(1)];
@@ -24,23 +23,23 @@ export const setupHands = () => {
                 return;
             const handEvent = event;
             const handedness = 'handedness' in handEvent ? handEvent.handedness : handEvent.data.handedness;
-            handEvents[handedness]?.current?.[`on${event.type}`]?.(event);
+            handEvents[handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay } = map.get(this);
             const { data } = event;
             const { handedness, hand: inputSource } = data;
-            stores[handedness].set({
+            hands[handedness] = {
                 hand: this,
                 model,
                 inputSource,
                 targetRay
-            });
+            };
             dispatch(event);
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            stores[event.data.handedness].set(undefined);
+            hands[event.data.handedness] = undefined;
         };
         for (const handSpace of handSpaces) {
             handSpace.addEventListener('connected', handleConnected);
@@ -55,8 +54,8 @@ export const setupHands = () => {
                 handSpace.removeEventListener('pinchstart', dispatch);
                 handSpace.removeEventListener('pinchend', dispatch);
             }
-            stores.left.set(undefined);
-            stores.right.set(undefined);
+            hands.left = undefined;
+            hands.right = undefined;
         };
     });
 };

package/dist/internal/{setupHeadset.js → setupHeadset.svelte.js}

@@ -1,6 +1,6 @@
 import { Group } from 'three';
-import { useThrelte, useTask, watch } from '@threlte/core';
-import { useXR } from '../hooks/useXR';
+import { useThrelte, useTask } from '@threlte/core';
+import { isPresenting } from './state.svelte';
 export const headset = new Group();
 export const setupHeadset = () => {
     const { renderer, camera, scheduler, renderStage } = useThrelte();
@@ -16,8 +16,8 @@ export const setupHeadset = () => {
         if (pose === undefined || pose === null)
             return;
         const { position, orientation } = pose.transform;
-        headset.position.set(position.x, position.y, position.z);
-        headset.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+        headset.position.copy(position);
+        headset.quaternion.copy(orientation);
     }, {
         autoStart: false,
         autoInvalidate: false,
@@ -31,8 +31,8 @@ export const setupHeadset = () => {
         autoInvalidate: false,
         stage
     });
-    watch(useXR().isPresenting, ($isPresenting) => {
-        if ($isPresenting) {
+    $effect.pre(() => {
+        if (isPresenting.current) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();
         }

package/dist/internal/setupRaf.svelte.js

@@ -0,0 +1,17 @@
+import { session } from './state.svelte';
+import { raf } from './raf';
+export const setupRaf = () => {
+    if (typeof window === 'undefined')
+        return;
+    $effect.pre(() => {
+        const currentSession = session.current;
+        if (currentSession === undefined) {
+            return;
+        }
+        const originalTick = raf.tick;
+        raf.tick = (fn) => currentSession.requestAnimationFrame(fn);
+        return () => {
+            raf.tick = originalTick;
+        };
+    });
+};

package/dist/internal/state.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { WebXRManager, Intersection } from 'three';
+import type { XRControllerEvents, XRHandEvents } from '../types';
+interface ControllerEvents {
+    left?: XRControllerEvents;
+    right?: XRControllerEvents;
+}
+interface HandEvents {
+    left?: XRHandEvents;
+    right?: XRHandEvents;
+}
+declare class Presenting {
+    current: boolean;
+}
+declare class IsHandTracking {
+    current: boolean;
+}
+declare class Session {
+    current: XRSession | undefined;
+}
+declare class ReferenceSpaceType {
+    current: XRReferenceSpaceType | undefined;
+}
+declare class XR {
+    current: WebXRManager | undefined;
+}
+declare class PointerState {
+    enabled: boolean;
+    hovering: boolean;
+}
+declare class IntersectionState {
+    left: Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined;
+    right: Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined;
+}
+export declare const isPresenting: Presenting;
+export declare const isHandTracking: IsHandTracking;
+export declare const session: Session;
+export declare const referenceSpaceType: ReferenceSpaceType;
+export declare const xr: XR;
+export declare const controllerEvents: ControllerEvents;
+export declare const handEvents: HandEvents;
+export declare const teleportState: {
+    left: PointerState;
+    right: PointerState;
+};
+export declare const pointerState: {
+    left: PointerState;
+    right: PointerState;
+};
+export declare const teleportIntersection: IntersectionState;
+export declare const pointerIntersection: IntersectionState;
+export {};

package/dist/internal/state.svelte.js

@@ -0,0 +1,40 @@
+class Presenting {
+    current = $state(false);
+}
+class IsHandTracking {
+    current = $state(false);
+}
+class Session {
+    current = $state.raw();
+}
+class ReferenceSpaceType {
+    current = $state.raw();
+}
+class XR {
+    current = $state.raw();
+}
+class PointerState {
+    enabled = $state(false);
+    hovering = $state(false);
+}
+class IntersectionState {
+    left = $state.raw();
+    right = $state.raw();
+}
+export const isPresenting = new Presenting();
+export const isHandTracking = new IsHandTracking();
+export const session = new Session();
+export const referenceSpaceType = new ReferenceSpaceType();
+export const xr = new XR();
+export const controllerEvents = {};
+export const handEvents = {};
+export const teleportState = {
+    left: new PointerState(),
+    right: new PointerState()
+};
+export const pointerState = {
+    left: new PointerState(),
+    right: new PointerState()
+};
+export const teleportIntersection = new IntersectionState();
+export const pointerIntersection = new IntersectionState();

package/dist/internal/useHandTrackingState.js

@@ -4,14 +4,17 @@ import { useThrelte } from '@threlte/core';
  * connection or disconnection event. This is the way to do that.
  */
 export const useHandTrackingState = () => {
-    const { xr } = useThrelte().renderer;
+    const { renderer } = useThrelte();
     return () => {
-        let handTracking = false;
-        xr.getSession()?.inputSources?.forEach((value) => {
-            if (value.hand) {
-                handTracking = true;
+        const sources = renderer.xr.getSession()?.inputSources;
+        if (sources === undefined) {
+            return false;
+        }
+        for (const source of sources) {
+            if (source.hand !== undefined) {
+                return true;
             }
-        });
-        return handTracking;
+        }
+        return false;
     };
 };

package/dist/lib/getXRSessionOptions.d.ts

@@ -1 +1 @@
-export declare const getXRSessionOptions: (referenceSpaceType: XRReferenceSpaceType | undefined, sessionInit: XRSessionInit | undefined) => XRSessionInit | undefined;
+export declare const getXRSessionOptions: (referenceSpaceType?: XRReferenceSpaceType, sessionInit?: XRSessionInit) => XRSessionInit | undefined;

package/dist/lib/toggleXRSession.d.ts

@@ -6,8 +6,8 @@
  * @param force Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways
  * @returns
  */
-export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?: (XRSessionInit & {
+export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?: XRSessionInit & {
     domOverlay?: {
         root: HTMLElement;
-    } | undefined;
-}) | undefined, force?: "enter" | "exit") => Promise<XRSession | undefined>;
+    };
+}, force?: "enter" | "exit") => Promise<XRSession | undefined>;

package/dist/lib/toggleXRSession.js

@@ -1,4 +1,4 @@
-import { session, referenceSpaceType, xr } from '../internal/stores';
+import { session, referenceSpaceType, xr } from '../internal/state.svelte';
 import { getXRSessionOptions } from './getXRSessionOptions';
 /**
  * Starts / ends an XR session.
@@ -18,7 +18,7 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
     // Exit a session if entered
     if (hasSession) {
         await currentSession.end();
-        session.set(undefined);
+        session.current = undefined;
         return;
     }
     if (xr.current === undefined) {
@@ -28,6 +28,6 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
     const options = getXRSessionOptions(referenceSpaceType.current, sessionInit);
     const nextSession = await navigator.xr.requestSession(sessionMode, options);
     await xr.current.setSession(nextSession);
-    session.set(nextSession);
+    session.current = nextSession;
     return nextSession;
 };

package/dist/plugins/pointerControls/compute.js

@@ -1,12 +1,8 @@
 import { Vector3 } from 'three';
-import { useController } from '../../hooks/useController';
-const controllers = {
-    left: useController('left'),
-    right: useController('right')
-};
+import { controllers } from '../../hooks/useController.svelte';
 const forward = new Vector3();
 export const defaultComputeFunction = (context, handContext) => {
-    const targetRay = controllers[handContext.hand].current?.targetRay;
+    const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);

package/dist/plugins/pointerControls/index.js

@@ -2,9 +2,9 @@ import { Raycaster, Vector3 } from 'three';
 import { currentWritable, watch } from '@threlte/core';
 import { defaultComputeFunction } from './compute';
 import { injectPointerControlsPlugin } from './plugin.svelte';
-import { setupPointerControls } from './setup';
+import { setupPointerControls } from './setup.svelte';
 import { getControlsContext, getHandContext, setControlsContext, setHandContext, setInternalContext } from './context';
-import { pointerState } from '../../internal/stores';
+import { pointerState } from '../../internal/state.svelte';
 let controlsCounter = 0;
 export const pointerControls = (handedness, options) => {
     if (getControlsContext() === undefined) {
@@ -36,16 +36,10 @@ export const pointerControls = (handedness, options) => {
     const handContext = getHandContext(handedness);
     watch(handContext.enabled, (enabled) => {
         controlsCounter += enabled ? 1 : -1;
-        pointerState.update((value) => {
-            value[handedness].enabled = controlsCounter > 0;
-            return value;
-        });
+        pointerState[handedness].enabled = controlsCounter > 0;
     });
     watch(handContext.pointerOverTarget, (hovering) => {
-        pointerState.update((value) => {
-            value[handedness].hovering = hovering;
-            return value;
-        });
+        pointerState[handedness].hovering = hovering;
     });
     return {
         enabled: handContext.enabled,