@threlte/xr 0.0.2

package/dist/hooks/useHand.js

@@ -0,0 +1,14 @@
+import { currentWritable } from '@threlte/core';
+export const left = currentWritable(undefined);
+export const right = currentWritable(undefined);
+/**
+ * Provides a reference to a current XRHand, filtered by handedness.
+ */
+export const useHand = (handedness) => {
+    switch (handedness) {
+        case 'left':
+            return left;
+        case 'right':
+            return right;
+    }
+};

package/dist/hooks/useHandJoint.d.ts

@@ -0,0 +1,6 @@
+import type * as THREE 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>;

package/dist/hooks/useHandJoint.js

@@ -0,0 +1,19 @@
+import { currentWritable, useFrame } from '@threlte/core';
+import { useHand } from './useHand';
+/**
+ * Provides a reference to a requested hand joint, once available.
+ */
+export const useHandJoint = (handedness, joint) => {
+    const jointSpaceStore = currentWritable(undefined);
+    const xrhand = useHand(handedness);
+    const { stop } = useFrame(({ invalidate }) => {
+        const jointSpace = xrhand.current?.hand.joints[joint];
+        // The joint radius is a good indicator that the joint is ready
+        if (jointSpace?.jointRadius !== undefined) {
+            jointSpaceStore.set(jointSpace);
+            invalidate();
+            stop();
+        }
+    }, { invalidate: false });
+    return jointSpaceStore;
+};

package/dist/hooks/useHitTest.d.ts

@@ -0,0 +1,5 @@
+import type { HitTestCallback } from '../types';
+/**
+ * Use this hook to perform a hit test for an AR environment.
+ */
+export declare const useHitTest: (hitTestCallback: HitTestCallback) => void;

package/dist/hooks/useHitTest.js

@@ -0,0 +1,44 @@
+import * as THREE from 'three';
+import { onDestroy } from 'svelte';
+import { session } from '../internal/stores';
+import { useThrelte, useFrame } from '@threlte/core';
+/**
+ * Use this hook to perform a hit test for an AR environment.
+ */
+export const useHitTest = (hitTestCallback) => {
+    const { xr } = useThrelte().renderer;
+    const hitMatrix = new THREE.Matrix4();
+    let started = false;
+    let hitTestSource;
+    onDestroy(session.subscribe(async (value) => {
+        if (value === undefined) {
+            hitTestSource = undefined;
+            if (started) {
+                stop();
+                started = false;
+            }
+            return;
+        }
+        const space = await value.requestReferenceSpace('viewer');
+        hitTestSource = await value.requestHitTestSource?.({ space });
+        if (!started) {
+            start();
+            started = true;
+        }
+    }));
+    const { start, stop } = useFrame(() => {
+        if (hitTestSource === undefined)
+            return;
+        const [hit] = xr.getFrame().getHitTestResults(hitTestSource);
+        if (hit === undefined)
+            return;
+        const referenceSpace = xr.getReferenceSpace();
+        if (referenceSpace === null)
+            return;
+        const pose = hit.getPose(referenceSpace);
+        if (pose === undefined)
+            return;
+        hitMatrix.fromArray(pose.transform.matrix);
+        hitTestCallback(hitMatrix, hit);
+    }, { autostart: false });
+};

package/dist/hooks/useTeleport.d.ts

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

package/dist/hooks/useTeleport.js

@@ -0,0 +1,54 @@
+import * as THREE from 'three';
+import { useThrelte } from '@threlte/core';
+import { session } from '../internal/stores';
+import { onDestroy } from 'svelte';
+const quaternion = new THREE.Quaternion();
+const offset = { x: 0, y: 0, z: 0 };
+/**
+ * Returns a callback to teleport the player to a position.
+ *
+ * @example
+ * const teleport = useTeleport()
+ * const vec3 = new THREE.Vector3()
+ *
+ * vec3.set(5, 0, 5)
+ *
+ * teleport(vec3)
+ */
+export const useTeleport = () => {
+    const { xr } = useThrelte().renderer;
+    let baseReferenceSpace;
+    const unsub = session.subscribe((value) => {
+        if (value === undefined)
+            return;
+        baseReferenceSpace = xr.getReferenceSpace();
+    });
+    onDestroy(unsub);
+    /**
+     * Teleports a player to a position - and optionally a direction.
+     */
+    return (position, direction = quaternion) => {
+        if (baseReferenceSpace === null || baseReferenceSpace === undefined)
+            return;
+        let x = 0, y = 0, z = 0;
+        if (Array.isArray(position)) {
+            ;
+            [x, y, z] = position;
+        }
+        else {
+            x = position.x;
+            y = position.y;
+            z = position.z;
+        }
+        offset.x = -x;
+        offset.y = -y;
+        offset.z = -z;
+        const pose = xr.getFrame().getViewerPose(baseReferenceSpace);
+        if (pose !== undefined) {
+            offset.x += pose.transform.position.x;
+            offset.z += pose.transform.position.z;
+        }
+        const teleportOffset = new XRRigidTransform(offset, direction);
+        xr.setReferenceSpace(baseReferenceSpace.getOffsetReferenceSpace(teleportOffset));
+    };
+};

