@threlte/xr 0.0.12 → 0.1.0

package/dist/components/XR.svelte

@@ -17,33 +17,38 @@ This should be placed within a Threlte `<Canvas />`.
 ```
 
 -->
-<script>import { onDestroy } from "svelte";
-import { createRawEventDispatcher, useThrelte } from "@threlte/core";
+<script>import { onMount } from "svelte";
+import { createRawEventDispatcher, useThrelte, watch } from "@threlte/core";
 import {
-  initialized,
   isHandTracking,
   isPresenting,
   referenceSpaceType,
   session,
   xr as xrStore
 } from "../internal/stores";
-import { updateRaf } from "../internal/updateRaf";
-import { useUpdateHeadset } from "../internal/headset";
+import { setupRaf } from "../internal/setupRaf";
+import { setupHeadset } from "../internal/setupHeadset";
+import { setupControllers } from "../internal/setupControllers";
+import { setupHands } from "../internal/setupHands";
 export let foveation = 1;
 export let frameRate = void 0;
 export let referenceSpace = "local-floor";
 const dispatch = createRawEventDispatcher();
-updateRaf();
-const { renderer, frameloop } = useThrelte();
+const { renderer, renderMode } = useThrelte();
 const { xr } = renderer;
-const handleSessionStart = (event) => {
-  $isPresenting = true;
-  dispatch("sessionstart", { ...event, target: $session });
+let originalRenderMode = $renderMode;
+setupRaf();
+setupHeadset();
+setupControllers();
+setupHands();
+const handleSessionStart = () => {
+  isPresenting.set(true);
+  dispatch("sessionstart", { type: "sessionstart", target: $session });
 };
-const handleSessionEnd = (event) => {
-  dispatch("sessionend", { ...event, target: $session });
-  $isPresenting = false;
-  $session = void 0;
+const handleSessionEnd = () => {
+  dispatch("sessionend", { type: "sessionend", target: $session });
+  isPresenting.set(false);
+  session.set(void 0);
 };
 const handleVisibilityChange = (event) => {
   dispatch("visibilitychange", { ...event, target: $session });
@@ -63,14 +68,7 @@ const updateTargetFrameRate = (frameRate2) => {
   } catch {
   }
 };
-const cleanupSession = (currentSession) => {
-  if (currentSession === void 0)
-    return;
-  currentSession.removeEventListener("visibilitychange", handleVisibilityChange);
-  currentSession.removeEventListener("inputsourceschange", handleInputSourcesChange);
-  currentSession.removeEventListener("frameratechange", handleFramerateChange);
-};
-const updateSession = async (currentSession) => {
+watch(session, (currentSession) => {
   if (currentSession === void 0)
     return;
   currentSession.addEventListener("visibilitychange", handleVisibilityChange);
@@ -78,44 +76,40 @@ const updateSession = async (currentSession) => {
   currentSession.addEventListener("frameratechange", handleFramerateChange);
   xr.setFoveation(foveation);
   updateTargetFrameRate(frameRate);
-};
-let lastSession;
-$initialized = true;
-$xrStore = xr;
-xr.enabled = true;
-xr.addEventListener("sessionstart", handleSessionStart);
-xr.addEventListener("sessionend", handleSessionEnd);
-useUpdateHeadset();
-onDestroy(() => {
-  $initialized = false;
-  $xrStore = void 0;
-  xr.enabled = false;
-  xr.removeEventListener("sessionstart", handleSessionStart);
-  xr.removeEventListener("sessionend", handleSessionEnd);
+  return () => {
+    currentSession.removeEventListener("visibilitychange", handleVisibilityChange);
+    currentSession.removeEventListener("inputsourceschange", handleInputSourcesChange);
+    currentSession.removeEventListener("frameratechange", handleFramerateChange);
+  };
 });
-$: {
-  xr.setReferenceSpaceType(referenceSpace);
-  $referenceSpaceType = referenceSpace;
-}
-$:
-  if (lastSession !== $session) {
-    cleanupSession(lastSession);
-    updateSession($session);
-    lastSession = $session;
-  }
-let originalFrameloop = $frameloop;
-$frameloop = "always";
-$:
-  if ($isPresenting) {
-    originalFrameloop = $frameloop;
-    $frameloop = "always";
+watch(isPresenting, (presenting) => {
+  if (presenting) {
+    originalRenderMode = renderMode.current;
+    renderMode.set("always");
   } else {
-    $frameloop = originalFrameloop;
+    renderMode.set(originalRenderMode);
   }
+});
+onMount(() => {
+  $xrStore = xr;
+  xr.enabled = true;
+  xr.addEventListener("sessionstart", handleSessionStart);
+  xr.addEventListener("sessionend", handleSessionEnd);
+  return () => {
+    $xrStore = void 0;
+    xr.enabled = false;
+    xr.removeEventListener("sessionstart", handleSessionStart);
+    xr.removeEventListener("sessionend", handleSessionEnd);
+  };
+});
 $:
   updateTargetFrameRate(frameRate);
 $:
   xr.setFoveation(foveation);
+$: {
+  xr.setReferenceSpaceType(referenceSpace);
+  $referenceSpaceType = referenceSpace;
+}
 </script>
 
 {#if $isPresenting}

package/dist/components/XRButton.svelte

@@ -21,14 +21,14 @@ display info about your WebXR session. This is aliased by `ARButton` and
 <script>import { createEventDispatcher } from "svelte";
 import { getXRSupportState } from "../lib/getXRSupportState";
 import { toggleXRSession } from "../lib/toggleXRSession";
-import { session, initialized } from "../internal/stores";
+import { session, xr } from "../internal/stores";
 export let mode;
 export let sessionInit = void 0;
 export let force = void 0;
 export let styled = true;
 const dispatch = createEventDispatcher();
 const handleButtonClick = async (nativeEvent, state) => {
-  if (!$initialized) {
+  if (!$xr) {
     throw new Error("The <XR> component was not created. This is required to start an XR session.");
   }
   dispatch("click", { state, nativeEvent });

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
@@ -54,12 +55,12 @@ declare const __propDef: {
         results?: number | null | undefined;
         security?: string | null | undefined;
         unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | null | undefined;
+        inputmode?: "url" | "search" | "none" | "text" | "tel" | "email" | "numeric" | "decimal" | null | undefined;
         is?: string | null | undefined;
         'bind:innerHTML'?: string | null | undefined;
         'bind:textContent'?: string | null | undefined;
         'bind:innerText'?: string | null | undefined;
-        'bind:contentRect'?: DOMRectReadOnly | null | undefined;
+        'bind:contentRect'?: any;
         'bind:contentBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:borderBoxSize'?: ResizeObserverSize[] | null | undefined;
         'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | null | undefined;
@@ -132,37 +133,37 @@ declare const __propDef: {
         'on:input'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
         'on:reset'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
         'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLButtonElement> | null | undefined;
-        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        'on:invalid'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLButtonElement> | null | undefined;
-        'on:load'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:error'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:toggle'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        'on:load'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:error'?: import("svelte/elements").EventHandler<Event<EventTarget>, Element> | null | undefined;
+        'on:toggle'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
         'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
         'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        'on:abort'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplay'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cuechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:durationchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:emptied'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:encrypted'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ended'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadeddata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:loadstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:pause'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:play'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:playing'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:progress'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:ratechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeked'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:seeking'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:stalled'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:suspend'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:timeupdate'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:volumechange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:waiting'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
         'on:click'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
         'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
@@ -182,9 +183,9 @@ declare const __propDef: {
         'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
         'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
         'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        'on:select'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectionchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:selectstart'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
         'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
         'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
@@ -215,11 +216,11 @@ declare const __propDef: {
         'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
         'on:message'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
         'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
-        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:cancel'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:close'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         mode: XRSessionMode;
         sessionInit?: XRSessionInit & {
             domOverlay?: {

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 import { type ColorRepresentation } from 'three';
 declare const __propDef: {

package/dist/components/internal/PointerCursor.svelte

@@ -1,10 +1,12 @@
-<script>import { Group, Vector3 } from "three";
+<script>import { Group, Vector3, Matrix3 } from "three";
 import { T, useFrame } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
 export let handedness;
 const ref = new Group();
 const vec3 = new Vector3();
+const normalMatrix = new Matrix3();
+const worldNormal = new Vector3();
 $:
   hovering = $pointerState[handedness].hovering;
 $:
@@ -13,10 +15,12 @@ const { start, stop } = useFrame(
   () => {
     if (intersection.current === void 0)
       return;
-    const { point, face } = intersection.current;
+    const { point, face, object } = intersection.current;
     ref.position.lerp(point, 0.4);
     if (face) {
-      ref.lookAt(vec3.addVectors(point, face.normal));
+      normalMatrix.getNormalMatrix(object.matrixWorld);
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize();
+      ref.lookAt(vec3.addVectors(point, worldNormal));
     }
   },
   {

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {

package/dist/components/internal/TeleportCursor.svelte

@@ -1,21 +1,25 @@
 <script>import { spring } from "svelte/motion";
-import { Group, Vector3 } from "three";
+import { Group, Matrix3, Vector3 } from "three";
 import { T, useFrame } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
 export let handedness;
 const ref = new Group();
 const vec3 = new Vector3();
+const normalMatrix = new Matrix3();
+const worldNormal = new Vector3();
 $:
   intersection = teleportIntersection[handedness];
 const { start, stop } = useFrame(
   () => {
     if (intersection.current === void 0)
       return;
-    const { point, face } = intersection.current;
+    const { point, face, object } = intersection.current;
     ref.position.lerp(point, 0.4);
     if (face) {
-      ref.lookAt(vec3.addVectors(point, face.normal));
+      normalMatrix.getNormalMatrix(object.matrixWorld);
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize();
+      ref.lookAt(vec3.addVectors(point, worldNormal));
     }
   },
   {

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {

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

@@ -1,3 +1,4 @@
+/// <reference types="bun-types" />
 import { SvelteComponent } from "svelte";
 import { type XRTargetRaySpace } from 'three';
 declare const __propDef: {

package/dist/hooks/useController.js

@@ -2,10 +2,6 @@ import { currentWritable } from '@threlte/core';
 export const left = currentWritable(undefined);
 export const right = currentWritable(undefined);
 export const gaze = currentWritable(undefined);
-const gamepadLeft = currentWritable(undefined);
-const gamepadRight = currentWritable(undefined);
-left.subscribe((value) => gamepadLeft.set(value?.inputSource.gamepad));
-right.subscribe((value) => gamepadRight.set(value?.inputSource.gamepad));
 /**
  * Provides a reference to a current XRController, filtered by handedness.
  */
@@ -17,5 +13,7 @@ export const useController = (handedness) => {
             return right;
         case 'none':
             return gaze;
+        default:
+            throw new Error('useController handedness must be left, right, or none.');
     }
 };

package/dist/hooks/useHand.js

@@ -10,5 +10,7 @@ export const useHand = (handedness) => {
             return left;
         case 'right':
             return right;
+        default:
+            throw new Error('useHand handedness must be left or right.');
     }
 };

package/dist/hooks/useHandJoint.d.ts

@@ -1,6 +1,6 @@
-import type * as THREE from 'three';
+import type { XRJointSpace } from 'three';
 import type { HandJoints } from '../lib/handJoints';
 /**
  * Provides a reference to a requested hand joint, once available.
  */
-export declare const useHandJoint: (handedness: 'left' | 'right', joint: HandJoints) => import("@threlte/core").CurrentWritable<THREE.XRJointSpace | undefined>;
+export declare const useHandJoint: (handedness: 'left' | 'right', joint: HandJoints) => import("@threlte/core").CurrentWritable<XRJointSpace | undefined>;

package/dist/hooks/useHeadset.d.ts

@@ -1 +1,2 @@
-export declare const useHeadset: () => Readonly<THREE.Group>;
+import type { Group } from 'three';
+export declare const useHeadset: () => Readonly<Group>;

package/dist/hooks/useHeadset.js

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

package/dist/hooks/useHitTest.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="webxr" />
-import * as THREE from 'three';
-export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult | undefined) => void;
+import { Matrix4 } from 'three';
+export type HitTestCallback = (hitMatrix: Matrix4, hit: XRHitTestResult | undefined) => void;
 export type UseHitTestOptions = {
     /**
      * The ray source when performing hit testing.

package/dist/hooks/useHitTest.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Matrix4 } from 'three';
 import { useThrelte, useFrame, watch, currentWritable } from '@threlte/core';
 import { useXR } from './useXR';
 import { useController } from './useController';
@@ -17,12 +17,14 @@ export const useHitTest = (hitTestCallback, options = {}) => {
     const source = options.source ?? 'viewer';
     const { xr } = useThrelte().renderer;
     const xrState = useXR();
-    const hitMatrix = new THREE.Matrix4();
+    const hitMatrix = new Matrix4();
     let hitTestSource = currentWritable(undefined);
     if (source === 'viewer') {
         watch(xrState.session, async (session) => {
-            if (session === undefined)
+            if (session === undefined) {
+                hitTestSource.set(undefined);
                 return;
+            }
             const space = await session.requestReferenceSpace('viewer');
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
@@ -31,14 +33,18 @@ export const useHitTest = (hitTestCallback, options = {}) => {
         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)
+            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)
+            if (input === undefined || session === undefined) {
+                hitTestSource.set(undefined);
                 return;
+            }
             const space = input.inputSource.targetRaySpace;
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
@@ -56,7 +62,11 @@ export const useHitTest = (hitTestCallback, options = {}) => {
         hitMatrix.fromArray(pose.transform.matrix);
         hitTestCallback(hitMatrix, hit);
     }, { autostart: false });
-    watch(hitTestSource, (testSource) => {
+    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.

package/dist/hooks/useTeleport.d.ts

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Quaternion, type Vector3, type Vector3Tuple } from 'three';
 /**
  * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
@@ -14,4 +14,4 @@ import * as THREE from 'three';
  *
  * teleport(vec3, quat)
  */
-export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, orientation?: THREE.Quaternion) => void;
+export declare const useTeleport: () => (position: Vector3 | Vector3Tuple, orientation?: Quaternion) => void;

package/dist/hooks/useTeleport.js

@@ -1,6 +1,6 @@
-import * as THREE from 'three';
+import { Quaternion } from 'three';
 import { useThrelte } from '@threlte/core';
-const quaternion = new THREE.Quaternion();
+const quaternion = new Quaternion();
 const offset = { x: 0, y: 0, z: 0 };
 /**
  * Returns a callback to teleport the player from the world origin to a position and optional orientation.

package/dist/internal/setupControllers.d.ts

@@ -0,0 +1 @@
+export declare const setupControllers: () => void;

package/dist/internal/setupControllers.js

@@ -0,0 +1,69 @@
+import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory';
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { useHandTrackingState } from './useHandTrackingState';
+import { gaze, left, right } from '../hooks/useController';
+import { controllerDispatchers } from './stores';
+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 indexMap = new Map();
+    controllers.forEach((targetRay, index) => {
+        indexMap.set(targetRay, {
+            targetRay,
+            grip: xr.getControllerGrip(index),
+            model: factory.createControllerModel(targetRay)
+        });
+    });
+    onMount(() => {
+        const dispatch = (event) => {
+            if (hasHands())
+                return;
+            const { data } = event;
+            controllerDispatchers[data.handedness]?.current?.(event.type, event);
+        };
+        function handleConnected(event) {
+            const { model, targetRay, grip } = indexMap.get(this);
+            const { data: inputSource } = event;
+            stores[event.data.handedness].set({
+                inputSource,
+                targetRay,
+                grip,
+                model
+            });
+            dispatch(event);
+        }
+        const handleDisconnected = (event) => {
+            dispatch(event);
+            stores[event.data.handedness].set(undefined);
+        };
+        for (const targetRay of controllers) {
+            targetRay.addEventListener('connected', handleConnected);
+            targetRay.addEventListener('disconnected', handleDisconnected);
+            targetRay.addEventListener('select', dispatch);
+            targetRay.addEventListener('selectstart', dispatch);
+            targetRay.addEventListener('selectend', dispatch);
+            targetRay.addEventListener('squeeze', dispatch);
+            targetRay.addEventListener('squeezestart', dispatch);
+            targetRay.addEventListener('squeezeend', dispatch);
+        }
+        return () => {
+            for (const targetRay of controllers) {
+                targetRay.removeEventListener('connected', handleConnected);
+                targetRay.removeEventListener('disconnected', handleDisconnected);
+                targetRay.removeEventListener('select', dispatch);
+                targetRay.removeEventListener('selectstart', dispatch);
+                targetRay.removeEventListener('selectend', dispatch);
+                targetRay.removeEventListener('squeeze', dispatch);
+                targetRay.removeEventListener('squeezestart', dispatch);
+                targetRay.removeEventListener('squeezeend', dispatch);
+            }
+            stores.left.set(undefined);
+            stores.right.set(undefined);
+            stores.none.set(undefined);
+        };
+    });
+};

package/dist/internal/setupHands.d.ts

@@ -0,0 +1 @@
+export declare const setupHands: () => void;