@threlte/xr 1.0.8 → 1.1.0

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,

package/dist/plugins/pointerControls/{setup.js → setup.svelte.js}

@@ -1,18 +1,17 @@
 import { Vector3 } from 'three';
-import { watch } from '@threlte/core';
+import { observe, watch } from '@threlte/core';
 import { getInternalContext } from './context';
-import { useController } from '../../hooks/useController';
-import { useHand } from '../../hooks/useHand';
-import { useXR } from '../../hooks/useXR';
+import { controllers } from '../../hooks/useController.svelte';
+import { useHand } from '../../hooks/useHand.svelte';
 import { useFixed } from '../../internal/useFixed';
-import { pointerIntersection } from '../../internal/stores';
+import { isPresenting, pointerIntersection } from '../../internal/state.svelte';
 const getIntersectionId = (intersection) => {
     return `${(intersection.eventObject || intersection.object).uuid}/${intersection.index}${intersection.instanceId ?? ''}`;
 };
 const EPSILON = 0.0001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
     const handedness = handContext.hand;
-    const controller = useController(handedness);
+    const controller = $derived(controllers[handedness]);
     const hand = useHand(handedness);
     const { dispatchers } = getInternalContext();
     let hits = [];
@@ -64,7 +63,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         const intersections = [];
         const hits = context.raycaster.intersectObjects(context.interactiveObjects, true);
         const filtered = context.filter === undefined ? hits : context.filter(hits, context, handContext);
