@threlte/xr 0.0.10 → 0.0.12

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

@@ -0,0 +1,20 @@
+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;
+    compute: ComputeFunction;
+}
+export interface HandContext {
+    hand: 'left' | 'right';
+    enabled: CurrentWritable<boolean>;
+    active: CurrentWritable<boolean>;
+    hovered: CurrentWritable<THREE.Intersection | undefined>;
+}
+export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
+export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
+export declare const getTeleportContext: () => Context;
+export declare const setTeleportContext: (context: Context) => void;

package/dist/plugins/teleportControls/context.js

@@ -0,0 +1,18 @@
+import { getContext, setContext } from 'svelte';
+const handContextKeys = {
+    left: Symbol('teleport-controls-context-left-hand'),
+    right: Symbol('teleport-controls-context-right-hand')
+};
+const contextKey = Symbol('teleport-controls-context');
+export const getHandContext = (hand) => {
+    return getContext(handContextKeys[hand]);
+};
+export const setHandContext = (hand, context) => {
+    setContext(handContextKeys[hand], context);
+};
+export const getTeleportContext = () => {
+    return getContext(contextKey);
+};
+export const setTeleportContext = (context) => {
+    setContext(contextKey, context);
+};

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

@@ -0,0 +1,6 @@
+export declare const useTeleportControls: () => {
+    addSurface: (mesh: THREE.Mesh) => void;
+    removeSurface: (mesh: THREE.Mesh) => void;
+    addBlocker: (mesh: THREE.Mesh) => void;
+    removeBlocker: (mesh: THREE.Mesh) => void;
+};

package/dist/plugins/teleportControls/hook.js

@@ -0,0 +1,40 @@
+import { createRawEventDispatcher } from '@threlte/core';
+import { getTeleportContext } from './context';
+export const useTeleportControls = () => {
+    const context = getTeleportContext();
+    const eventDispatcher = createRawEventDispatcher();
+    const addSurface = (mesh) => {
+        // check if the object is already in the list
+        if (context.interactiveObjects.indexOf(mesh) > -1) {
+            return;
+        }
+        context.interactiveObjects.push(mesh);
+        context.surfaces.set(mesh.uuid, mesh);
+        context.dispatchers.set(mesh, eventDispatcher);
+    };
+    const removeSurface = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.surfaces.delete(mesh.uuid);
+        context.dispatchers.delete(mesh);
+    };
+    const addBlocker = (mesh) => {
+        // check if the object is already in the list
+        if (context.interactiveObjects.indexOf(mesh) > -1) {
+            return;
+        }
+        context.interactiveObjects.push(mesh);
+        context.blockers.set(mesh.uuid, mesh);
+    };
+    const removeBlocker = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.blockers.delete(mesh.uuid);
+    };
+    return {
+        addSurface,
+        removeSurface,
+        addBlocker,
+        removeBlocker
+    };
+};

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

@@ -0,0 +1,19 @@
+import { type ComputeFunction } from './context';
+export interface TeleportControlsOptions {
+    enabled?: boolean;
+    /**
+     * The compute function is responsible for updating the state of the pointerControls plugin.
+     * It needs to set up the raycaster and the pointer vector. If no compute function is provided,
+     * the plugin will use the default compute function.
+     */
+    compute?: ComputeFunction;
+    /**
+     * @default 1 / 30
+     */
+    fixedStep?: number;
+}
+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>;
+    active: import("@threlte/core").CurrentWritable<boolean>;
+};

package/dist/plugins/teleportControls/index.js