package/dist/hooks/useXR.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="webxr" />
+import type { CurrentWritable } from '@threlte/core';
+import { isPresenting, isHandTracking, session } from '../internal/stores';
+/**
+ * Provides access to context related to `<XR />`.
+ */
+export declare const useXR: () => {
+    isPresenting: CurrentWritable<boolean>;
+    isHandTracking: CurrentWritable<boolean>;
+    session: CurrentWritable<XRSession | undefined>;
+    xrFrame: {
+        current: XRFrame;
+    };
+};

package/dist/hooks/useXR.js

@@ -0,0 +1,15 @@
+import { isPresenting, isHandTracking, session, xr } from '../internal/stores';
+const stores = {
+    isPresenting,
+    isHandTracking,
+    session,
+    xrFrame: {
+        get current() {
+            return xr.current.getFrame();
+        }
+    }
+};
+/**
+ * Provides access to context related to `<XR />`.
+ */
+export const useXR = () => stores;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+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 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';

package/dist/index.js

@@ -0,0 +1,11 @@
+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 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';

package/dist/internal/events.d.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,26 @@
+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/stores.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="webxr" />
+/// <reference types="svelte" />
+export declare const initialized: import("svelte/store").Writable<boolean>;
+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 activeTeleportController: import("@threlte/core").CurrentWritable<import("three").XRTargetRaySpace | undefined>;
+export declare const pendingTeleportDestination: import("@threlte/core").CurrentWritable<import("three").Vector3 | undefined>;
+export declare const xr: import("@threlte/core").CurrentWritable<import("three").WebXRManager | undefined>;

package/dist/internal/stores.js

@@ -0,0 +1,10 @@
+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 activeTeleportController = currentWritable(undefined);
+export const pendingTeleportDestination = currentWritable(undefined);
+export const xr = currentWritable(undefined);

package/dist/lib/getXRSessionOptions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="webxr" />
+export declare const getXRSessionOptions: (referenceSpaceType: XRReferenceSpaceType | undefined, sessionInit: XRSessionInit | undefined) => XRSessionInit | undefined;

package/dist/lib/getXRSessionOptions.js

@@ -0,0 +1,15 @@
+export const getXRSessionOptions = (referenceSpaceType, sessionInit) => {
+    if (referenceSpaceType === undefined && sessionInit === undefined) {
+        return undefined;
+    }
+    if (referenceSpaceType && sessionInit === undefined) {
+        return { optionalFeatures: [referenceSpaceType] };
+    }
+    if (referenceSpaceType && sessionInit) {
+        return {
+            ...sessionInit,
+            optionalFeatures: [...new Set([...(sessionInit.optionalFeatures ?? []), referenceSpaceType])]
+        };
+    }
+    return sessionInit;
+};

package/dist/lib/getXRSupportState.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="webxr" />
+/**
+ * Gets the support state of requested session mode.
+ * @param mode Session mode: 'inline' | 'immersive-vr' | 'immersive-ar'
+ * @returns The current support state
+ */
+export declare const getXRSupportState: (mode: XRSessionMode) => Promise<'unsupported' | 'insecure' | 'blocked' | 'supported'>;

package/dist/lib/getXRSupportState.js

@@ -0,0 +1,20 @@
+/**
+ * Gets the support state of requested session mode.
+ * @param mode Session mode: 'inline' | 'immersive-vr' | 'immersive-ar'
+ * @returns The current support state
+ */
+export const getXRSupportState = async (mode) => {
+    if (navigator?.xr === undefined) {
+        return 'unsupported';
+    }
+    if (location.protocol !== 'https:') {
+        return 'insecure';
+    }
+    try {
+        const supported = await navigator.xr.isSessionSupported(mode);
+        return supported ? 'supported' : 'unsupported';
+    }
+    catch (error) {
+        return error.name === 'SecurityError' ? 'blocked' : 'unsupported';
+    }
+};

package/dist/lib/handJoints.d.ts