-        pointerIntersection[handedness].set(filtered[0]);
+        pointerIntersection[handedness] = filtered[0];
         // Bubble up the events, find the event source (eventObject)
         for (const hit of filtered) {
             let eventObject = hit.object;
@@ -158,7 +157,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     const { start, stop } = useFixed(() => {
         hits = processHits();
-        const targetRay = controller.current?.targetRay;
+        const targetRay = controller?.targetRay;
         if (targetRay === undefined)
             return;
         if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
@@ -169,18 +168,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         fixedStep,
         autoStart: false
     });
-    watch([controller, handContext.enabled], ([input, enabled]) => {
-        if (input === undefined)
+    observe.pre(() => [controller, handContext.enabled], ([controller, $enabled]) => {
+        if (controller === undefined)
             return;
         const removeHandlers = () => {
-            input.targetRay.removeEventListener('selectstart', handlePointerDown);
-            input.targetRay.removeEventListener('selectend', handlePointerUp);
-            input.targetRay.removeEventListener('select', handleClick);
+            controller.targetRay.removeEventListener('selectstart', handlePointerDown);
+            controller.targetRay.removeEventListener('selectend', handlePointerUp);
+            controller.targetRay.removeEventListener('select', handleClick);
         };
-        if (enabled) {
-            input.targetRay.addEventListener('selectstart', handlePointerDown);
-            input.targetRay.addEventListener('selectend', handlePointerUp);
-            input.targetRay.addEventListener('select', handleClick);
+        if ($enabled) {
+            controller.targetRay.addEventListener('selectstart', handlePointerDown);
+            controller.targetRay.addEventListener('selectend', handlePointerUp);
+            controller.targetRay.addEventListener('select', handleClick);
             return removeHandlers;
         }
         else {
@@ -207,8 +206,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         }
     });
-    watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
-        if (isPresenting && enabled) {
+    observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
+        if (isPresenting && $enabled) {
             start();
         }
         else {

package/dist/plugins/teleportControls/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/teleportControls/index.js

@@ -2,8 +2,8 @@ import { currentWritable, watch } from '@threlte/core';
 import { createTeleportContext, useTeleportControls, getHandContext } from './context';
 import { injectTeleportControlsPlugin } from './plugin.svelte';
 import { setHandContext } from './context';
-import { setupTeleportControls } from './setup';
-import { teleportState } from '../../internal/stores';
+import { setupTeleportControls } from './setup.svelte';
+import { teleportState } from '../../internal/state.svelte';
 let controlsCounter = 0;
 export const teleportControls = (handedness, options) => {
     if (useTeleportControls() === undefined) {
@@ -26,16 +26,10 @@ export const teleportControls = (handedness, options) => {
     const handContext = getHandContext(handedness);
     watch(handContext.enabled, (enabled) => {
         controlsCounter += enabled ? 1 : -1;
-        teleportState.update((value) => {
-            value[handedness].enabled = controlsCounter > 0;
-            return value;
-        });
+        teleportState[handedness].enabled = controlsCounter > 0;
     });
     watch(handContext.active, (hovering) => {
-        teleportState.update((value) => {
-            value[handedness].hovering = hovering;
-            return value;
-        });
+        teleportState[handedness].hovering = hovering;
     });
     return {
         enabled: handContext.enabled,

package/dist/plugins/teleportControls/{setup.js → setup.svelte.js}

@@ -1,19 +1,18 @@
-import { watch } from '@threlte/core';
-import { useXR } from '../../hooks/useXR';
-import { useController } from '../../hooks/useController';
+import { observe } from '@threlte/core';
+import { controllers } from '../../hooks/useController.svelte';
 import { useTeleport } from '../../hooks/useTeleport';
 import { useFixed } from '../../internal/useFixed';
-import { teleportIntersection } from '../../internal/stores';
+import { isPresenting, teleportIntersection } from '../../internal/state.svelte';
 export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40) => {
     const handedness = handContext.hand;
-    const controller = useController(handedness);
+    const controller = $derived(controllers[handedness]);
     const teleport = useTeleport();
     const handleHoverEnd = () => {
         handContext.hovered.set(undefined);
-        teleportIntersection[handedness].set(undefined);
+        teleportIntersection[handedness] = undefined;
     };
     const { start, stop } = useFixed(() => {
-        const gamepad = controller.current?.inputSource.gamepad;
+        const gamepad = controller?.inputSource.gamepad;
         if (gamepad === undefined) {
             return;
         }
@@ -45,14 +44,14 @@ export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40)
             }
             return;
         }
-        teleportIntersection[handedness].set(intersect);
+        teleportIntersection[handedness] = intersect;
         handContext.hovered.set(intersect);
     }, {
         fixedStep,
         autoStart: false
     });
-    watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
-        if (isPresenting && enabled) {
+    observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
+        if (isPresenting && $enabled) {
             start();
         }
         else {

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
     "@eslint/js": "^9.26.0",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.7",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
     "@types/three": "^0.175.0",
     "@types/webxr": "^0.5.22",
     "autoprefixer": "^10.4.19",
@@ -18,15 +18,15 @@
     "globals": "^16.1.0",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^5.26.2",
-    "svelte-check": "^4.1.7",
+    "svelte": "5.26.2",
+    "svelte-check": "^4.3.1",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.2.8",
+    "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.5"
+    "@threlte/core": "8.1.5"
   },
   "peerDependencies": {
     "svelte": ">=5",

package/dist/hooks/useController.d.ts

@@ -1,9 +0,0 @@
-import { type CurrentWritable } from '@threlte/core';
-import type { XRController } from '../types';
-export declare const left: CurrentWritable<XRController | undefined>;
-export declare const right: CurrentWritable<XRController | undefined>;
-export declare const gaze: CurrentWritable<XRController | undefined>;
-/**
- * Provides a reference to a current XRController, filtered by handedness.
- */
-export declare const useController: (handedness: XRHandedness) => CurrentWritable<XRController | undefined>;

package/dist/hooks/useController.js

@@ -1,19 +0,0 @@
-import { currentWritable } from '@threlte/core';
-export const left = currentWritable(undefined);
-export const right = currentWritable(undefined);
-export const gaze = currentWritable(undefined);
-/**
- * Provides a reference to a current XRController, filtered by handedness.
- */
-export const useController = (handedness) => {
-    switch (handedness) {
-        case 'left':
-            return left;
-        case 'right':
-            return right;
-        case 'none':
-            return gaze;
-        default:
-            throw new Error('useController handedness must be left, right, or none.');
-    }
-};

package/dist/hooks/useHand.d.ts

@@ -1,8 +0,0 @@
-import { type CurrentWritable } from '@threlte/core';
-import type { XRHand } from '../types';
-export declare const left: CurrentWritable<XRHand | undefined>;
-export declare const right: CurrentWritable<XRHand | undefined>;
-/**
- * Provides a reference to a current XRHand, filtered by handedness.
- */
-export declare const useHand: (handedness: "left" | "right") => CurrentWritable<undefined | XRHand>;

package/dist/hooks/useHandJoint.js

@@ -1,20 +0,0 @@
-import { currentWritable, useTask, useThrelte } from '@threlte/core';
-import { useHand } from './useHand';
-/**
- * Provides a reference to a requested hand joint, once available.
- */
-export const useHandJoint = (handedness, joint) => {
-    const { invalidate } = useThrelte();
-    const jointSpaceStore = currentWritable(undefined);
-    const xrhand = useHand(handedness);
-    const { stop } = useTask(() => {
-        const jointSpace = xrhand.current?.hand.joints[joint];
-        // The joint radius is a good indicator that the joint is ready
-        if (jointSpace?.jointRadius !== undefined) {
-            jointSpaceStore.set(jointSpace);
-            invalidate();
-            stop();
-        }
-    }, { autoInvalidate: false });
-    return jointSpaceStore;
-};

package/dist/hooks/useHitTest.js

@@ -1,79 +0,0 @@
-import { Matrix4 } from 'three';
-import { useThrelte, useTask, watch, currentWritable } from '@threlte/core';
-import { useXR } from './useXR';
-import { useController } from './useController';
-/**
- * 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 xrState = useXR();
-    const hitMatrix = new Matrix4();
-    const hitTestSource = currentWritable(undefined);
-    if (source === 'viewer') {
-        watch(xrState.session, async (session) => {
-            if (session === undefined) {
-                hitTestSource.set(undefined);
-                return;
-            }
-            const space = await session.requestReferenceSpace('viewer');
-            hitTestSource.set(await session.requestHitTestSource?.({ space }));
-        });
-    }
-    else {
-        const controller = useController(source === 'leftInput' ? 'left' : 'right');
-        const hand = useController(source === 'leftInput' ? 'left' : 'right');
-        watch([xrState.session, controller], async ([session, input]) => {
-            if (input === undefined || session === undefined) {
-                hitTestSource.set(undefined);
-                return;
-            }
-            const space = input.inputSource.targetRaySpace;
-            hitTestSource.set(await session.requestHitTestSource?.({ space }));
-        });
-        watch([xrState.session, hand], async ([session, input]) => {
-            if (input === undefined || session === undefined) {
-                hitTestSource.set(undefined);
-                return;
-            }
-            const space = input.inputSource.targetRaySpace;
-            hitTestSource.set(await session.requestHitTestSource?.({ space }));
-        });
-    }
-    const { start, stop } = useTask(() => {
-        const referenceSpace = xr.getReferenceSpace();
-        if (referenceSpace === null || hitTestSource.current === undefined) {
-            return hitTestCallback(hitMatrix, undefined);
-        }
-        const [hit] = xr.getFrame().getHitTestResults(hitTestSource.current);
-        const pose = hit?.getPose(referenceSpace);
-        if (pose === undefined) {
-            return hitTestCallback(hitMatrix, undefined);
-        }
-        hitMatrix.fromArray(pose.transform.matrix);
-        hitTestCallback(hitMatrix, hit);
-    }, { autoStart: false });
-    watch([xrState.isPresenting, hitTestSource], ([isPresenting, testSource]) => {
-        if (!isPresenting) {
-            stop();
-            return;
-        }
-        if (testSource === undefined) {
-            stop();
-            // Execute callback one last time to inform consumers of no hits.
-            hitTestCallback(hitMatrix, undefined);
-        }
-        else {
-            start();
-        }
-    });
-};

package/dist/internal/setupRaf.js

@@ -1,16 +0,0 @@
-import { onDestroy } from 'svelte';
-import { raf } from 'svelte/internal/client';
-import { watch } from '@threlte/core';
-import { session } from './stores';
-export const setupRaf = () => {
-    if (typeof window === 'undefined')
-        return;
-    const originalTick = raf.tick;
-    watch(session, (session) => {
-        raf.tick =
-            session === undefined
-                ? originalTick
-                : (fn) => session.requestAnimationFrame(fn);
-    });
-    onDestroy(() => (raf.tick = originalTick));
-};