@threlte/xr 0.0.11 → 0.0.12

package/dist/components/Controller.svelte

@@ -4,13 +4,17 @@
 <script
  
   context="module"
->import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
+>import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
 import { onDestroy } from "svelte";
-import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
-import ShortRay from "./ShortRay.svelte";
+import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
 import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
-import { activeTeleportController, pendingTeleportDestination, isHandTracking } from "../internal/stores";
+import { isHandTracking, pointerState, teleportState } from "../internal/stores";
 import { useHandTrackingState } from "../internal/useHandTrackingState";
+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,
@@ -61,12 +65,12 @@ const handleDisconnected = (event) => {
   events.forEach((name) => event.target.removeEventListener(name, handleEvent));
 };
 for (const index of [0, 1]) {
-  const controller = xr.getController(index);
+  const targetRay2 = 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);
+  eventMap.set(targetRay2, { targetRay: targetRay2, model: model2, grip: grip2 });
+  targetRay2.addEventListener("connected", handleConnected);
+  targetRay2.addEventListener("disconnected", handleDisconnected);
 }
 $:
   store = stores[handedness];
@@ -76,6 +80,10 @@ $:
   targetRay = $store?.targetRay;
 $:
   model = $store?.model;
+$:
+  hasPointerControls = $pointerState[handedness].enabled;
+$:
+  hasTeleportControls = $teleportState[handedness].enabled;
 onDestroy(() => {
   for (const index of [0, 1]) {
     const controller2 = xr.getController(index);
@@ -106,13 +114,54 @@ onDestroy(() => {
     <T
       is={targetRay}
       name="XR controller {handedness}"
-      visible={!$isHandTracking}
     >
       <slot name="target-ray" />
-      <ShortRay
-        visible={$activeTeleportController === targetRay &&
-          $pendingTeleportDestination === undefined}
-      />
+
+      {#if hasPointerControls || hasTeleportControls}
+        {#if $$slots['pointer-ray']}
+          <ShortRay {handedness}>
+            <slot name="pointer-ray" />
+          </ShortRay>
+        {:else}
+          <ShortRay {handedness} />
+        {/if}
+      {/if}
     </T>
   {/if}
 {/if}
+
+<ScenePortal>
+  {#if hasPointerControls}
+    {#if $$slots['pointer-cursor']}
+      <PointerCursor {handedness}>
+        <slot name="pointer-cursor" />
+      </PointerCursor>
+    {:else}
+      <PointerCursor {handedness} />
+    {/if}
+  {/if}
+
+  {#if hasTeleportControls && targetRay !== undefined}
+    {#if $$slots['teleport-ray']}
+      <TeleportRay
+        {targetRay}
+        {handedness}
+      >
+        <slot name="teleport-ray" />
+      </TeleportRay>
+    {:else}
+      <TeleportRay
+        {targetRay}
+        {handedness}
+      />
+    {/if}
+
+    {#if $$slots['teleport-ray']}
+      <TeleportCursor {handedness}>
+        <slot name="teleport-cursor" />
+      </TeleportCursor>
+    {:else}
+      <TeleportCursor {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,9 +1,9 @@
-<script context='module'>import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
+<script context='module'>import { onDestroy } from "svelte";
 import { XRHandModelFactory } from "three/examples/jsm/webxr/XRHandModelFactory";
+import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
 import { isHandTracking } from "../internal/stores";
 import { useHandTrackingState } from "../internal/useHandTrackingState";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
-import { onDestroy } from "svelte";
 const factory = new XRHandModelFactory();
 const stores = {
   left: leftStore,
@@ -12,7 +12,8 @@ const stores = {
 const eventMap = /* @__PURE__ */ new WeakMap();
 </script>
 
-<script>export let left = void 0;
+<script>import ScenePortal from "./internal/ScenePortal.svelte";
+export let left = void 0;
 export let right = void 0;
 export let hand = void 0;
 const handTrackingNow = useHandTrackingState();
@@ -97,9 +98,12 @@ onDestroy(() => {
     {#if $$slots.default === undefined}
       <T is={model} />
     {/if}
-    <T.Group bind:ref={children}>
-      <slot name='wrist' />
-      <slot />
-    </T.Group>
   </T>
 {/if}
+
+<ScenePortal>
+  <T.Group bind:ref={children}>
+    <slot name='wrist' />
+    <slot />
+  </T.Group>
+</ScenePortal>

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/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,42 @@
+<script>import { Group, Vector3 } 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();
+$:
+  hovering = $pointerState[handedness].hovering;
+$:
+  intersection = pointerIntersection[handedness];
+const { start, stop } = useFrame(
+  () => {
+    if (intersection.current === void 0)
+      return;
+    const { point, face } = intersection.current;
+    ref.position.lerp(point, 0.4);
+    if (face) {
+      ref.lookAt(vec3.addVectors(point, face.normal));
+    }
+  },
+  {
+    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>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ScenePortalProps = typeof __propDef.props;
+export type ScenePortalEvents = typeof __propDef.events;
+export type ScenePortalSlots = typeof __propDef.slots;
+export default class ScenePortal extends SvelteComponent<ScenePortalProps, ScenePortalEvents, ScenePortalSlots> {
+}
+export {};

package/dist/components/internal/ShortRay.svelte

@@ -0,0 +1,45 @@
+<script>import { T } from "@threlte/core";
+import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
+export let handedness;
+$:
+  hovering = $teleportState[handedness].hovering;
+$:
+  intersection = teleportIntersection[handedness];
+$:
+  visible = $pointerState[handedness].enabled || hovering && $intersection === void 0;
+</script>
+
+<T.Group {visible}>
+  <slot>
+    <T.Mesh
+      rotation.x={-Math.PI / 2}
+      position.z={-0.1}
+    >
+      <T.CylinderGeometry
+        args={[0.002, 0.002, 0.2, 16, 1, false]}
+      />
+      <T.RawShaderMaterial
+        transparent
+        vertexShader={`
+          uniform mat4 modelViewMatrix;
+          uniform mat4 projectionMatrix;
+          attribute vec2 uv;
+          attribute vec3 position;
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+        `}
+        fragmentShader={`
+          precision mediump float;
+          varying vec2 vUv;
+          void main() {
+            gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
+          }
+        `}
+      />
+    </T.Mesh>
+  </slot>
+</T.Group>
+

package/dist/components/{ShortRay.svelte.d.ts → internal/ShortRay.svelte.d.ts}

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        handedness: 'left' | 'right';
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type ShortRayProps = typeof __propDef.props;
 export type ShortRayEvents = typeof __propDef.events;

package/dist/components/internal/TeleportCursor.svelte

@@ -0,0 +1,47 @@
+<script>import { spring } from "svelte/motion";
+import { Group, 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();
+$:
+  intersection = teleportIntersection[handedness];
+const { start, stop } = useFrame(
+  () => {
+    if (intersection.current === void 0)
+      return;
+    const { point, face } = intersection.current;
+    ref.position.lerp(point, 0.4);
+    if (face) {
+      ref.lookAt(vec3.addVectors(point, face.normal));
+    }
+  },
+  {
+    autostart: false
+  }
+);
+const size = spring(0.1, { stiffness: 0.2 });
+$:
+  if ($intersection === void 0) {
+    size.set(0.1);
+    stop();
+  } else {
+    size.set(1);
+    ref.position.copy($intersection.point);
+    start();
+  }
+</script>
+
+<T
+  is={ref}
+  visible={$intersection !== undefined}
+>
+  <slot>
+    <Cursor
+      size={$size}
+      thickness={0.015}
+    />
+  </slot>
+</T>

package/dist/components/internal/TeleportCursor.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 TeleportCursorProps = typeof __propDef.props;
+export type TeleportCursorEvents = typeof __propDef.events;
+export type TeleportCursorSlots = typeof __propDef.slots;
+export default class TeleportCursor extends SvelteComponent<TeleportCursorProps, TeleportCursorEvents, TeleportCursorSlots> {
+}
+export {};

package/dist/components/internal/TeleportRay.svelte

@@ -0,0 +1,71 @@
+<script>import { Vector3, QuadraticBezierCurve3, Vector2 } from "three";
+import { Line2 } from "three/examples/jsm/lines/Line2";
+import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { T, useFrame } from "@threlte/core";
+import { teleportIntersection } from "../../internal/stores";
+export let handedness;
+export let targetRay;
+let lineGeometry = new LineGeometry();
+const rayStart = new Vector3();
+const rayMidpoint = new Vector3();
+const curve = new QuadraticBezierCurve3();
+const rayDivisions = 40;
+const positions = new Float32Array(rayDivisions * 3);
+const vec3 = new Vector3();
+const v2_1 = new Vector2();
+const v2_2 = new Vector2();
+$:
+  intersection = teleportIntersection[handedness];
+const setCurvePoints = (alpha = 0.3) => {
+  if (intersection.current === void 0)
+    return;
+  const rayEnd = intersection.current.point;
+  targetRay.getWorldPosition(rayStart);
+  rayMidpoint.x = (rayStart.x + rayEnd.x) / 2;
+  rayMidpoint.y = (rayStart.y + rayEnd.y) / 2;
+  rayMidpoint.z = (rayStart.z + rayEnd.z) / 2;
+  const arc = Math.log1p(
+    v2_1.set(rayStart.x, rayStart.z).distanceTo(v2_2.set(rayEnd.x, rayEnd.z))
+  );
+  rayMidpoint.y += arc;
+  curve.v0.lerp(rayStart, alpha);
+  curve.v1.lerp(rayMidpoint, alpha);
+  curve.v2.lerp(rayEnd, alpha);
+  for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
+    const t = i / rayDivisions;
+    curve.getPoint(t, vec3);
+    positions[j + 0] = vec3.x;
+    positions[j + 1] = vec3.y;
+    positions[j + 2] = vec3.z;
+  }
+  lineGeometry.setPositions(positions);
+};
+const { start, stop } = useFrame(
+  () => {
+    setCurvePoints();
+  },
+  { autostart: false }
+);
+$:
+  if ($intersection === void 0) {
+    stop();
+  } else {
+    setCurvePoints(1);
+    start();
+  }
+</script>
+
+<slot>
+  <T
+    is={Line2}
+    visible={$intersection !== undefined}
+    position.z={-0.01}
+  >
+    <T is={lineGeometry} />
+    <T
+      is={LineMaterial}
+      linewidth={0.004}
+    />
+  </T>
+</slot>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type XRTargetRaySpace } from 'three';
+declare const __propDef: {
+    props: {
+        handedness: 'left' | 'right';
+        targetRay: XRTargetRaySpace;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TeleportRayProps = typeof __propDef.props;
+export type TeleportRayEvents = typeof __propDef.events;
+export type TeleportRaySlots = typeof __propDef.slots;
+export default class TeleportRay extends SvelteComponent<TeleportRayProps, TeleportRayEvents, TeleportRaySlots> {
+}
+export {};

package/dist/hooks/useController.d.ts

@@ -8,7 +8,3 @@ export declare const gaze: CurrentWritable<XRController | undefined>;
  * Provides a reference to a current XRController, filtered by handedness.
  */
 export declare const useController: (handedness: XRHandedness) => CurrentWritable<XRController | undefined>;
-/**
- * Provides a reference to the gamepad attached to a current XRController.
- */
-export declare const useGamepad: (handedness: 'left' | 'right') => CurrentWritable<Gamepad | undefined>;

package/dist/hooks/useController.js

@@ -19,14 +19,3 @@ export const useController = (handedness) => {
             return gaze;
     }
 };
-/**
- * Provides a reference to the gamepad attached to a current XRController.
- */
-export const useGamepad = (handedness) => {
-    switch (handedness) {
-        case 'left':
-            return gamepadLeft;
-        case 'right':
-            return gamepadRight;
-    }
-};

package/dist/index.d.ts

@@ -4,10 +4,17 @@ export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
 export { default as Headset } from './components/Headset.svelte';
-export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';
 export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
-export * from './hooks';
-export type * from './types';
+export { pointerControls } from './plugins/pointerControls';
+export { teleportControls } from './plugins/teleportControls';
+export { useController } from './hooks/useController';
+export { useHand } from './hooks/useHand';
+export { useHandJoint } from './hooks/useHandJoint';
+export { useHeadset } from './hooks/useHeadset';
+export { useHitTest } from './hooks/useHitTest';
+export { useTeleport } from './hooks/useTeleport';
+export { useXR } from './hooks/useXR';
+export type { XRSessionEventType, XRControllerEventType, XRHandEventType, XRSessionEvent, XRControllerEvent, XRController, XRHand, XRHandEvent, } from './types';

package/dist/index.js

@@ -1,12 +1,23 @@
+// Components
 export { default as ARButton } from './components/ARButton.svelte';
 export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
 export { default as Headset } from './components/Headset.svelte';
-export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
+// Utilities
 export { getXRSupportState } from './lib/getXRSupportState';
 export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
-export * from './hooks';
+// Plugins
+export { pointerControls } from './plugins/pointerControls';
+export { teleportControls } from './plugins/teleportControls';
+// Hooks
+export { useController } from './hooks/useController';
+export { useHand } from './hooks/useHand';
+export { useHandJoint } from './hooks/useHandJoint';
+export { useHeadset } from './hooks/useHeadset';
+export { useHitTest } from './hooks/useHitTest';
+export { useTeleport } from './hooks/useTeleport';
+export { useXR } from './hooks/useXR';

package/dist/internal/headset.js

@@ -1,6 +1,6 @@
 import { Group } from 'three';
 import { useThrelte, useFrame, watch } from '@threlte/core';
-import { useXR } from '../hooks';
+import { useXR } from '../hooks/useXR';
 export const headset = new Group();
 export const useUpdateHeadset = () => {
     const { renderer, camera } = useThrelte();