@threlte/xr 0.0.11 → 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,96 +4,48 @@
 <script
  
   context="module"
->import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
-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 { activeTeleportController, pendingTeleportDestination, isHandTracking } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
-const factory = new XRControllerModelFactory();
+>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 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 controller = xr.getController(index);
-  const grip2 = xr.getControllerGrip(index);
-  const model2 = factory.createControllerModel(grip2);
-  eventMap.set(controller, { targetRay: controller, model: model2, grip: grip2 });
-  controller.addEventListener("connected", handleConnected);
-  controller.addEventListener("disconnected", handleDisconnected);
-}
+const handedness = writable(left ? "left" : right ? "right" : hand);
 $:
-  store = stores[handedness];
+  handedness.set(left ? "left" : right ? "right" : hand);
+controllerDispatchers[$handedness].set(dispatch);
+$:
+  controllerDispatchers[$handedness].set(dispatch);
+$:
+  store = stores[$handedness];
 $:
   grip = $store?.grip;
 $:
   targetRay = $store?.targetRay;
 $:
   model = $store?.model;
-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);
-});
+$:
+  hasPointerControls = $pointerState[$handedness].enabled;
+$:
+  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>
@@ -103,16 +55,54 @@ onDestroy(() => {
   {/if}
 
   {#if targetRay}
-    <T
-      is={targetRay}
-      name="XR controller {handedness}"
-      visible={!$isHandTracking}
-    >
+    <T is={targetRay}>
       <slot name="target-ray" />
-      <ShortRay
-        visible={$activeTeleportController === targetRay &&
-          $pendingTeleportDestination === undefined}
-      />
+
+      {#if hasPointerControls || hasTeleportControls}
+        {#if $$slots['pointer-ray']}
+          <ShortRay handedness={$handedness}>
+            <slot name="pointer-ray" />
+          </ShortRay>
+        {:else}
+          <ShortRay handedness={$handedness} />
+        {/if}
+      {/if}
     </T>
   {/if}
 {/if}
+
+<ScenePortal>
+  {#if hasPointerControls}
+    {#if $$slots['pointer-cursor']}
+      <PointerCursor handedness={$handedness}>
+        <slot name="pointer-cursor" />
+      </PointerCursor>
+    {:else}
+      <PointerCursor handedness={$handedness} />
+    {/if}
+  {/if}
+
+  {#if hasTeleportControls && targetRay !== undefined}
+    {#if $$slots['teleport-ray']}
+      <TeleportRay
+        {targetRay}
+        handedness={$handedness}
+      >
+        <slot name="teleport-ray" />
+      </TeleportRay>
+    {:else}
+      <TeleportRay
+        {targetRay}
+        handedness={$handedness}
+      />
+    {/if}
+
+    {#if $$slots['teleport-ray']}
+      <TeleportCursor handedness={$handedness}>
+        <slot name="teleport-cursor" />
+      </TeleportCursor>
+    {:else}
+      <TeleportCursor handedness={$handedness} />
+    {/if}
+  {/if}
+</ScenePortal>

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

@@ -21,6 +21,10 @@ declare const __propDef: {
         default: {};
         grip: {};
         'target-ray': {};
+        'pointer-ray': {};
+        'pointer-cursor': {};
+        'teleport-ray': {};
+        'teleport-cursor': {};
     };
     events: {
         connected: XRControllerEvent<'connected'>;

package/dist/components/Hand.svelte

@@ -1,49 +1,26 @@
-<script context='module'>import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
-import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
-import { isHandTracking } from "../internal/stores";
-import { useHandTrackingState } from "../internal/useHandTrackingState";
+<script context='module'>import { Group } from "three";
+import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
+import { isHandTracking, handDispatchers } from "../internal/stores";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-import { onDestroy } from "svelte";
-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>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();
@@ -58,48 +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}
+
+{#if $isHandTracking}
+  <ScenePortal>
     <T.Group bind:ref={children}>
       <slot name='wrist' />
       <slot />
     </T.Group>
-  </T>
+  </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/Headset.svelte

@@ -1,15 +1,12 @@
 
-<script>import { T, HierarchicalObject, useThrelte } from "@threlte/core";
+<script>import { T } from "@threlte/core";
 import { useHeadset } from "../hooks/useHeadset";
-const { scene } = useThrelte();
+import ScenePortal from "./internal/ScenePortal.svelte";
 const headset = useHeadset();
 </script>
 
-<HierarchicalObject
-  onChildMount={(child) => { scene.add(child) }}
-  onChildDestroy={(child) => { scene.remove(child) }}
->
+<ScenePortal>
 	<T is={headset}>
 		<slot />
 	</T>
-</HierarchicalObject>
+</ScenePortal>

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/Cursor.svelte

@@ -0,0 +1,51 @@
+<script>import { Color, DoubleSide, RawShaderMaterial } from "three";
+import { T } from "@threlte/core";
+export let color = new Color("white");
+export let size = 0.03;
+export let thickness = 0.035;
+const vertexShader = `
+    uniform mat4 projectionMatrix;
+    uniform mat4 modelViewMatrix;
+    attribute vec2 uv;
+    attribute vec3 position;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `;
+const fragmentShader = `
+    precision mediump float;
+    uniform float thickness;
+    uniform vec3 color;
+    varying vec2 vUv;
+    void main() {
+      float radius = 0.1;
+      float dist = length(vUv - vec2(0.5));
+      float alpha = 1.0 - step(thickness, abs(distance(vUv, vec2(0.5)) - 0.25));
+      gl_FragColor = vec4(color, alpha);
+    }
+  `;
+const shaderMaterial = new RawShaderMaterial({
+  vertexShader,
+  fragmentShader,
+  uniforms: {
+    thickness: { value: thickness },
+    color: { value: color }
+  },
+  side: DoubleSide,
+  transparent: true,
+  depthTest: false
+});
+$:
+  shaderMaterial.uniforms.thickness.value = thickness;
+$:
+  shaderMaterial.uniforms.color.value = color;
+</script>
+
+<T.Mesh
+  scale={size}
+>
+  <T.PlaneGeometry />
+  <T is={shaderMaterial} />
+</T.Mesh>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type ColorRepresentation } from 'three';
+declare const __propDef: {
+    props: {
+        color?: ColorRepresentation;
+        size?: number;
+        thickness?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CursorProps = typeof __propDef.props;
+export type CursorEvents = typeof __propDef.events;
+export type CursorSlots = typeof __propDef.slots;
+export default class Cursor extends SvelteComponent<CursorProps, CursorEvents, CursorSlots> {
+}
+export {};

package/dist/components/internal/PointerCursor.svelte

@@ -0,0 +1,46 @@
+<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;
+$:
+  intersection = pointerIntersection[handedness];
+const { start, stop } = useFrame(
+  () => {
+    if (intersection.current === void 0)
+      return;
+    const { point, face, object } = intersection.current;
+    ref.position.lerp(point, 0.4);
+    if (face) {
+      normalMatrix.getNormalMatrix(object.matrixWorld);
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize();
+      ref.lookAt(vec3.addVectors(point, worldNormal));
+    }
+  },
+  {
+    autostart: false
+  }
+);
+$:
+  if (hovering) {
+    ref.position.copy(intersection.current.point);
+    start();
+  } else {
+    stop();
+  }
+</script>
+
+<T
+  is={ref}
+  visible={hovering}
+>
+  <slot>
+    <Cursor />
+  </slot>
+</T>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        handedness: 'left' | 'right';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PointerCursorProps = typeof __propDef.props;
+export type PointerCursorEvents = typeof __propDef.events;
+export type PointerCursorSlots = typeof __propDef.slots;
+export default class PointerCursor extends SvelteComponent<PointerCursorProps, PointerCursorEvents, PointerCursorSlots> {
+}
+export {};

package/dist/components/internal/ScenePortal.svelte

@@ -0,0 +1,10 @@
+<script>import { useThrelte, HierarchicalObject } from "@threlte/core";
+const { scene } = useThrelte();
+</script>
+
+<HierarchicalObject
+  onChildMount={(child) => scene.add(child)}
+  onChildDestroy={(child) => scene.remove(child)}
+>
+  <slot />
+</HierarchicalObject>