@threlte/xr 0.0.12 → 0.0.13

package/dist/components/ARButton.svelte

@@ -17,7 +17,7 @@
   sessionInit={{
     domOverlay: typeof document !== 'undefined' ? { root: document.body } : undefined,
     requiredFeatures: ['plane-detection'],
-    optionalFeatures: ['hit-test', 'light-estimation', 'dom-overlay', 'dom-overlay-for-handheld-ar']
+    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers', 'hit-test']
   }}
   {...$$restProps}
   mode='immersive-ar'

package/dist/components/Controller.svelte

@@ -4,76 +4,33 @@
 <script
  
   context="module"
->import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
-import { onDestroy } from "svelte";
-import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
-import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
-import { isHandTracking, pointerState, teleportState } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
+>import { writable } from "svelte/store";
+import { T, createRawEventDispatcher } from "@threlte/core";
+import { left as leftStore, right as rightStore } from "../hooks/useController";
+import { isHandTracking, pointerState, teleportState, controllerDispatchers } from "../internal/stores";
 import PointerCursor from "./internal/PointerCursor.svelte";
 import ShortRay from "./internal/ShortRay.svelte";
 import ScenePortal from "./internal/ScenePortal.svelte";
 import TeleportCursor from "./internal/TeleportCursor.svelte";
 import TeleportRay from "./internal/TeleportRay.svelte";
-const factory = new XRControllerModelFactory();
 const stores = {
   left: leftStore,
-  right: rightStore,
-  none: gaze
+  right: rightStore
 };
-const events = [
-  "select",
-  "selectstart",
-  "selectend",
-  "squeeze",
-  "squeezeend",
-  "squeezestart"
-];
-const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
 <script>export let left = void 0;
 export let right = void 0;
 export let hand = void 0;
-$:
-  handedness = left ? "left" : right ? "right" : hand;
 const dispatch = createRawEventDispatcher();
-const { xr } = useThrelte().renderer;
-const handTrackingNow = useHandTrackingState();
-const handleEvent = (event) => {
-  if (!handTrackingNow()) {
-    dispatch(event.type, event);
-  }
-};
-const handleConnected = (event) => {
-  const targetData = eventMap.get(event.target);
-  if (event.data.handedness !== handedness || !targetData)
-    return;
-  stores[handedness].set({ ...targetData, inputSource: event.data });
-  if (!handTrackingNow()) {
-    dispatch("connected", event);
-  }
-  events.forEach((name) => event.target.addEventListener(name, handleEvent));
-};
-const handleDisconnected = (event) => {
-  if (event.data.handedness !== handedness)
-    return;
-  stores[handedness].set(void 0);
-  if (!$isHandTracking) {
-    dispatch("disconnected", event);
-  }
-  events.forEach((name) => event.target.removeEventListener(name, handleEvent));
-};
-for (const index of [0, 1]) {
-  const targetRay2 = xr.getController(index);
-  const grip2 = xr.getControllerGrip(index);
-  const model2 = factory.createControllerModel(grip2);
-  eventMap.set(targetRay2, { targetRay: targetRay2, model: model2, grip: grip2 });
-  targetRay2.addEventListener("connected", handleConnected);
-  targetRay2.addEventListener("disconnected", handleDisconnected);
-}
+const handedness = writable(left ? "left" : right ? "right" : hand);
+$:
+  handedness.set(left ? "left" : right ? "right" : hand);
+controllerDispatchers[$handedness].set(dispatch);
+$:
+  controllerDispatchers[$handedness].set(dispatch);
 $:
-  store = stores[handedness];
+  store = stores[$handedness];
 $:
   grip = $store?.grip;
 $:
@@ -81,27 +38,14 @@ $:
 $:
   model = $store?.model;
 $:
-  hasPointerControls = $pointerState[handedness].enabled;
+  hasPointerControls = $pointerState[$handedness].enabled;
 $:
