@threlte/xr 0.0.4 → 0.0.5

package/dist/components/Controller.svelte

@@ -9,13 +9,8 @@ import { onDestroy } from "svelte";
 import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
 import ShortRay from "./ShortRay.svelte";
 import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
-import { useControllerEvent } from "../hooks/useEvent";
-import { fire } from "../internal/events";
-import {
-  activeTeleportController,
-  isHandTracking,
-  pendingTeleportDestination
-} from "../internal/stores";
+import { activeTeleportController, pendingTeleportDestination, isHandTracking } from "../internal/stores";
+import { useHandTrackingState } from "../internal/useHandTrackingState";
 const factory = new XRControllerModelFactory();
 const stores = {
   left: leftStore,
@@ -33,35 +28,38 @@ const events = [
 const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>export let left = false;
-export let right = false;
+<script>export let left = void 0;
+export let right = void 0;
+export let hand = void 0;
 $:
-  if (left && right) {
-    throw new Error("A <Controller> component can only specify one hand.");
-  }
-$:
-  if (!left && !right) {
-    throw new Error("A <Controller> component must specify a hand.");
-  }
-$:
-  handedness = left ? "left" : "right";
+  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 data = event.data;
   const targetData = eventMap.get(event.target);
-  if (data.handedness !== handedness || !targetData)
+  if (event.data.handedness !== handedness || !targetData)
     return;
-  stores[data.handedness].set({ ...targetData, inputSource: data });
-  fire("connected", event, { input: "controller" });
+  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[event.data.handedness].set(void 0);
-  fire("disconnected", event, { input: "controller" });
+  stores[handedness].set(void 0);
+  if (!$isHandTracking) {
+    dispatch("disconnected", event);
+  }
+  events.forEach((name) => event.target.removeEventListener(name, handleEvent));
 };
-const handleEvent = (event) => fire(event.type, event);
 for (const index of [0, 1]) {
   const controller = xr.getController(index);
   const grip2 = xr.getControllerGrip(index);
@@ -69,28 +67,24 @@ for (const index of [0, 1]) {
   eventMap.set(controller, { targetRay: controller, model: model2, grip: grip2 });
   controller.addEventListener("connected", handleConnected);
   controller.addEventListener("disconnected", handleDisconnected);
-  events.forEach((name) => controller.addEventListener(name, handleEvent));
 }
 $:
-  store = left ? stores.left : stores.right;
+  store = stores[handedness];
 $:
   grip = $store?.grip;
 $:
   targetRay = $store?.targetRay;
 $:
   model = $store?.model;
-for (const type of ["connected", "disconnected", ...events]) {
-  useControllerEvent(type, (event) => dispatch(type, event), {
-    handedness: left ? "left" : "right"
-  });
-}
 onDestroy(() => {
   for (const index of [0, 1]) {
-    const controller = xr.getController(index);
-    controller.removeEventListener("connected", handleConnected);
-    controller.removeEventListener("disconnected", handleDisconnected);
-    events.forEach((name) => controller.removeEventListener(name, handleEvent));
+    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);
 });
 </script>
 

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

@@ -2,9 +2,20 @@ import { SvelteComponent } from "svelte";
 import type { XRControllerEvent } from '../types';
 declare const __propDef: {
     props: {
+        /** Whether the controller should be matched with the left hand. */
         left: true;
+        right?: undefined;
+        hand?: undefined;
     } | {
+        /** Whether the controller should be matched with the right hand. */
         right: true;
+        left?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the controller should be matched with the left or right hand. */
+        hand: 'left' | 'right';
+        left?: undefined;
+        right?: undefined;
     };
     slots: {
         default: {};

package/dist/components/Hand.svelte

@@ -1,8 +1,8 @@
 <script context='module'>import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
 import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
-import { fire } from "../internal/events";
+import { isHandTracking } from "../internal/stores";
+import { useHandTrackingState } from "../internal/useHandTrackingState";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-import { useHandEvent } from "../hooks/useEvent";
 import { onDestroy } from "svelte";
 const factory = new XRHandModelFactory();
 const stores = {
@@ -12,48 +12,38 @@ const stores = {
 const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>export let left = false;
-export let right = false;
+<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();
 $:
-  if (left && right) {
-    throw new Error("A <Hand> component can only specify one hand.");
-  }
-$:
-  if (!left && !right) {
-    throw new Error("A <Hand> component must specify a hand.");
-  }
-$:
-  handedness = left ? "left" : "right";
+  handedness = left ? "left" : right ? "right" : hand;
 const handleConnected = (event) => {
-  const inputSource2 = event.data.hand;
-  const eventHandedness = event.data.handedness;
-  if (eventHandedness !== handedness)
+  if (event.data.handedness !== handedness)
     return;
-  stores[handedness].set({ ...eventMap.get(event.target), inputSource: inputSource2 });
-  fire("connected", event, { input: "hand" });
+  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) => {
-  const eventHandedness = event.data.handedness;
-  if (eventHandedness !== handedness)
+  if (event.data.handedness !== handedness)
     return;
   stores[handedness].set(void 0);
-  fire("disconnected", event, { input: "hand" });
+  if ($isHandTracking) {
+    dispatch("disconnected", event);
+  }
+  event.target.removeEventListener("pinchstart", handlePinchEvent);
+  event.target.removeEventListener("pinchend", handlePinchEvent);
 };
 const handlePinchEvent = (event) => {
-  fire(event.type, event);
+  dispatch(event.type, event);
 };
-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);
-  hand2.addEventListener("pinchstart", handlePinchEvent);
-  hand2.addEventListener("pinchend", handlePinchEvent);
-}
 let children;
 const { start, stop } = useFrame(() => {
   const frame = xr.getFrame();
@@ -74,32 +64,30 @@ $:
     stop();
   }
 $:
-  store = left ? stores.left : stores.right;
+  store = stores[handedness];
 $:
   hand = $store?.hand;
 $:
   inputSource = $store?.inputSource;
 $:
   model = $store?.model;
-const handEvents = [
-  "connected",
-  "disconnected",
-  "pinchstart",
-  "pinchend"
-];
-for (const name of handEvents) {
-  useHandEvent(name, (event) => dispatch(name, event), {
-    handedness: left ? "left" : "right"
-  });
+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 hand2 = xr.getHand(index);
-    hand2.removeEventListener("connected", handleConnected);
-    hand2.removeEventListener("disconnected", handleDisconnected);
-    hand2.removeEventListener("pinchstart", handlePinchEvent);
-    hand2.removeEventListener("pinchend", handlePinchEvent);
+    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>
 

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

@@ -2,18 +2,30 @@ import { SvelteComponent } from "svelte";
 import type { XRHandEvent } from '../types';
 declare const __propDef: {
     props: {
-        /** Whether the XRHand should be matched with the left hand. */ left?: boolean;
-        /** Whether the XRHand should be matched with the right hand. */ right?: boolean;
+        /** Whether the XRHand should be matched with the left hand. */
+        left: true;
+        right?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the XRHand should be matched with the right hand. */
+        right: true;
+        left?: undefined;
+        hand?: undefined;
+    } | {
+        /** Whether the XRHand should be matched with the left or right hand. */
+        hand: 'left' | 'right';
+        left?: undefined;
+        right?: undefined;
     };
     slots: {
         wrist: {};
         default: {};
     };
     events: {
-        connected: XRHandEvent<'connected', null>;
-        disconnected: XRHandEvent<'disconnected', null>;
-        pinchstart: XRHandEvent<'pinchstart', THREE.XRHandSpace>;
-        pinchend: XRHandEvent<'pinchend', THREE.XRHandSpace>;
+        connected: XRHandEvent<'connected'>;
+        disconnected: XRHandEvent<'disconnected'>;
+        pinchstart: XRHandEvent<'pinchstart'>;
+        pinchend: XRHandEvent<'pinchend'>;
     };
 };
 export type HandProps = typeof __propDef.props;

package/dist/components/Headset.svelte

@@ -1,21 +1,37 @@
 <script>import { T, HierarchicalObject, useFrame, useThrelte } from "@threlte/core";
 import { Group } from "three";
-import { useBaseReferenceSpace } from "../internal/useBaseReferenceSpace";
-const { renderer, scene } = useThrelte();
+import { useXR } from "../hooks";
+const { isPresenting } = useXR();
+const { renderer, scene, camera } = useThrelte();
+const { xr } = renderer;
 const group = new Group();
-const baseReferenceSpace = useBaseReferenceSpace();
-useFrame(() => {
-  const space = baseReferenceSpace.current;
+const immersiveFrame = useFrame(() => {
+  const space = xr.getReferenceSpace();
   if (space === null)
     return;
-  const frame = renderer.xr.getFrame();
-  const pose = frame.getViewerPose(space);
+  const pose = xr.getFrame().getViewerPose(space);
   if (pose === void 0)
     return;
   const { position, orientation } = pose.transform;
   group.position.set(position.x, position.y, position.z);
   group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
-});
+}, { autostart: false });
+$:
+  if ($isPresenting) {
+    immersiveFrame.start();
+  } else {
+    immersiveFrame.stop();
+  }
+const nonImmersiveFrame = useFrame(() => {
+  group.position.copy(camera.current.position);
+  group.quaternion.copy(camera.current.quaternion);
+}, { autostart: false });
+$:
+  if ($isPresenting === false) {
+    nonImmersiveFrame.start();
+  } else {
+    nonImmersiveFrame.stop();
+  }
 </script>
 
 <HierarchicalObject

package/dist/components/XR.svelte

@@ -46,7 +46,7 @@ const handleVisibilityChange = (event) => {
   dispatch("visibilitychange", { ...event, target: $session });
 };
 const handleInputSourcesChange = (event) => {
-  $isHandTracking = Object.values($session.inputSources).some((source) => source.hand);
+  $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand);
   dispatch("inputsourceschange", { ...event, target: $session });
 };
 const handleFramerateChange = (event) => {

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useController, useGamepad } from './useController';
-export { useControllerEvent, useHandEvent } from './useEvent';
 export { useHand } from './useHand';
 export { useHandJoint } from './useHandJoint';
 export { useHitTest } from './useHitTest';

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
 export { useController, useGamepad } from './useController';
-export { useControllerEvent, useHandEvent } from './useEvent';
 export { useHand } from './useHand';
 export { useHandJoint } from './useHandJoint';
 export { useHitTest } from './useHitTest';

package/dist/hooks/useTeleport.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 /**
- * Returns a callback to teleport the player to a position.
+ * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
  * @example
  * const teleport = useTeleport()
@@ -9,5 +9,9 @@ import * as THREE from 'three';
  * vec3.set(5, 0, 5)
  *
  * teleport(vec3)
+ *
+ * const quat = new THREE.Quaternion()
+ *
+ * teleport(vec3, quat)
  */
-export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, direction?: THREE.Quaternion) => void;
+export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, orientation?: THREE.Quaternion) => void;

package/dist/hooks/useTeleport.js

@@ -1,10 +1,9 @@
 import * as THREE from 'three';
 import { useThrelte } from '@threlte/core';
-import { useBaseReferenceSpace } from '../internal/useBaseReferenceSpace';
 const quaternion = new THREE.Quaternion();
 const offset = { x: 0, y: 0, z: 0 };
 /**
- * Returns a callback to teleport the player to a position.
+ * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
  * @example
  * const teleport = useTeleport()
@@ -13,36 +12,37 @@ const offset = { x: 0, y: 0, z: 0 };
  * vec3.set(5, 0, 5)
  *
  * teleport(vec3)
+ *
+ * const quat = new THREE.Quaternion()
+ *
+ * teleport(vec3, quat)
  */
 export const useTeleport = () => {
     const { xr } = useThrelte().renderer;
-    const baseReferenceSpace = useBaseReferenceSpace();
+    let space = xr.getReferenceSpace();
     /**
-     * Teleports a player to a position - and optionally a direction.
+     * Teleports a player from the world origin to a position and optional orientation.
      */
-    return (position, direction = quaternion) => {
-        const space = baseReferenceSpace.current;
-        if (space === null || space === undefined)
+    return (position, orientation = quaternion) => {
+        space ??= xr.getReferenceSpace();
+        if (space === null)
             return;
-        let x = 0, y = 0, z = 0;
         if (Array.isArray(position)) {
-            ;
-            [x, y, z] = position;
+            offset.x = -position[0];
+            offset.y = -position[1];
+            offset.z = -position[2];
         }
         else {
-            x = position.x;
-            y = position.y;
-            z = position.z;
+            offset.x = -position.x;
+            offset.y = -position.y;
+            offset.z = -position.z;
         }
-        offset.x = -x;
-        offset.y = -y;
-        offset.z = -z;
-        const pose = xr.getFrame().getViewerPose(space);
+        const pose = xr.getFrame()?.getViewerPose(space);
         if (pose !== undefined) {
             offset.x += pose.transform.position.x;
             offset.z += pose.transform.position.z;
         }
-        const teleportOffset = new XRRigidTransform(offset, direction);
+        const teleportOffset = new XRRigidTransform(offset, orientation);
         xr.setReferenceSpace(space.getOffsetReferenceSpace(teleportOffset));
     };
 };

package/dist/internal/useHandTrackingState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * There are some cases where we need to know if hand tracking is now active before an input source
+ * connection or disconnection event. This is the way to do that.
+ */
+export declare const useHandTrackingState: () => () => boolean;

package/dist/internal/useHandTrackingState.js

@@ -0,0 +1,17 @@
+import { useThrelte } from '@threlte/core';
+/**
+ * There are some cases where we need to know if hand tracking is now active before an input source
+ * connection or disconnection event. This is the way to do that.
+ */
+export const useHandTrackingState = () => {
+    const { xr } = useThrelte().renderer;
+    return () => {
+        let handTracking = false;
+        xr.getSession()?.inputSources.forEach((value) => {
+            if (value.hand) {
+                handTracking = true;
+            }
+        });
+        return handTracking;
+    };
+};

package/dist/types.d.ts

@@ -10,8 +10,8 @@ export type XRSessionEvent<Type = XRSessionEventType> = THREE.Event & {
 };
 export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
     type: Type;
-    target: any;
-    data?: XRInputSource;
+    target: THREE.Group;
+    data: XRInputSource;
 };
 export type XRController = {
     targetRay: THREE.XRTargetRaySpace;
@@ -24,8 +24,13 @@ export type XRHand = {
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
-export type XRHandEvent<Type = XRHandEventType, Target = null | THREE.XRHandSpace> = THREE.Event & {
+export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
-    target: Target;
-};
+    target: THREE.XRHandSpace;
+    data: XRInputSource;
+} : Type extends 'pinchstart' | 'pinchend' ? {
+    type: Type;
+    handedness: 'left' | 'right';
+    target: null;
+} : never;
 export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {

package/dist/components/Hands.svelte

@@ -1,35 +0,0 @@
-<!--
-  @component
-  Creates XRHand inputs for devices that allow hand tracking.
--->
-<script>import { createRawEventDispatcher } from "@threlte/core";
-import Hand from "./Hand.svelte";
-export let profile = "mesh";
-const dispatch = createRawEventDispatcher();
-const handedness = [void 0, void 0];
-const setHandedness = (index, event) => {
-  if (event.data) {
-    handedness[index] = event.data.handedness;
-  }
-};
-</script>
-
-{#each [0, 1] as index (index)}
-  <Hand
-    {index}
-    {profile}
-    on:connected={(event) => {
-      setHandedness(index, event)
-      dispatch(event.type, event)
-    }}
-    on:disconnected
-    on:pinchstart
-    on:pinchend
-  >
-    {#if handedness[index] === 'left'}
-      <slot name='left' />
-    {:else if handedness[index] === 'right'}
-      <slot name='right' />
-    {/if}
-  </Hand>
-{/each}

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

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { XRHandEvent } from '../types';
-declare const __propDef: {
-    props: {
-        profile?: 'mesh' | 'spheres' | 'boxes' | 'none';
-    };
-    slots: {
-        left: {};
-        right: {};
-    };
-    events: {
-        connected: XRHandEvent<'connected', null>;
-        disconnected: XRHandEvent<'disconnected', null>;
-        pinchstart: XRHandEvent<'pinchstart', THREE.XRHandSpace>;
-        pinchend: XRHandEvent<'pinchend', THREE.XRHandSpace>;
-    };
-};
-export type HandsProps = typeof __propDef.props;
-export type HandsEvents = typeof __propDef.events;
-export type HandsSlots = typeof __propDef.slots;
-/** Creates XRHand inputs for devices that allow hand tracking. */
-export default class Hands extends SvelteComponent<HandsProps, HandsEvents, HandsSlots> {
-}
-export {};

package/dist/hooks/useEvent.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="webxr" />
-import type { XRControllerEvent, XRControllerEventType, XRHandEvent, XRHandEventType } from '../types';
-/**
- * Adds listeners for controller events.
- */
-export declare const useControllerEvent: (event: XRControllerEventType, handler: (event: XRControllerEvent) => void, { handedness }?: {
-    handedness?: XRHandedness;
-}) => void;
-/**
- * Adds listeners for hand events.
- */
-export declare const useHandEvent: (event: XRHandEventType, handler: (event: XRHandEvent<XRHandEventType, null | THREE.XRHandSpace>) => void, { handedness }?: {
-    handedness?: 'left' | 'right';
-}) => void;

package/dist/hooks/useEvent.js

@@ -1,33 +0,0 @@
-import { onDestroy } from 'svelte';
-import { off, on } from '../internal/events';
-/**
- * Adds listeners for controller events.
- */
-export const useControllerEvent = (event, handler, { handedness } = {}) => {
-    const listener = (event, metadata) => {
-        if (metadata?.input === 'hand')
-            return;
-        if (handedness !== undefined && event.data?.handedness !== handedness) {
-            return;
-        }
-        handler(event);
-    };
-    on(event, listener);
-    onDestroy(() => off(event, listener));
-};
-/**
- * Adds listeners for hand events.
- */
-export const useHandEvent = (event, handler, { handedness } = {}) => {
-    const listener = (event, metadata) => {
-        if (metadata?.input === 'controller')
-            return;
-        const eventHandedness = event.handedness ?? event.data?.handedness;
-        if (handedness !== undefined && eventHandedness !== handedness) {
-            return;
-        }
-        handler(event);
-    };
-    on(event, listener);
-    onDestroy(() => off(event, listener));
-};

package/dist/internal/events.d.ts

@@ -1,5 +0,0 @@
-type Callback<T = any, O = any> = (event: T, metadata?: O) => void;
-export declare const on: <T, O = any>(name: string, cb: Callback<T, O>) => (() => void);
-export declare const off: <T>(name: string, cb: Callback<T, any>) => void;
-export declare const fire: <T, O = any>(name: string, payload: T, metadata?: O | undefined) => void;
-export {};

package/dist/internal/events.js

@@ -1,26 +0,0 @@
-const events = {};
-export const on = (name, cb) => {
-    const fns = events[name];
-    if (fns === undefined) {
-        events[name] = [cb];
-    }
-    else {
-        fns.push(cb);
-    }
-    return () => off(name, cb);
-};
-export const off = (name, cb) => {
-    const arr = events[name];
-    if (arr === undefined)
-        return;
-    arr.splice(arr.indexOf(cb), 1);
-    if (arr.length === 0)
-        delete events[name];
-};
-export const fire = (name, payload, metadata) => {
-    const fns = events[name];
-    if (fns === undefined)
-        return;
-    for (const fn of fns)
-        fn(payload, metadata);
-};

package/dist/internal/useBaseReferenceSpace.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="webxr" />
-/**
- * Provides a reference space of the world origin,
- * useful for determining offsets using XRReferenceSpace
- */
-export declare const useBaseReferenceSpace: () => import("@threlte/core").CurrentWritable<XRReferenceSpace | null>;

package/dist/internal/useBaseReferenceSpace.js

@@ -1,19 +0,0 @@
-import { onDestroy } from 'svelte';
-import { useThrelte, currentWritable } from '@threlte/core';
-import { session } from './stores';
-/**
- * Provides a reference space of the world origin,
- * useful for determining offsets using XRReferenceSpace
- */
-export const useBaseReferenceSpace = () => {
-    const { xr } = useThrelte().renderer;
-    const baseReferenceSpace = currentWritable(null);
-    onDestroy(session.subscribe((value) => {
-        if (value === undefined) {
-            baseReferenceSpace.set(null);
-            return;
-        }
-        baseReferenceSpace.set(xr.getReferenceSpace());
-    }));
-    return baseReferenceSpace;
-};