@@ -0,0 +1,2 @@
+export declare const handJoints: readonly ["wrist", "thumb-metacarpal", "thumb-phalanx-proximal", "thumb-phalanx-distal", "thumb-tip", "index-finger-metacarpal", "index-finger-phalanx-proximal", "index-finger-phalanx-intermediate", "index-finger-phalanx-distal", "index-finger-tip", "middle-finger-metacarpal", "middle-finger-phalanx-proximal", "middle-finger-phalanx-intermediate", "middle-finger-phalanx-distal", "middle-finger-tip", "ring-finger-metacarpal", "ring-finger-phalanx-proximal", "ring-finger-phalanx-intermediate", "ring-finger-phalanx-distal", "ring-finger-tip", "pinky-finger-metacarpal", "pinky-finger-phalanx-proximal", "pinky-finger-phalanx-intermediate", "pinky-finger-phalanx-distal", "pinky-finger-tip"];
+export type HandJoints = (typeof handJoints)[number];

package/dist/lib/handJoints.js

@@ -0,0 +1,27 @@
+export const handJoints = [
+    'wrist',
+    'thumb-metacarpal',
+    'thumb-phalanx-proximal',
+    'thumb-phalanx-distal',
+    'thumb-tip',
+    'index-finger-metacarpal',
+    'index-finger-phalanx-proximal',
+    'index-finger-phalanx-intermediate',
+    'index-finger-phalanx-distal',
+    'index-finger-tip',
+    'middle-finger-metacarpal',
+    'middle-finger-phalanx-proximal',
+    'middle-finger-phalanx-intermediate',
+    'middle-finger-phalanx-distal',
+    'middle-finger-tip',
+    'ring-finger-metacarpal',
+    'ring-finger-phalanx-proximal',
+    'ring-finger-phalanx-intermediate',
+    'ring-finger-phalanx-distal',
+    'ring-finger-tip',
+    'pinky-finger-metacarpal',
+    'pinky-finger-phalanx-proximal',
+    'pinky-finger-phalanx-intermediate',
+    'pinky-finger-phalanx-distal',
+    'pinky-finger-tip'
+];

package/dist/lib/toggleXRSession.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="webxr" />
+/**
+ * Starts / ends an XR session.
+ *
+ * @param sessionMode an XR session mode: 'inline' | 'immersive-vr' | 'immersive-ar'
+ * @param sessionInit an XRSessionInit object
+ * @param force Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways
+ * @returns
+ */
+export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?: (XRSessionInit & {
+    domOverlay?: {
+        root: HTMLElement;
+    } | undefined;
+}) | undefined, force?: 'enter' | 'exit') => Promise<XRSession | undefined>;

package/dist/lib/toggleXRSession.js

@@ -0,0 +1,33 @@
+import { session, referenceSpaceType, xr } from '../internal/stores';
+import { getXRSessionOptions } from './getXRSessionOptions';
+/**
+ * Starts / ends an XR session.
+ *
+ * @param sessionMode an XR session mode: 'inline' | 'immersive-vr' | 'immersive-ar'
+ * @param sessionInit an XRSessionInit object
+ * @param force Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways
+ * @returns
+ */
+export const toggleXRSession = async (sessionMode, sessionInit, force) => {
+    const currentSession = session.current;
+    const hasSession = currentSession !== undefined;
+    if (force === 'enter' && hasSession)
+        return currentSession;
+    if (force === 'exit' && !hasSession)
+        return;
+    // Exit a session if entered
+    if (hasSession) {
+        await currentSession.end();
+        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.');
+    }
+    await xr.current.setSession(nextSession);
+    session.set(nextSession);
+    return nextSession;
+};

package/dist/plugins/teleportPlugin.d.ts

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

package/dist/plugins/teleportPlugin.js

@@ -0,0 +1,41 @@
+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);
+            }
+        }
+    };
+});

package/dist/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="webxr" />
+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 & {
+    type: Type;
+    target: XRSession;
+};
+export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
+    type: Type;
+    target: any;
+    data?: XRInputSource;
+};
+export type XRController = {
+    controller: THREE.XRTargetRaySpace;
+    grip: THREE.XRGripSpace;
+    model?: XRControllerModel;
+    inputSource: XRInputSource;
+};
+export type XRHand = {
+    hand: THREE.XRHandSpace;
+    model?: XRHandModel;
+    inputSource: globalThis.XRHand;
+};
+export type XRHandEvent<Type = XRHandEventType, Target = null | THREE.XRHandSpace> = THREE.Event & {
+    type: Type;
+    target: Target;
+};
+export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult) => void;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@threlte/xr",
+  "version": "0.0.2",
+  "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",
+    "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",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.6",
+    "vite-plugin-mkcert": "^1.16.0",
+    "@threlte/core": "6.0.7"
+  },
+  "peerDependencies": {
+    "svelte": ">=4",
+    "three": ">=0.133"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "dev": "vite dev --host",
+    "package": "svelte-kit sync && svelte-package && node ./scripts/cleanupPackage.js && publint",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "cleanup": "rimraf node_modules .svelte-kit dist"
+  }
+}