@threlte/xr 1.5.4 → 1.6.0

package/dist/lib/toggleXRSession.js

@@ -1,5 +1,6 @@
-import { session, referenceSpaceType, xr } from '../internal/state.svelte.js';
+import { lastSessionRequest, referenceSpaceType, session, xr } from '../internal/state.svelte.js';
 import { getXRSessionOptions } from './getXRSessionOptions.js';
+let pending;
 /**
  * Starts / ends an XR session.
  *
@@ -8,26 +9,40 @@ import { getXRSessionOptions } from './getXRSessionOptions.js';
  * @param force Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways
  * @returns
  */
-export const toggleXRSession = async (sessionMode, sessionInit, force) => {
+export const toggleXRSession = (sessionMode, sessionInit, force) => {
+    if (pending !== undefined)
+        return pending;
+    pending = run(sessionMode, sessionInit, force).finally(() => {
+        pending = undefined;
+    });
+    return pending;
+};
+const run = async (sessionMode, sessionInit, force) => {
     const currentSession = session.current;
     const hasSession = currentSession !== undefined;
     if (force === 'enter' && hasSession)
         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) {
+    const manager = xr.current;
+    if (manager === undefined) {
         throw new Error('An <XR> component was not created when attempting to toggle a session.');
     }
     // Otherwise enter a session
     const options = getXRSessionOptions(referenceSpaceType.current, sessionInit);
-    const nextSession = await navigator.xr.requestSession(sessionMode, options);
-    await xr.current.setSession(nextSession);
+    const nextSession = await navigator.xr?.requestSession(sessionMode, options);
+    if (nextSession === undefined) {
+        throw new Error('A session was not able to be created.');
+    }
+    await manager.setSession(nextSession);
+    lastSessionRequest.mode = sessionMode;
+    lastSessionRequest.sessionInit = sessionInit;
     session.current = nextSession;
     return nextSession;
 };

package/dist/plugins/pointerControls/compute.js

@@ -1,10 +1,19 @@
 import { Vector3 } from 'three';
-import { controllers } from '../../hooks/useController.svelte.js';
+import { getControllerState, getHandState } from '../../internal/inputSources.svelte.js';
+const origin = new Vector3();
 const forward = new Vector3();
-export const defaultComputeFunction = (context, handContext) => {
-    const targetRay = controllers[handContext.hand]?.targetRay;
+export const defaultComputeFunction = (_context, handContext) => {
+    const state = handContext.sourceType === 'controller'
+        ? getControllerState(handContext.hand)
+        : getHandState(handContext.hand);
+    const targetRay = state?.targetRay;
     if (targetRay === undefined)
         return;
-    forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
-    context.raycaster.set(targetRay.position, forward);
+    // Read origin/direction from matrixWorld so the ray is in real world space,
+    // even when an ancestor (e.g. <XROrigin>) has a non-identity transform.
+    // Force an update because this runs before the frame's scene.updateMatrixWorld.
+    targetRay.updateWorldMatrix(true, false);
+    origin.setFromMatrixPosition(targetRay.matrixWorld);
+    forward.set(0, 0, -1).transformDirection(targetRay.matrixWorld);
+    handContext.raycaster.set(origin, forward);
 };

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

@@ -1,7 +1,7 @@
 import type { Object3D } from 'three';
-import type { ControlsContext, HandContext } from './types.js';
-export declare const getHandContext: (hand: "left" | "right") => HandContext;
-export declare const setHandContext: (hand: "left" | "right", context: HandContext) => void;
+import type { ControlsContext, HandContext, PointerSourceType } from './types.js';
+export declare const getHandContext: (hand: "left" | "right", sourceType: PointerSourceType) => HandContext;
+export declare const setHandContext: (hand: "left" | "right", sourceType: PointerSourceType, context: HandContext) => void;
 export declare const getControlsContext: () => ControlsContext;
 export declare const setControlsContext: (context: ControlsContext) => void;
 interface InternalContext {

package/dist/plugins/pointerControls/context.js

@@ -1,14 +1,20 @@
 import { getContext, setContext } from 'svelte';
 const handContextKeys = {
-    left: Symbol('pointer-controls-context-left'),
-    right: Symbol('pointer-controls-context-right')
+    left: {
+        controller: Symbol('pointer-controls-context-left-controller'),
+        hand: Symbol('pointer-controls-context-left-hand')
+    },
+    right: {
+        controller: Symbol('pointer-controls-context-right-controller'),
+        hand: Symbol('pointer-controls-context-right-hand')
+    }
 };
 const contextKey = Symbol('pointer-controls-context');
-export const getHandContext = (hand) => {
-    return getContext(handContextKeys[hand]);
+export const getHandContext = (hand, sourceType) => {
+    return getContext(handContextKeys[hand][sourceType]);
 };
-export const setHandContext = (hand, context) => {
-    setContext(handContextKeys[hand], context);
+export const setHandContext = (hand, sourceType, context) => {
+    setContext(handContextKeys[hand][sourceType], context);
 };
 export const getControlsContext = () => {
     return getContext(contextKey);

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

@@ -1,5 +1,6 @@
+import { type CurrentWritable } from '@threlte/core';
 import { type ComputeFunction } from './compute.js';
-import type { FilterFunction } from './types.js';
+import type { FilterFunction, IntersectionEvent } from './types.js';
 export type PointerControlsOptions = {
     enabled?: boolean;
     /**
@@ -22,6 +23,6 @@ export type PointerControlsOptions = {
     fixedStep?: number;
 };
 export declare const pointerControls: (handedness: "left" | "right", options?: PointerControlsOptions) => {
-    enabled: import("@threlte/core").CurrentWritable<boolean>;
-    hovered: Map<string, import("./types.js").IntersectionEvent>;
+    enabled: CurrentWritable<boolean>;
+    hovered: Map<string, IntersectionEvent>;
 };

package/dist/plugins/pointerControls/index.js

@@ -4,45 +4,77 @@ import { defaultComputeFunction } from './compute.js';
 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;
+import { pointerIntersection, pointerState } from '../../internal/state.svelte.js';
+const aggregateStates = new Map();
 export const pointerControls = (handedness, options) => {
     if (getControlsContext() === undefined) {
         injectPointerControlsPlugin();
         setInternalContext();
-        setControlsContext({
-            interactiveObjects: [],
-            raycaster: new Raycaster(),
-            compute: options?.compute ?? defaultComputeFunction,
-            filter: options?.filter
-        });
+        setControlsContext({ interactiveObjects: [] });
     }
     const context = getControlsContext();
-    if (getHandContext(handedness) === undefined) {
-        const enabled = options?.enabled ?? true;
-        const ctx = {
-            hand: handedness,
-            enabled: currentWritable(enabled),
-            pointer: currentWritable(new Vector3()),
-            pointerOverTarget: currentWritable(false),
-            lastEvent: undefined,
-            initialClick: [0, 0, 0],
-            initialHits: [],
-            hovered: new Map()
-        };
-        setHandContext(handedness, ctx);
-        setupPointerControls(context, ctx, options?.fixedStep);
-    }
-    const handContext = getHandContext(handedness);
-    observe.pre(() => [handContext.enabled], ([enabled]) => {
-        controlsCounter += enabled ? 1 : -1;
-        pointerState[handedness].enabled = controlsCounter > 0;
+    const aggregateState = aggregateStates.get(handedness) ??
+        (() => {
+            const state = {
+                enabled: currentWritable(options?.enabled ?? true),
+                hovered: new Map()
+            };
+            aggregateStates.set(handedness, state);
+            return state;
+        })();
+    const { enabled, hovered } = aggregateState;
+    let controllerContext = getHandContext(handedness, 'controller');
+    let handContext = getHandContext(handedness, 'hand');
+    const syncSharedState = () => {
+        hovered.clear();
+        for (const [id, event] of controllerContext.hovered) {
+            hovered.set(`controller:${id}`, event);
+        }
+        for (const [id, event] of handContext.hovered) {
+            hovered.set(`hand:${id}`, event);
+        }
+        // Shared handedness-level pointer visuals are currently controller-only:
+        // <Controller /> renders the cursor/ray from these globals, while hand
+        // pointer events are dispatched independently without a matching visual.
+        pointerState[handedness].hovering = controllerContext.pointerOverTarget.current;
+        pointerIntersection[handedness] = controllerContext.currentIntersection;
+    };
+    const createContext = (sourceType) => ({
+        hand: handedness,
+        sourceType,
+        enabled,
+        pointer: currentWritable(new Vector3()),
+        pointerOverTarget: currentWritable(false),
+        lastEvent: undefined,
+        initialClick: [0, 0, 0],
+        initialHits: [],
+        hovered: new Map(),
+        currentIntersection: undefined,
+        raycaster: new Raycaster(),
+        syncSharedState,
+        compute: options?.compute ?? defaultComputeFunction,
+        filter: options?.filter
     });
-    observe.pre(() => [handContext.pointerOverTarget], ([hovering]) => {
-        pointerState[handedness].hovering = hovering;
+    const setupContexts = [];
+    if (controllerContext === undefined) {
+        controllerContext = createContext('controller');
+        setHandContext(handedness, 'controller', controllerContext);
+        setupContexts.push(controllerContext);
+    }
+    if (handContext === undefined) {
+        handContext = createContext('hand');
+        setHandContext(handedness, 'hand', handContext);
+        setupContexts.push(handContext);
+    }
+    for (const setupContext of setupContexts) {
+        setupPointerControls(context, setupContext, options?.fixedStep);
+    }
+    observe.pre(() => [enabled], ([nextEnabled]) => {
+        pointerState[handedness].enabled = nextEnabled;
     });
+    syncSharedState();
     return {
-        enabled: handContext.enabled,
-        hovered: handContext.hovered
+        enabled,
+        hovered
     };
 };

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

@@ -1,21 +1,36 @@
 import { Vector3 } from 'three';
-import { observe } from '@threlte/core';
+import { fromStore } from 'svelte/store';
 import { getInternalContext } from './context.js';
-import { controllers } from '../../hooks/useController.svelte.js';
-import { useHand } from '../../hooks/useHand.svelte.js';
+import { addSubscriber } from '../../internal/inputSources.svelte.js';
 import { useFixed } from '../../internal/useFixed.js';
-import { isPresenting, pointerIntersection } from '../../internal/state.svelte.js';
+import { isPresenting } 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;
+// Starts high enough to stay clear of browser-assigned DOM pointerIds in the
+// same session. Incremented per setupPointerControls call so each hand — and
+// each reconnect — gets a distinct id.
+let nextPointerId = 1001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
     const handedness = handContext.hand;
-    const controller = $derived(controllers[handedness]);
-    const hand = useHand(handedness);
+    const pointerId = nextPointerId++;
+    const enabled = fromStore(handContext.enabled);
     const { dispatchers } = getInternalContext();
     let hits = [];
-    const lastPosition = new Vector3();
+    const lastRayOrigin = new Vector3();
+    const lastRayDirection = new Vector3();
     const handlePointerDown = (event) => {
         // Save initial coordinates on pointer-down
         const [hit] = hits;
@@ -29,24 +44,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]);
             }
         }
@@ -64,10 +73,11 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (handContext.hovered.size === 0) {
             handContext.pointerOverTarget.set(false);
         }
+        handContext.syncSharedState();
     }
     const getHits = () => {
         const intersections = [];
-        const rawHits = context.raycaster.intersectObjects(context.interactiveObjects, true);
+        const rawHits = handContext.raycaster.intersectObjects(context.interactiveObjects, true);
         const seen = new Set();
         // Deduplicate hits by object. When recursive=true, intersectObjects searches
         // each registered object's full subtree, so a child that is itself registered
@@ -87,8 +97,9 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             seen.add(key);
             return true;
         });
-        const filtered = context.filter === undefined ? hits : context.filter(hits, context, handContext);
-        pointerIntersection[handedness] = filtered[0];
+        const filtered = handContext.filter === undefined ? hits : handContext.filter(hits, context, handContext);
+        handContext.currentIntersection = filtered[0];
+        handContext.syncSharedState();
         // Bubble up the events, find the event source (eventObject)
         for (const hit of filtered) {
             let eventObject = hit.object;
@@ -104,17 +115,23 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     function pointerMissed(objects, event) {
         for (const object of objects) {
-            dispatchers.get(object)?.pointermissed?.(event);
+            dispatchers.get(object)?.onpointermissed?.(event);
         }
     }
     function processHits() {
-        context.compute(context, handContext);
+        handContext.compute(context, handContext);
         return getHits();
     }
     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 +144,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 stopped,
                 ...hit,
                 intersections: hits,
+                handedness,
+                pointerId,
                 stopPropagation() {
                     stopped = true;
                     intersectionEvent.stopped = true;
@@ -140,7 +159,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 delta: 0,
                 nativeEvent: event,
                 pointer: handContext.pointer.current,
-                ray: context.raycaster.ray
+                ray: handContext.raycaster.ray
             };
             if (isPointerMove) {
                 // Move event ...
@@ -157,6 +176,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                         events.onpointerover?.(intersectionEvent);
                         events.onpointerenter?.(intersectionEvent);
                         handContext.pointerOverTarget.set(true);
+                        handContext.syncSharedState();
                     }
                     else if (hoveredItem.stopped) {
                         // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
@@ -166,15 +186,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;
@@ -182,61 +198,59 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     const { start, stop } = useFixed(() => {
         hits = processHits();
-        const targetRay = controller?.targetRay;
-        if (targetRay === undefined)
-            return;
-        if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
+        const ray = handContext.raycaster.ray;
+        if (ray.origin.distanceToSquared(lastRayOrigin) > EPSILON * EPSILON ||
+            1 - ray.direction.dot(lastRayDirection) > EPSILON) {
             handleEvent('onpointermove');
         }
-        lastPosition.copy(targetRay.position);
+        lastRayOrigin.copy(ray.origin);
+        lastRayDirection.copy(ray.direction);
     }, {
         fixedStep,
         autoStart: false
     });
-    observe.pre(() => [controller, handContext.enabled], ([controller, $enabled]) => {
-        if (controller === undefined)
-            return;
-        const removeHandlers = () => {
-            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;
+    $effect.pre(() => {
+        if (isPresenting.current && enabled.current) {
+            start();
         }
         else {
-            removeHandlers();
-            return;
+            stop();
+            hits = [];
+            handContext.currentIntersection = undefined;
+            cancelPointer([]);
+            handContext.syncSharedState();
         }
     });
-    observe.pre(() => [hand, handContext.enabled], ([input, enabled]) => {
-        if (input === undefined)
+    $effect.pre(() => {
+        if (handContext.sourceType !== 'controller')
             return;
-        const removeHandlers = () => {
-            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();
+        if (!enabled.current)
             return;
-        }
+        return addSubscriber({
+            type: 'controller',
+            handedness,
+            callbacks: {
+                onselectstart: handlePointerDown,
+                onselectend: handlePointerUp,
+                onselect: handleClick
+            }
+        });
     });
-    observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
-        if (isPresenting && $enabled) {
-            start();
-        }
-        else {
-            stop();
-        }
+    $effect.pre(() => {
+        if (handContext.sourceType !== 'hand')
+            return;
+        if (!enabled.current)
+            return;
+        return addSubscriber({
+            type: 'hand',
+            handedness,
+            callbacks: {
+                onpinchstart: handlePointerDown,
+                onpinchend: ((event) => {
+                    handlePointerUp(event);
+                    handleClick(event);
+                })
+            }
+        });
     });
 };

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

@@ -1,6 +1,7 @@
 import type { Intersection as ThreeIntersection, Object3D, Vector3, Ray, Raycaster, Event } from 'three';
 import type { CurrentWritable } from '@threlte/core';
 import type { ComputeFunction } from './compute.js';
+export type PointerSourceType = 'controller' | 'hand';
 export type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
@@ -13,6 +14,11 @@ 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';
+    /** Stable identifier for this pointer source. Mirrors DOM PointerEvent.pointerId so downstream
+     * consumers that key per-pointer state by id can distinguish hands / reconnects. */
+    pointerId: number;
     /** Normalized event coordinates */
     pointer: Vector3;
     /** Delta between first click and this event */
@@ -29,12 +35,11 @@ export interface IntersectionEvent extends Intersection {
 export type FilterFunction = (items: Intersection[], state: ControlsContext, handState: HandContext) => Intersection[];
 export type ControlsContext = {
     interactiveObjects: Object3D[];
-    raycaster: Raycaster;
-    compute: ComputeFunction;
-    filter?: FilterFunction | undefined;
 };
 export type HandContext = {
     hand: 'left' | 'right';
+    /** Physical XR source this runtime tracks for the handedness. */
+    sourceType: PointerSourceType;
     enabled: CurrentWritable<boolean>;
     pointer: CurrentWritable<Vector3>;
     pointerOverTarget: CurrentWritable<boolean>;
@@ -42,6 +47,14 @@ export type HandContext = {
     initialClick: [x: number, y: number, z: number];
     initialHits: Object3D[];
     hovered: Map<string, IntersectionEvent>;
+    currentIntersection: Intersection | undefined;
+    /** Per-hand raycaster — keeps `intersectionEvent.ray` consistent across the
+     * tick even when the other hand also raycasts. */
+    raycaster: Raycaster;
+    /** Syncs aggregate handedness-level state after this source mutates hover or hit state. */
+    syncSharedState: () => void;
+    compute: ComputeFunction;
+    filter?: FilterFunction | undefined;
 };
 export interface PointerCaptureTarget {
     intersection: Intersection;

package/dist/plugins/pointerControls/types.js

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

package/dist/plugins/teleportControls/compute.d.ts

@@ -1,3 +1,3 @@
 import type { Context, HandContext } from './context.js';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
-export declare const defaultComputeFunction: (context: Context, handContext: HandContext) => void;
+export declare const defaultComputeFunction: (_context: Context, handContext: HandContext) => void;

package/dist/plugins/teleportControls/compute.js

@@ -1,10 +1,17 @@
 import { Vector3 } from 'three';
 import { controllers } from '../../hooks/useController.svelte.js';
+import { hands } from '../../hooks/useHand.svelte.js';
+const origin = new Vector3();
 const forward = new Vector3();
-export const defaultComputeFunction = (context, handContext) => {
-    const targetRay = controllers[handContext.hand]?.targetRay;
+export const defaultComputeFunction = (_context, handContext) => {
+    const targetRay = controllers[handContext.hand]?.targetRay ?? hands[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
-    forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);
-    context.raycaster.set(targetRay.position, forward);
+    // Read origin/direction from matrixWorld so the ray is in real world space,
+    // even when an ancestor (e.g. <XROrigin>) has a non-identity transform.
+    // Force an update because this runs before the frame's scene.updateMatrixWorld.
+    targetRay.updateWorldMatrix(true, false);
+    origin.setFromMatrixPosition(targetRay.matrixWorld);
+    forward.set(0, 0, -1).transformDirection(targetRay.matrixWorld);
+    handContext.raycaster.set(origin, forward);
 };

package/dist/plugins/teleportControls/context.d.ts

@@ -1,6 +1,5 @@
 import { type Mesh, Raycaster, type Intersection } from 'three';
 import type { CurrentWritable } from '@threlte/core';
-import type { TeleportControlsOptions } from './index.js';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
 export type TeleportEvents = Record<string, (arg: unknown) => void>;
 export interface Context {
@@ -8,8 +7,6 @@ export interface Context {
     surfaces: Map<string, Mesh>;
     blockers: Map<string, Mesh>;
     dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
-    raycaster: Raycaster;
-    compute: ComputeFunction;
     addBlocker: (mesh: Mesh) => void;
     removeBlocker: (mesh: Mesh) => void;
     addSurface: (mesh: Mesh, events: TeleportEvents) => void;
@@ -20,8 +17,11 @@ export interface HandContext {
     enabled: CurrentWritable<boolean>;
     active: CurrentWritable<boolean>;
     hovered: CurrentWritable<Intersection | undefined>;
+    /** Per-hand raycaster — keeps intersection state isolated between hands. */
+    raycaster: Raycaster;
+    compute: ComputeFunction;
 }
 export declare const getHandContext: (hand: "left" | "right") => HandContext;
 export declare const setHandContext: (hand: "left" | "right", context: HandContext) => void;
 export declare const useTeleportControls: () => Context;
-export declare const createTeleportContext: (compute: TeleportControlsOptions["compute"]) => Context;
+export declare const createTeleportContext: () => Context;