@threlte/xr 0.0.12 → 0.1.0

package/dist/internal/setupHands.js

@@ -0,0 +1,63 @@
+import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory';
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { left, right } from '../hooks/useHand';
+import { useHandTrackingState } from './useHandTrackingState';
+import { handDispatchers } from './stores';
+export const setupHands = () => {
+    const factory = new XRHandModelFactory();
+    const stores = { left, right };
+    const { xr } = useThrelte().renderer;
+    const hasHands = useHandTrackingState();
+    const handSpaces = [xr.getHand(0), xr.getHand(1)];
+    const map = new Map();
+    handSpaces.forEach((handSpace, index) => {
+        map.set(handSpace, {
+            hand: handSpace,
+            targetRay: xr.getController(index),
+            model: factory.createHandModel(handSpace, 'mesh')
+        });
+    });
+    onMount(() => {
+        const dispatch = (event) => {
+            if (!hasHands())
+                return;
+            const handEvent = event;
+            const handedness = ('handedness' in handEvent) ? handEvent.handedness : handEvent.data.handedness;
+            handDispatchers[handedness]?.current?.(event.type, event);
+        };
+        function handleConnected(event) {
+            const hand = this;
+            const { model, targetRay } = map.get(this);
+            const { data } = event;
+            const { handedness, hand: inputSource } = data;
+            stores[handedness].set({
+                hand,
+                model,
+                inputSource,
+                targetRay
+            });
+            dispatch(event);
+        }
+        const handleDisconnected = (event) => {
+            dispatch(event);
+            stores[event.data.handedness].set(undefined);
+        };
+        for (const handSpace of handSpaces) {
+            handSpace.addEventListener('connected', handleConnected);
+            handSpace.addEventListener('disconnected', handleDisconnected);
+            handSpace.addEventListener('pinchstart', dispatch);
+            handSpace.addEventListener('pinchend', dispatch);
+        }
+        return () => {
+            for (const handSpace of handSpaces) {
+                handSpace.removeEventListener('connected', handleConnected);
+                handSpace.removeEventListener('disconnected', handleDisconnected);
+                handSpace.removeEventListener('pinchstart', dispatch);
+                handSpace.removeEventListener('pinchend', dispatch);
+            }
+            stores.left.set(undefined);
+            stores.right.set(undefined);
+        };
+    });
+};

package/dist/internal/setupHeadset.d.ts

@@ -0,0 +1,3 @@
+import { Group } from 'three';
+export declare const headset: Group<import("three").Object3DEventMap>;
+export declare const setupHeadset: () => void;

package/dist/internal/{headset.js → setupHeadset.js}

@@ -2,9 +2,8 @@ import { Group } from 'three';
 import { useThrelte, useFrame, watch } from '@threlte/core';
 import { useXR } from '../hooks/useXR';
 export const headset = new Group();