-  hasTeleportControls = $teleportState[handedness].enabled;
-onDestroy(() => {
-  for (const index of [0, 1]) {
-    const controller2 = xr.getController(index);
-    controller2.removeEventListener("connected", handleConnected);
-    controller2.removeEventListener("disconnected", handleDisconnected);
-  }
-  const controller = $store?.targetRay;
-  events.forEach((name) => controller?.removeEventListener(name, handleEvent));
-  store.set(void 0);
-});
+  hasTeleportControls = $teleportState[$handedness].enabled;
 </script>
 
 {#if !$isHandTracking}
   {#if grip}
-    <T
-      is={grip}
-      name="XR controller grip {handedness}"
-    >
+    <T is={grip}>
       <slot>
         <T is={model} />
       </slot>
@@ -111,19 +55,16 @@ onDestroy(() => {
   {/if}
 
   {#if targetRay}
-    <T
-      is={targetRay}
-      name="XR controller {handedness}"
-    >
+    <T is={targetRay}>
       <slot name="target-ray" />
 
       {#if hasPointerControls || hasTeleportControls}
         {#if $$slots['pointer-ray']}
-          <ShortRay {handedness}>
+          <ShortRay handedness={$handedness}>
             <slot name="pointer-ray" />
           </ShortRay>
         {:else}
-          <ShortRay {handedness} />
+          <ShortRay handedness={$handedness} />
         {/if}
       {/if}
     </T>
@@ -133,11 +74,11 @@ onDestroy(() => {
 <ScenePortal>
   {#if hasPointerControls}
     {#if $$slots['pointer-cursor']}
-      <PointerCursor {handedness}>
+      <PointerCursor handedness={$handedness}>
         <slot name="pointer-cursor" />
       </PointerCursor>
     {:else}
-      <PointerCursor {handedness} />
+      <PointerCursor handedness={$handedness} />
     {/if}
   {/if}
 
@@ -145,23 +86,23 @@ onDestroy(() => {
     {#if $$slots['teleport-ray']}
       <TeleportRay
         {targetRay}
-        {handedness}
+        handedness={$handedness}
       >
         <slot name="teleport-ray" />
       </TeleportRay>
     {:else}
       <TeleportRay
         {targetRay}
-        {handedness}
+        handedness={$handedness}
       />
     {/if}
 
     {#if $$slots['teleport-ray']}
-      <TeleportCursor {handedness}>
+      <TeleportCursor handedness={$handedness}>
         <slot name="teleport-cursor" />
       </TeleportCursor>
     {:else}
-      <TeleportCursor {handedness} />
+      <TeleportCursor handedness={$handedness} />
     {/if}
   {/if}
 </ScenePortal>

package/dist/components/Hand.svelte

@@ -1,50 +1,26 @@
-<script context='module'>import { onDestroy } from "svelte";
-import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
+<script context='module'>import { Group } from "three";
 import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
-import { isHandTracking } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
+import { isHandTracking, handDispatchers } from "../internal/stores";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-const factory = new XRHandModelFactory();
+import ScenePortal from "./internal/ScenePortal.svelte";
+import { writable } from "svelte/store";
 const stores = {
   left: leftStore,
   right: rightStore
 };
-const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>import ScenePortal from "./internal/ScenePortal.svelte";
-export let left = void 0;
+<script>export let left = void 0;
 export let right = void 0;
 export let hand = void 0;
-const handTrackingNow = useHandTrackingState();
 const dispatch = createRawEventDispatcher();
 const { xr } = useThrelte().renderer;
 const space = xr.getReferenceSpace();
+const handedness = writable(left ? "left" : right ? "right" : hand);
 $:
-  handedness = left ? "left" : right ? "right" : hand;
-const handleConnected = (event) => {
-  if (event.data.handedness !== handedness)
-    return;
-  stores[handedness].set({ ...eventMap.get(event.target), inputSource: event.data.hand });
-  if (handTrackingNow()) {
-    dispatch("connected", event);
-  }
-  event.target.addEventListener("pinchstart", handlePinchEvent);
-  event.target.addEventListener("pinchend", handlePinchEvent);
-};
-const handleDisconnected = (event) => {
-  if (event.data.handedness !== handedness)
-    return;
-  stores[handedness].set(void 0);
-  if ($isHandTracking) {
-    dispatch("disconnected", event);
-  }
-  event.target.removeEventListener("pinchstart", handlePinchEvent);
-  event.target.removeEventListener("pinchend", handlePinchEvent);
-};
-const handlePinchEvent = (event) => {
-  dispatch(event.type, event);
-};
+  handedness.set(left ? "left" : right ? "right" : hand);
+$:
+  handDispatchers[$handedness].set(dispatch);
 let children;
 const { start, stop } = useFrame(() => {
   const frame = xr.getFrame();
@@ -59,51 +35,38 @@ const { start, stop } = useFrame(() => {
   children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
 }, { autostart: false });
 $:
-  if (($$slots.wrist || $$slots.default) && inputSource) {
+  if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
     start();
   } else {
     stop();
   }
 $:
-  store = stores[handedness];
+  store = stores[$handedness];
 $:
   inputSource = $store?.inputSource;
 $:
   model = $store?.model;
-for (const index of [0, 1]) {
-  const hand2 = xr.getHand(index);
-  const model2 = factory.createHandModel(hand2, "mesh");
-  eventMap.set(hand2, { hand: hand2, model: model2 });
-  hand2.addEventListener("connected", handleConnected);
-  hand2.addEventListener("disconnected", handleDisconnected);
-}
-onDestroy(() => {
-  for (const index of [0, 1]) {
-    const hand3 = xr.getHand(index);
-    hand3.removeEventListener("connected", handleConnected);
-    hand3.removeEventListener("disconnected", handleDisconnected);
-  }
-  const hand2 = stores[handedness].current?.hand;
-  hand2?.removeEventListener("pinchstart", handlePinchEvent);
-  hand2?.removeEventListener("pinchend", handlePinchEvent);
-  stores[handedness].set(void 0);
-});
 </script>
 
-{#if $store?.hand}
-  <T
-    is={$store.hand}
-    name='XR hand {handedness}'
-  >
+{#if $store?.hand && $isHandTracking}
+  <T is={$store.hand}>
     {#if $$slots.default === undefined}
       <T is={model} />
     {/if}
   </T>
+
+  {#if $$slots['target-ray'] !== undefined}
+    <T is={$store.targetRay}>
+      <slot name='target-ray' />
+    </T>
+  {/if}
 {/if}
 
-<ScenePortal>
-  <T.Group bind:ref={children}>
-    <slot name='wrist' />
-    <slot />
-  </T.Group>
-</ScenePortal>
+{#if $isHandTracking}
+  <ScenePortal>
+    <T.Group bind:ref={children}>
+      <slot name='wrist' />
+      <slot />
+    </T.Group>
+  </ScenePortal>
+{/if}

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

@@ -18,6 +18,7 @@ declare const __propDef: {
         right?: undefined;
     };
     slots: {
+        'target-ray': {};
         wrist: {};
         default: {};
     };

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 { xr } = renderer;
-const handleSessionStart = (event) => {
-  $isPresenting = true;
-  dispatch("sessionstart", { ...event, target: $session });
+let originalFrameloop = $frameloop;
+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) {
+    originalFrameloop = frameloop.current;
+    frameloop.set("always");
   } else {
-    $frameloop = originalFrameloop;
+    frameloop.set(originalFrameloop);
   }
+});
+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/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/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/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;

package/dist/internal/setupHands.js

@@ -0,0 +1,63 @@
+import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory';
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { left, right } from '../hooks/useHand';
+import { useHandTrackingState } from './useHandTrackingState';
+import { handDispatchers } from './stores';
+export const setupHands = () => {
+    const factory = new XRHandModelFactory();
+    const stores = { left, right };
+    const { xr } = useThrelte().renderer;
+    const hasHands = useHandTrackingState();
+    const handSpaces = [xr.getHand(0), xr.getHand(1)];
+    const map = new Map();
+    handSpaces.forEach((handSpace, index) => {
+        map.set(handSpace, {
+            hand: handSpace,
+            targetRay: xr.getController(index),
+            model: factory.createHandModel(handSpace, 'mesh')
+        });
+    });
+    onMount(() => {
+        const dispatch = (event) => {
+            if (!hasHands())
+                return;
+            const handEvent = event;
+            const handedness = ('handedness' in handEvent) ? handEvent.handedness : handEvent.data.handedness;
+            handDispatchers[handedness]?.current?.(event.type, event);
+        };
+        function handleConnected(event) {
+            const hand = this;
+            const { model, targetRay } = map.get(this);
+            const { data } = event;
+            const { handedness, hand: inputSource } = data;
+            stores[handedness].set({
+                hand,
+                model,
+                inputSource,
+                targetRay
+            });
+            dispatch(event);
+        }
+        const handleDisconnected = (event) => {
+            dispatch(event);
+            stores[event.data.handedness].set(undefined);
+        };
+        for (const handSpace of handSpaces) {
+            handSpace.addEventListener('connected', handleConnected);
+            handSpace.addEventListener('disconnected', handleDisconnected);
+            handSpace.addEventListener('pinchstart', dispatch);
+            handSpace.addEventListener('pinchend', dispatch);
+        }
+        return () => {
+            for (const handSpace of handSpaces) {
+                handSpace.removeEventListener('connected', handleConnected);
+                handSpace.removeEventListener('disconnected', handleDisconnected);
+                handSpace.removeEventListener('pinchstart', dispatch);
+                handSpace.removeEventListener('pinchend', dispatch);
+            }
+            stores.left.set(undefined);
+            stores.right.set(undefined);
+        };
+    });
+};

package/dist/internal/setupHeadset.d.ts

@@ -0,0 +1,3 @@
+import { Group } from 'three';
+export declare const headset: Group<import("three").Object3DEventMap>;
+export declare const setupHeadset: () => void;

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

@@ -2,9 +2,8 @@ import { Group } from 'three';
 import { useThrelte, useFrame, watch } from '@threlte/core';
 import { useXR } from '../hooks/useXR';
 export const headset = new Group();
-export const useUpdateHeadset = () => {
+export const setupHeadset = () => {
     const { renderer, camera } = useThrelte();
-    const xrState = useXR();
     const { xr } = renderer;
     const immersiveFrame = useFrame(() => {
         const space = xr.getReferenceSpace();
@@ -23,7 +22,7 @@ export const useUpdateHeadset = () => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
     }, { autostart: false, invalidate: false });
-    watch(xrState.isPresenting, (isPresenting) => {
+    watch(useXR().isPresenting, (isPresenting) => {
         if (isPresenting) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();

package/dist/internal/setupRaf.d.ts

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

package/dist/internal/{updateRaf.js → setupRaf.js}

@@ -3,7 +3,7 @@ import { set_raf } from 'svelte/internal';
 import { onDestroy } from 'svelte';
 import { watch } from '@threlte/core';
 import { session } from './stores';
-export const updateRaf = () => {
+export const setupRaf = () => {
     if (typeof window === 'undefined')
         return;
     const browserRaf = (fn) => requestAnimationFrame(fn);
@@ -11,7 +11,7 @@ export const updateRaf = () => {
     set_raf((fn) => currentRaf.fn(fn));
     watch(session, (session) => {
         if (session) {
-            currentRaf.fn = (fn) => (session.requestAnimationFrame(fn));
+            currentRaf.fn = (fn) => session.requestAnimationFrame(fn);
         }
         else {
             currentRaf.fn = browserRaf;

package/dist/internal/stores.d.ts

@@ -1,11 +1,26 @@
 /// <reference types="webxr" />
-/// <reference types="svelte" />
-export declare const initialized: import("svelte/store").Writable<boolean>;
+import type { WebXRManager, Intersection } from 'three';
 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<import("three").WebXRManager | undefined>;
+export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
+export declare const controllerDispatchers: {
+    left: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+    right: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+};
+export declare const handDispatchers: {
+    left: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+    right: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+};
 export declare const teleportState: import("@threlte/core").CurrentWritable<{
     left: {
         enabled: boolean;
@@ -17,8 +32,8 @@ export declare const teleportState: import("@threlte/core").CurrentWritable<{
     };
 }>;
 export declare const teleportIntersection: {
-    left: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
+    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: {
@@ -31,6 +46,6 @@ export declare const pointerState: import("@threlte/core").CurrentWritable<{
     };
 }>;
 export declare const pointerIntersection: {
-    left: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
+    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,36 +1,42 @@
-import { writable } from 'svelte/store';
 import { currentWritable } from '@threlte/core';
-export const initialized = writable(false);
 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 controllerDispatchers = {
+    left: currentWritable(undefined),
+    right: currentWritable(undefined)
+};
+export const handDispatchers = {
+    left: currentWritable(undefined),
+    right: currentWritable(undefined)
+};
 export const teleportState = currentWritable({
     left: {
         enabled: false,
-        hovering: false,
+        hovering: false
     },
     right: {
         enabled: false,
-        hovering: false,
-    },
+        hovering: false
+    }
 });
 export const teleportIntersection = {
     left: currentWritable(undefined),
-    right: currentWritable(undefined),
+    right: currentWritable(undefined)
 };
 export const pointerState = currentWritable({
     left: {
         enabled: false,
-        hovering: false,
+        hovering: false
     },
     right: {
         enabled: false,
-        hovering: false,
+        hovering: false
     }
 });
 export const pointerIntersection = {
     left: currentWritable(undefined),
-    right: currentWritable(undefined),
+    right: currentWritable(undefined)
 };

package/dist/internal/useHandTrackingState.js

@@ -7,7 +7,7 @@ export const useHandTrackingState = () => {
     const { xr } = useThrelte().renderer;
     return () => {
         let handTracking = false;
-        xr.getSession()?.inputSources.forEach((value) => {
+        xr.getSession()?.inputSources?.forEach((value) => {
             if (value.hand) {
                 handTracking = true;
             }

package/dist/lib/toggleXRSession.js

@@ -21,12 +21,12 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
         session.set(undefined);
         return;
     }
-    // Otherwise enter a session
-    const options = getXRSessionOptions(referenceSpaceType.current, sessionInit);
-    const nextSession = await navigator.xr.requestSession(sessionMode, options);
     if (xr.current === 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);
     session.set(nextSession);
     return nextSession;

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

@@ -1,45 +1,46 @@
+import type { Intersection as ThreeIntersection, Object3D, Vector3, Ray, Raycaster, Event } from 'three';
 import type { CurrentWritable } from '@threlte/core';
 import type { ComputeFunction } from './compute';
 export type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
-export interface Intersection extends THREE.Intersection {
+export interface Intersection extends ThreeIntersection {
     /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
+    eventObject: Object3D;
 }
 export interface IntersectionEvent extends Intersection {
     /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
+    eventObject: Object3D;
     /** An array of intersections */
     intersections: Intersection[];
     /** Normalized event coordinates */
-    pointer: THREE.Vector3;
+    pointer: Vector3;
     /** Delta between first click and this event */
     delta: number;
     /** The ray that pierced it */
-    ray: THREE.Ray;
+    ray: Ray;
     /** stopPropagation will stop underlying handlers from firing */
     stopPropagation: () => void;
     /** The original host event */
-    nativeEvent: THREE.Event | undefined;
+    nativeEvent: Event | undefined;
     /** If the event was stopped by calling stopPropagation */
     stopped: boolean;
 }
-export type FilterFunction = (items: THREE.Intersection[], state: ControlsContext, handState: HandContext) => THREE.Intersection[];
+export type FilterFunction = (items: Intersection[], state: ControlsContext, handState: HandContext) => Intersection[];
 export type ControlsContext = {
-    interactiveObjects: THREE.Object3D[];
-    raycaster: THREE.Raycaster;
+    interactiveObjects: Object3D[];
+    raycaster: Raycaster;
     compute: ComputeFunction;
     filter?: FilterFunction | undefined;
 };
 export type HandContext = {
     hand: 'left' | 'right';
     enabled: CurrentWritable<boolean>;
-    pointer: CurrentWritable<THREE.Vector3>;
+    pointer: CurrentWritable<Vector3>;
     pointerOverTarget: CurrentWritable<boolean>;
-    lastEvent: THREE.Event | undefined;
+    lastEvent: Event | undefined;
     initialClick: [x: number, y: number, z: number];
-    initialHits: THREE.Object3D[];
+    initialHits: Object3D[];
     hovered: Map<string, IntersectionEvent>;
 };
 export interface PointerCaptureTarget {

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

@@ -1,18 +1,19 @@
+import type { Mesh, Raycaster, Intersection } from 'three';
 import type { CurrentWritable, createRawEventDispatcher } from '@threlte/core';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
 export interface Context {
-    interactiveObjects: THREE.Mesh[];
-    surfaces: Map<string, THREE.Mesh>;
-    blockers: Map<string, THREE.Mesh>;
-    dispatchers: WeakMap<THREE.Mesh, ReturnType<typeof createRawEventDispatcher>>;
-    raycaster: THREE.Raycaster;
+    interactiveObjects: Mesh[];
+    surfaces: Map<string, Mesh>;
+    blockers: Map<string, Mesh>;
+    dispatchers: WeakMap<Mesh, ReturnType<typeof createRawEventDispatcher>>;
+    raycaster: Raycaster;
     compute: ComputeFunction;
 }
 export interface HandContext {
     hand: 'left' | 'right';
     enabled: CurrentWritable<boolean>;
     active: CurrentWritable<boolean>;
-    hovered: CurrentWritable<THREE.Intersection | undefined>;
+    hovered: CurrentWritable<Intersection | undefined>;
 }
 export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
 export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;

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

@@ -1,6 +1,7 @@
+import type { Mesh } from 'three';
 export declare const useTeleportControls: () => {
-    addSurface: (mesh: THREE.Mesh) => void;
-    removeSurface: (mesh: THREE.Mesh) => void;
-    addBlocker: (mesh: THREE.Mesh) => void;
-    removeBlocker: (mesh: THREE.Mesh) => void;
+    addSurface: (mesh: Mesh) => void;
+    removeSurface: (mesh: Mesh) => void;
+    addBlocker: (mesh: Mesh) => void;
+    removeBlocker: (mesh: Mesh) => void;
 };

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

@@ -14,6 +14,6 @@ export interface TeleportControlsOptions {
 }
 export declare const teleportControls: (handedness: 'left' | 'right', options?: TeleportControlsOptions) => {
     enabled: import("@threlte/core").CurrentWritable<boolean>;
-    hovered: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
+    hovered: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
     active: import("@threlte/core").CurrentWritable<boolean>;
 };

package/dist/types.d.ts

@@ -1,32 +1,34 @@
 /// <reference types="webxr" />
+import type { Event, Group, XRTargetRaySpace, XRGripSpace, XRHandSpace } from 'three';
 import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerModelFactory';
 import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory';
 export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
 export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
 export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
-export type XRSessionEvent<Type = XRSessionEventType> = THREE.Event & {
+export type XRSessionEvent<Type = XRSessionEventType> = Event & {
     type: Type;
     target: XRSession;
 };
-export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
+export type XRControllerEvent<Type = XRControllerEventType> = Event & {
     type: Type;
-    target: THREE.Group;
+    target: Group;
     data: XRInputSource;
 };
 export type XRController = {
-    targetRay: THREE.XRTargetRaySpace;
-    grip: THREE.XRGripSpace;
-    model?: XRControllerModel;
+    targetRay: XRTargetRaySpace;
+    grip: XRGripSpace;
+    model?: XRControllerModel | undefined;
     inputSource: XRInputSource;
 };
 export type XRHand = {
-    hand: THREE.XRHandSpace;
+    targetRay: XRTargetRaySpace;
+    hand: XRHandSpace;
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
 export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
-    target: THREE.XRHandSpace;
+    target: XRHandSpace;
     data: XRInputSource;
 } : Type extends 'pinchstart' | 'pinchend' ? {
     type: Type;

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.22.3",
     "@sveltejs/package": "^2.2.0",
-    "@types/three": "^0.155.1",
+    "@types/three": "^0.158.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",
     "publint": "^0.1.16",
     "svelte": "^4.1.1",
     "svelte-check": "^3.4.6",
-    "three": "^0.154.0",
+    "three": "^0.158.0",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-mkcert": "^1.16.0",
-    "@threlte/core": "6.1.0"
+    "@threlte/core": "6.1.1"
   },
   "peerDependencies": {
     "svelte": ">=4",

package/dist/internal/headset.d.ts

@@ -1,3 +0,0 @@
-import { Group } from 'three';
-export declare const headset: Group;
-export declare const useUpdateHeadset: () => void;

package/dist/internal/updateRaf.d.ts

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