@threlte/xr 1.0.7 → 1.1.0

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;
@@ -96,6 +95,9 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         let stopped = false;
         // loop through all hits and dispatch events
         dispatchEvents: for (const hit of hits) {
+            const events = dispatchers.get(hit.eventObject);
+            if (events === undefined)
+                continue;
             const intersectionEvent = {
                 stopped,
                 ...hit,
@@ -115,9 +117,6 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 pointer: handContext.pointer.current,
                 ray: context.raycaster.ray
             };
-            const events = dispatchers.get(hit.eventObject);
-            if (events === undefined)
-                return;
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));
@@ -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.7",
+  "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/components/internal/ScenePortal.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { T, useThrelte } from '@threlte/core'
-  import { Object3D } from 'three'
-
-  const { scene } = useThrelte()
-
-  const proxy = new Object3D()
-  proxy.add = (child) => {
-    scene.add(child)
-    return child
-  }
-  proxy.remove = (child) => {
-    scene.remove(child)
-    return child
-  }
-</script>
-
-<T
-  is={proxy}
-  attach={false}
->
-  <slot />
-</T>

package/dist/components/internal/ScenePortal.svelte.d.ts

@@ -1,20 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ScenePortal: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ScenePortal = InstanceType<typeof ScenePortal>;
-export default ScenePortal;

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));
-};

package/dist/internal/stores.d.ts

@@ -1,43 +0,0 @@
-import type { WebXRManager, Intersection } from 'three';
-import type { XRControllerEvents, XRHandEvents } from '../types';
-export declare const isPresenting: import("@threlte/core").CurrentWritable<boolean>;
-export declare const isHandTracking: import("@threlte/core").CurrentWritable<boolean>;
-export declare const session: import("@threlte/core").CurrentWritable<XRSession | undefined>;
-export declare const referenceSpaceType: import("@threlte/core").CurrentWritable<XRReferenceSpaceType | undefined>;
-export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
-export declare const controllerEvents: {
-    left: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
-    right: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
-};
-export declare const handEvents: {
-    left: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
-    right: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
-};
-export declare const teleportState: import("@threlte/core").CurrentWritable<{
-    left: {
-        enabled: boolean;
-        hovering: boolean;
-    };
-    right: {
-        enabled: boolean;
-        hovering: boolean;
-    };
-}>;
-export declare const teleportIntersection: {
-    left: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
-};
-export declare const pointerState: import("@threlte/core").CurrentWritable<{
-    left: {
-        enabled: boolean;
-        hovering: boolean;
-    };
-    right: {
-        enabled: boolean;
-        hovering: boolean;
-    };
-}>;
-export declare const pointerIntersection: {
-    left: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
-};

package/dist/internal/stores.js

@@ -1,42 +0,0 @@
-import { currentWritable } from '@threlte/core';
-export const isPresenting = currentWritable(false);
-export const isHandTracking = currentWritable(false);
-export const session = currentWritable(undefined);
-export const referenceSpaceType = currentWritable(undefined);
-export const xr = currentWritable(undefined);
-export const controllerEvents = {
-    left: currentWritable(undefined),
-    right: currentWritable(undefined)
-};
-export const handEvents = {
-    left: currentWritable(undefined),
-    right: currentWritable(undefined)
-};
-export const teleportState = currentWritable({
-    left: {
-        enabled: false,
-        hovering: false
-    },
-    right: {
-        enabled: false,
-        hovering: false
-    }
-});
-export const teleportIntersection = {
-    left: currentWritable(undefined),
-    right: currentWritable(undefined)
-};
-export const pointerState = currentWritable({
-    left: {
-        enabled: false,
-        hovering: false
-    },
-    right: {
-        enabled: false,
-        hovering: false
-    }
-});
-export const pointerIntersection = {
-    left: currentWritable(undefined),
-    right: currentWritable(undefined)
-};