@@ -0,0 +1,54 @@
+import { Raycaster } from 'three';
+import { currentWritable, watch } from '@threlte/core';
+import { setTeleportContext, getTeleportContext, getHandContext } from './context';
+import { injectTeleportControlsPlugin } from './plugin';
+import { defaultComputeFunction } from './compute';
+import { setHandContext } from './context';
+import { setupTeleportControls } from './setup';
+import { teleportState } from '../../internal/stores';
+let controlsCounter = 0;
+export const teleportControls = (handedness, options) => {
+    if (getTeleportContext() === undefined) {
+        injectTeleportControlsPlugin();
+        setTeleportContext({
+            interactiveObjects: [],
+            surfaces: new Map(),
+            blockers: new Map(),
+            dispatchers: new WeakMap(),
+            raycaster: new Raycaster(),
+            compute: options?.compute ?? defaultComputeFunction
+        });
+    }
+    const context = getTeleportContext();
+    if (getHandContext(handedness) === undefined) {
+        const enabled = options?.enabled ?? true;
+        controlsCounter += enabled ? 1 : -1;
+        const ctx = {
+            hand: handedness,
+            active: currentWritable(false),
+            enabled: currentWritable(enabled),
+            hovered: currentWritable(undefined)
+        };
+        setHandContext(handedness, ctx);
+        setupTeleportControls(context, ctx, options?.fixedStep);
+    }
+    const handContext = getHandContext(handedness);
+    watch(handContext.enabled, (enabled) => {
+        controlsCounter += enabled ? 1 : -1;
+        teleportState.update((value) => {
+            value[handedness].enabled = controlsCounter > 0;
+            return value;
+        });
+    });
+    watch(handContext.active, (hovering) => {
+        teleportState.update((value) => {
+            value[handedness].hovering = hovering;
+            return value;
+        });
+    });
+    return {
+        enabled: handContext.enabled,
+        hovered: handContext.hovered,
+        active: handContext.active
+    };
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
+ */
+export declare const injectTeleportControlsPlugin: () => void;

package/dist/plugins/teleportControls/plugin.js

@@ -0,0 +1,54 @@
+import { writable } from 'svelte/store';
+import { watch } from '@threlte/core';
+import { injectPlugin } from '@threlte/core';
+import { useTeleportControls } from './hook';
+/**
+ * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
+ */
+export const injectTeleportControlsPlugin = () => {
+    const noop = () => { };
+    injectPlugin('threlte-teleport-controls', ({ ref, props }) => {
+        if (!ref.isMesh)
+            return;
+        const isSurface = 'teleportSurface' in props;
+        const isBlocker = 'teleportBlocker' in props;
+        if (!isSurface && !isBlocker)
+            return;
+        const { addBlocker, addSurface, removeBlocker, removeSurface } = useTeleportControls();
+        const refStore = writable(ref);
+        const propsStore = writable(props);
+        watch([refStore, propsStore], ([nextRef, nextProps]) => {
+            if (isSurface) {
+                if (nextProps.teleportSurface === false) {
+                    removeSurface(nextRef);
+                    return noop;
+                }
+                else {
+                    addSurface(nextRef);
+                    return () => removeSurface(nextRef);
+                }
+            }
+            else if (isBlocker) {
+                if (props.teleportBlocker === false) {
+                    removeBlocker(nextRef);
+                    return noop;
+                }
+                else {
+                    addBlocker(nextRef);
+                    return () => removeBlocker(nextRef);
+                }
+            }
+            else {
+                return noop;
+            }
+        });
+        return {
+            onRefChange(ref) {
+                refStore.set(ref);
+            },
+            onPropsChange(props) {
+                propsStore.set(props);
+            }
+        };
+    });
+};

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

@@ -0,0 +1,2 @@
+import type { Context, HandContext } from './context';
+export declare const setupTeleportControls: (context: Context, handContext: HandContext, fixedStep?: number) => void;

package/dist/plugins/teleportControls/setup.js

@@ -0,0 +1,62 @@
+import { watch } from '@threlte/core';
+import { useXR } from '../../hooks/useXR';
+import { useController } from '../../hooks/useController';
+import { useTeleport } from '../../hooks/useTeleport';
+import { useFixed } from '../../internal/useFixed';
+import { teleportIntersection } from '../../internal/stores';
+export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40) => {
+    const handedness = handContext.hand;
+    const controller = useController(handedness);
+    const teleport = useTeleport();
+    const handleHoverEnd = () => {
+        handContext.hovered.set(undefined);
+        teleportIntersection[handedness].set(undefined);
+    };
+    const { start, stop } = useFixed(() => {
+        const gamepad = controller.current?.inputSource.gamepad;
+        if (gamepad === undefined) {
+            return;
+        }
+        const selecting = (gamepad.axes[3] ?? 0) < -0.8;
+        if (handContext.active.current && !selecting) {
+            handContext.active.set(false);
+        }
+        else if (!handContext.active.current && selecting) {
+            handContext.active.set(true);
+        }
+        if (!handContext.active.current) {
+            if (handContext.hovered.current !== undefined) {
+                teleport(handContext.hovered.current.point);
+                handleHoverEnd();
+            }
+            return;
+        }
+        context.compute(context, handContext);
+        const [intersect] = context.raycaster.intersectObjects(context.interactiveObjects, true);
+        if (intersect === undefined) {
+            if (handContext.hovered.current !== undefined) {
+                handleHoverEnd();
+            }
+            return;
+        }
+        if (intersect !== undefined && context.blockers.has(intersect.object.uuid)) {
+            if (handContext.hovered.current !== undefined) {
+                handleHoverEnd();
+            }
+            return;
+        }
+        teleportIntersection[handedness].set(intersect);
+        handContext.hovered.set(intersect);
+    }, {
+        fixedStep,
+        autostart: false
+    });
+    watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
+        if (isPresenting && enabled) {
+            start();
+        }
+        else {
+            stop();
+        }
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
@@ -18,7 +18,7 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-mkcert": "^1.16.0",
-    "@threlte/core": "6.0.10"
+    "@threlte/core": "6.1.0"
   },
   "peerDependencies": {
     "svelte": ">=4",

package/dist/components/Ray.svelte

@@ -1,23 +0,0 @@
-<script>import { T } from "@threlte/core";
-import { Line2 } from "three/examples/jsm/lines/Line2";
-import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
-import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
-export let positions;
-export let color = "white";
-let lineGeometry = new LineGeometry();
-$:
-  if (positions) {
-    lineGeometry.setPositions(positions);
-  }
-</script>
-
-<T is={Line2}
-  {...$$restProps}
-  position.z={-0.01}
->
-  <T is={lineGeometry} />
-  <T is={LineMaterial}
-    {color}
-    linewidth={0.004}
-  />
-</T>

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

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        positions: Float32Array | undefined;
-        color?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RayProps = typeof __propDef.props;
-export type RayEvents = typeof __propDef.events;
-export type RaySlots = typeof __propDef.slots;
-export default class Ray extends SvelteComponent<RayProps, RayEvents, RaySlots> {
-}
-export {};

package/dist/components/ShortRay.svelte

@@ -1,32 +0,0 @@
-<script>import { T } from "@threlte/core";
-const 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.); }
-  `;
-const fragmentShader = `
-  varying mediump vec2 vUv;
-  void main() { gl_FragColor = vec4(1., 1., 1., pow(vUv.y - 1., 2.)); }
-  `;
-</script>
-
-<T.Mesh
-  {...$$restProps}
-  rotation.x={-Math.PI / 2}
-  position.z={-0.1}
->
-  {@const radius = 0.002}
-  {@const height = 0.2}
-  {@const radialSegments = 16}
-  {@const heightSegments = 1}
-  {@const openEnded = false}
-  <T.CylinderGeometry args={[radius, radius, height, radialSegments, heightSegments, openEnded]} />
-  <T.RawShaderMaterial
-    transparent
-    {vertexShader}
-    {fragmentShader}
-  />
-</T.Mesh>

package/dist/components/TeleportControls.svelte

@@ -1,136 +0,0 @@
-<!--
-@component
-
-`<TeleportControls />` creates a teleportation experience similar to that on the Quest home environment.
-
-@param handedness - Which hands to allow teleportation from.
-
-@param maxDistance - The maximum radial teleporting distance from the user's current origin, in meters.
-
-@event teleport - Fires after a teleport event.
-
-```svelte
-  <TeleportControls
-    handedness={'left' | 'right'}
-    maxDistance={10}
-    on:teleport={(event) => {}} 
-  >
-    <T.Mesh teleportSurface>
-      ...
-    </T.Mesh>
-  </TeleportControls>
-```
--->
-
-<script>import * as THREE from "three";
-import { T, useFrame, createRawEventDispatcher } from "@threlte/core";
-import { activeTeleportController, pendingTeleportDestination } from "../internal/stores";
-import { useTeleport, useController, useGamepad } from "../hooks";
-import Ray from "../components/Ray.svelte";
-import { teleportPlugin } from "../plugins/teleportPlugin";
-export let raycaster = new THREE.Raycaster();
-export let handedness = "right";
-export let maxDistance = 20;
-const dispatch = createRawEventDispatcher();
-let destination;
-let activeController;
-const teleport = useTeleport();
-const navMeshes = [];
-const controllerPosition = new THREE.Vector3();
-const matrix4 = new THREE.Matrix4();
-const rayMidpoint = new THREE.Vector3();
-const rayDivisions = 40;
-const positions = new Float32Array(rayDivisions * 3);
-const curve = new THREE.QuadraticBezierCurve3();
-const curvePoint = new THREE.Vector3();
-$:
-  raycaster.far = maxDistance;
-$:
-  teleportController = useController(handedness);
-$:
-  teleportGamepad = useGamepad(handedness);
-const calculateRayMidpoint = (vector1, vector2) => {
-  rayMidpoint.x = (vector1.x + vector2.x) / 2;
-  rayMidpoint.y = (vector1.y + vector2.y) / 2;
-  rayMidpoint.z = (vector1.z + vector2.z) / 2;
-};
-const { start, stop } = useFrame(() => {
-  matrix4.identity().extractRotation(activeController.matrixWorld);
-  raycaster.ray.origin.setFromMatrixPosition(activeController.matrixWorld);
-  raycaster.ray.direction.set(0, 0, -1).applyMatrix4(matrix4);
-  const [intersect] = raycaster.intersectObjects(navMeshes, true);
-  if (intersect === void 0) {
-    destination = void 0;
-    $pendingTeleportDestination = void 0;
-    return;
-  }
-  destination = intersect.point;
-  $pendingTeleportDestination = destination;
-  activeController.getWorldPosition(controllerPosition);
-  calculateRayMidpoint(controllerPosition, destination);
-  rayMidpoint.y += 0.8;
-  curve.v0.copy(controllerPosition);
-  curve.v1.copy(rayMidpoint);
-  curve.v2.copy(intersect.point);
-  for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
-    const t = i / rayDivisions;
-    curve.getPoint(t, curvePoint);
-    positions[j + 0] = curvePoint.x;
-    positions[j + 1] = curvePoint.y;
-    positions[j + 2] = curvePoint.z;
-  }
-}, { autostart: false });
-const handleSelectStart = (controller) => {
-  activeController = controller;
-  $activeTeleportController = controller;
-  start();
-};
-const handleSelectEnd = () => {
-  stop();
-  activeController = void 0;
-  $activeTeleportController = void 0;
-  if (destination !== void 0) {
-    teleport(destination);
-    dispatch("teleport", destination);
-  }
-};
-useFrame(() => {
-  const selecting = (teleportGamepad.current?.axes[3] ?? 0) < -0.9;
-  if (selecting && activeController === void 0) {
-    handleSelectStart(teleportController.current.targetRay);
-  } else if (!selecting && activeController !== void 0) {
-    handleSelectEnd();
-  }
-});
-teleportPlugin(navMeshes);
-</script>
-
-<slot />
-
-<slot name='ray'>
-  <Ray
-    visible={activeController !== undefined && destination !== undefined}
-    positions={activeController !== undefined && destination !== undefined ? positions : undefined}
-  />
-</slot>
-
-<slot name='cursor'>
-  <T.Mesh
-    visible={activeController !== undefined && destination !== undefined}
-    position.x={destination?.x}
-    position.y={destination?.y}
-    position.z={destination?.z}
-  >
-    {@const innerRadius = 0.175}
-    {@const outerRadius = 0.2}
-    {@const thetaSegments = 32}
-    <T.RingGeometry
-      args={[innerRadius, outerRadius, thetaSegments]}
-      on:create={({ ref }) => ref.rotateX(-Math.PI / 2)}
-    />
-    <T.MeshBasicMaterial
-      polygonOffset
-      polygonOffsetFactor={-1}
-    />
-  </T.Mesh>
-</slot>

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

@@ -1,54 +0,0 @@
-import { SvelteComponent } from "svelte";
-import * as THREE from 'three';
-declare const __propDef: {
-    props: {
-        /**
-           * The raycaster used for teleportation.
-           * @default new THREE.Raycaster()
-           */ raycaster?: THREE.Raycaster;
-        /**
-           * The controller handedness that the teleport controls is linked to.
-           * @default 'right'
-           */ handedness?: 'left' | 'right';
-        /**
-           * The maximum radial teleporting distance from the user's current origin, in meters.
-           * @default 20
-           */ maxDistance?: number;
-    };
-    slots: {
-        default: {};
-        ray: {};
-        cursor: {};
-    };
-    events: {
-        /** Fired after a teleportation occurs with the new location as the payload. */
-        teleport: THREE.Vector3;
-    };
-};
-export type TeleportControlsProps = typeof __propDef.props;
-export type TeleportControlsEvents = typeof __propDef.events;
-export type TeleportControlsSlots = typeof __propDef.slots;
-/**
- * `<TeleportControls />` creates a teleportation experience similar to that on the Quest home environment.
- *
- * @param handedness - Which hands to allow teleportation from.
- *
- * @param maxDistance - The maximum radial teleporting distance from the user's current origin, in meters.
- *
- * @event teleport - Fires after a teleport event.
- *
- * ```svelte
- * <TeleportControls
- *   handedness={'left' | 'right'}
- *   maxDistance={10}
- *   on:teleport={(event) => {}}
- * >
- *   <T.Mesh teleportSurface>
- *     ...
- *   </T.Mesh>
- * </TeleportControls>
- * ```
- */
-export default class TeleportControls extends SvelteComponent<TeleportControlsProps, TeleportControlsEvents, TeleportControlsSlots> {
-}
-export {};

package/dist/hooks/index.d.ts

@@ -1,7 +0,0 @@
-export { useController, useGamepad } from './useController';
-export { useHand } from './useHand';
-export { useHandJoint } from './useHandJoint';
-export { useHeadset } from './useHeadset';
-export { useHitTest } from './useHitTest';
-export { useTeleport } from './useTeleport';
-export { useXR } from './useXR';

package/dist/hooks/index.js

@@ -1,7 +0,0 @@
-export { useController, useGamepad } from './useController';
-export { useHand } from './useHand';
-export { useHandJoint } from './useHandJoint';
-export { useHeadset } from './useHeadset';
-export { useHitTest } from './useHitTest';
-export { useTeleport } from './useTeleport';
-export { useXR } from './useXR';

package/dist/plugins/teleportPlugin.d.ts

@@ -1 +0,0 @@
-export declare const teleportPlugin: (navMeshes: THREE.Mesh[]) => void;

package/dist/plugins/teleportPlugin.js

@@ -1,41 +0,0 @@
-import { injectPlugin } from '@threlte/core';
-export const teleportPlugin = (navMeshes) => injectPlugin('teleport-controls', ({ ref, props }) => {
-    let currentRef = ref;
-    let currentProps = props;
-    if (!currentRef.isMesh)
-        return;
-    if (!('teleportSurface' in props))
-        return;
-    const addSurface = (mesh) => {
-        const registered = navMeshes.some((navMesh) => navMesh.uuid === mesh.uuid);
-        if (!registered) {
-            navMeshes.push(mesh);
-        }
-    };
-    const removeSurface = (mesh) => {
-        const index = navMeshes.indexOf(mesh);
-        if (index > -1) {
-            navMeshes.splice(index, 1);
-        }
-    };
-    return {
-        pluginProps: ['teleportSurface'],
-        onRefChange(ref) {
-            removeSurface(currentRef);
-            currentRef = ref;
-            if (currentProps.teleportSurface) {
-                addSurface(currentRef);
-            }
-            return () => removeSurface(currentRef);
-        },
-        onPropsChange(props) {
-            currentProps = props;
-            if (currentProps.teleportSurface) {
-                addSurface(currentRef);
-            }
-            else {
-                removeSurface(currentRef);
-            }
-        }
-    };
-});