-export const useUpdateHeadset = () => {
+export const setupHeadset = () => {
     const { renderer, camera } = useThrelte();
-    const xrState = useXR();
     const { xr } = renderer;
     const immersiveFrame = useFrame(() => {
         const space = xr.getReferenceSpace();
@@ -23,7 +22,7 @@ export const useUpdateHeadset = () => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
     }, { autostart: false, invalidate: false });
-    watch(xrState.isPresenting, (isPresenting) => {
+    watch(useXR().isPresenting, (isPresenting) => {
         if (isPresenting) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();

package/dist/internal/setupRaf.d.ts

@@ -0,0 +1 @@
+export declare const setupRaf: () => void;

package/dist/internal/{updateRaf.js → setupRaf.js}

@@ -3,7 +3,7 @@ import { set_raf } from 'svelte/internal';
 import { onDestroy } from 'svelte';
 import { watch } from '@threlte/core';
 import { session } from './stores';
-export const updateRaf = () => {
+export const setupRaf = () => {
     if (typeof window === 'undefined')
         return;
     const browserRaf = (fn) => requestAnimationFrame(fn);
@@ -11,7 +11,7 @@ export const updateRaf = () => {
     set_raf((fn) => currentRaf.fn(fn));
     watch(session, (session) => {
         if (session) {
-            currentRaf.fn = (fn) => (session.requestAnimationFrame(fn));
+            currentRaf.fn = (fn) => session.requestAnimationFrame(fn);
         }
         else {
             currentRaf.fn = browserRaf;

package/dist/internal/stores.d.ts

@@ -1,11 +1,26 @@
 /// <reference types="webxr" />
-/// <reference types="svelte" />
-export declare const initialized: import("svelte/store").Writable<boolean>;
+import type { WebXRManager, Intersection } from 'three';
 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 xr: import("@threlte/core").CurrentWritable<import("three").WebXRManager | undefined>;
+export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
+export declare const controllerDispatchers: {
+    left: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+    right: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+};
+export declare const handDispatchers: {
+    left: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+    right: import("@threlte/core").CurrentWritable<((<Type extends string>(type: Type, payload?: unknown) => void) & {
+        hasEventListener: <Type_1 extends string>(type: Type_1) => boolean;
+    }) | undefined>;
+};
 export declare const teleportState: import("@threlte/core").CurrentWritable<{
     left: {
         enabled: boolean;
@@ -17,8 +32,8 @@ export declare const teleportState: import("@threlte/core").CurrentWritable<{
     };
 }>;
 export declare const teleportIntersection: {
-    left: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
+    left: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
+    right: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
 };
 export declare const pointerState: import("@threlte/core").CurrentWritable<{
     left: {
@@ -31,6 +46,6 @@ export declare const pointerState: import("@threlte/core").CurrentWritable<{
     };
 }>;
 export declare const pointerIntersection: {
-    left: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
-    right: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Event>> | undefined>;
+    left: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
+    right: import("@threlte/core").CurrentWritable<Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
 };

package/dist/internal/stores.js

@@ -1,36 +1,42 @@
-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 xr = currentWritable(undefined);
+export const controllerDispatchers = {
+    left: currentWritable(undefined),
+    right: currentWritable(undefined)
+};
+export const handDispatchers = {
+    left: currentWritable(undefined),
+    right: currentWritable(undefined)
+};
 export const teleportState = currentWritable({
     left: {
         enabled: false,
-        hovering: false,
+        hovering: false
     },
     right: {
         enabled: false,
-        hovering: false,
-    },
+        hovering: false
+    }
 });
 export const teleportIntersection = {
     left: currentWritable(undefined),
-    right: currentWritable(undefined),
+    right: currentWritable(undefined)
 };
 export const pointerState = currentWritable({
     left: {
         enabled: false,
-        hovering: false,
+        hovering: false
     },
     right: {
         enabled: false,
-        hovering: false,
+        hovering: false
     }
 });
 export const pointerIntersection = {
     left: currentWritable(undefined),
-    right: currentWritable(undefined),
+    right: currentWritable(undefined)
 };

package/dist/internal/useFixed.d.ts

@@ -7,5 +7,5 @@ type UseFixedOptions = ThrelteUseFrameOptions & {
  *
  * @Todo Can be removed if this or a similar feature is merged.
  */
-export declare const useFixed: (fn: (ctx: ThrelteContext, delta: number) => void, options: UseFixedOptions) => import("@threlte/core/dist/hooks/useFrame").ThrelteUseFrame;
+export declare const useFixed: (fn: (ctx: ThrelteContext, delta: number) => void, options: UseFixedOptions) => import("@threlte/core/dist/hooks/legacy/useFrame").ThrelteUseFrame;
 export {};

package/dist/internal/useHandTrackingState.js

@@ -7,7 +7,7 @@ export const useHandTrackingState = () => {
     const { xr } = useThrelte().renderer;
     return () => {
         let handTracking = false;
-        xr.getSession()?.inputSources.forEach((value) => {
+        xr.getSession()?.inputSources?.forEach((value) => {
             if (value.hand) {
                 handTracking = true;
             }

package/dist/lib/toggleXRSession.js

@@ -21,12 +21,12 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
         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.');
     }
+    // Otherwise enter a session
+    const options = getXRSessionOptions(referenceSpaceType.current, sessionInit);
+    const nextSession = await navigator.xr.requestSession(sessionMode, options);
     await xr.current.setSession(nextSession);
     session.set(nextSession);
     return nextSession;

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

@@ -1,18 +1,19 @@
+import type { Mesh, Raycaster, Intersection } from 'three';
 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;
+    interactiveObjects: Mesh[];
+    surfaces: Map<string, Mesh>;
+    blockers: Map<string, Mesh>;
+    dispatchers: WeakMap<Mesh, ReturnType<typeof createRawEventDispatcher>>;
+    raycaster: Raycaster;
     compute: ComputeFunction;
 }
 export interface HandContext {
     hand: 'left' | 'right';
     enabled: CurrentWritable<boolean>;
     active: CurrentWritable<boolean>;
-    hovered: CurrentWritable<THREE.Intersection | undefined>;
+    hovered: CurrentWritable<Intersection | undefined>;
 }
 export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
 export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;

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

@@ -1,6 +1,7 @@
+import type { Mesh } from 'three';
 export declare const useTeleportControls: () => {
-    addSurface: (mesh: THREE.Mesh) => void;
-    removeSurface: (mesh: THREE.Mesh) => void;
-    addBlocker: (mesh: THREE.Mesh) => void;
-    removeBlocker: (mesh: THREE.Mesh) => void;
+    addSurface: (mesh: Mesh) => void;
+    removeSurface: (mesh: Mesh) => void;
+    addBlocker: (mesh: Mesh) => void;
+    removeBlocker: (mesh: Mesh) => void;
 };

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

@@ -14,6 +14,6 @@ export interface TeleportControlsOptions {
 }
 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>;
+    hovered: import("@threlte/core").CurrentWritable<import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined>;
     active: import("@threlte/core").CurrentWritable<boolean>;
 };

package/dist/types.d.ts

@@ -1,32 +1,34 @@
 /// <reference types="webxr" />
+import type { Event, Group, XRTargetRaySpace, XRGripSpace, XRHandSpace } from 'three';
 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 & {
+export type XRSessionEvent<Type = XRSessionEventType> = Event & {
     type: Type;
     target: XRSession;
 };
-export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
+export type XRControllerEvent<Type = XRControllerEventType> = Event & {
     type: Type;
-    target: THREE.Group;
+    target: Group;
     data: XRInputSource;
 };
 export type XRController = {
-    targetRay: THREE.XRTargetRaySpace;
-    grip: THREE.XRGripSpace;
-    model?: XRControllerModel;
+    targetRay: XRTargetRaySpace;
+    grip: XRGripSpace;
+    model?: XRControllerModel | undefined;
     inputSource: XRInputSource;
 };
 export type XRHand = {
-    hand: THREE.XRHandSpace;
+    targetRay: XRTargetRaySpace;
+    hand: XRHandSpace;
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
 export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
-    target: THREE.XRHandSpace;
+    target: XRHandSpace;
     data: XRInputSource;
 } : Type extends 'pinchstart' | 'pinchend' ? {
     type: Type;

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "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",
+    "@types/three": "^0.158.3",
     "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",
+    "three": "^0.158.0",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-mkcert": "^1.16.0",
-    "@threlte/core": "6.1.0"
+    "@threlte/core": "7.0.0"
   },
   "peerDependencies": {
     "svelte": ">=4",

package/dist/internal/headset.d.ts

@@ -1,3 +0,0 @@
-import { Group } from 'three';
-export declare const headset: Group;
-export declare const useUpdateHeadset: () => void;

package/dist/internal/updateRaf.d.ts

@@ -1 +0,0 @@
-export declare const updateRaf: () => void;

package/dist/plugins/pointerControls/types.d.ts

@@ -1,61 +0,0 @@
-import type { CurrentWritable } from '@threlte/core';
-import type { ComputeFunction } from './compute';
-export type Properties<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
-}[keyof T]>;
-export interface Intersection extends THREE.Intersection {
-    /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
-}
-export interface IntersectionEvent extends Intersection {
-    /** The event source (the object which registered the handler) */
-    eventObject: THREE.Object3D;
-    /** An array of intersections */
-    intersections: Intersection[];
-    /** Normalized event coordinates */
-    pointer: THREE.Vector3;
-    /** Delta between first click and this event */
-    delta: number;
-    /** The ray that pierced it */
-    ray: THREE.Ray;
-    /** stopPropagation will stop underlying handlers from firing */
-    stopPropagation: () => void;
-    /** The original host event */
-    nativeEvent: THREE.Event | undefined;
-    /** If the event was stopped by calling stopPropagation */
-    stopped: boolean;
-}
-export type FilterFunction = (items: THREE.Intersection[], state: ControlsContext, handState: HandContext) => THREE.Intersection[];
-export type ControlsContext = {
-    interactiveObjects: THREE.Object3D[];
-    raycaster: THREE.Raycaster;
-    compute: ComputeFunction;
-    filter?: FilterFunction | undefined;
-};
-export type HandContext = {
-    hand: 'left' | 'right';
-    enabled: CurrentWritable<boolean>;
-    pointer: CurrentWritable<THREE.Vector3>;
-    pointerOverTarget: CurrentWritable<boolean>;
-    lastEvent: THREE.Event | undefined;
-    initialClick: [x: number, y: number, z: number];
-    initialHits: THREE.Object3D[];
-    hovered: Map<string, IntersectionEvent>;
-};
-export interface PointerCaptureTarget {
-    intersection: Intersection;
-    target: Element;
-}
-export type ThrelteXREvents = {
-    click: IntersectionEvent;
-    contextmenu: IntersectionEvent;
-    pointerup: IntersectionEvent;
-    pointerdown: IntersectionEvent;
-    pointerover: IntersectionEvent;
-    pointerout: IntersectionEvent;
-    pointerenter: IntersectionEvent;
-    pointerleave: IntersectionEvent;
-    pointermove: IntersectionEvent;
-    pointermissed: IntersectionEvent;
-};
-export declare const events: (keyof ThrelteXREvents)[];