@threlte/xr 1.0.0-next.0 → 1.0.0-next.10

package/dist/plugins/pointerControls/setup.js

@@ -24,10 +24,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         handContext.initialClick = [hit.point.x, hit.point.y, hit.point.z];
         handContext.initialHits = hits.map((hit) => hit.eventObject);
-        handleEvent('pointerdown', event);
+        handleEvent('onpointerdown', event);
     };
     const handlePointerUp = (event) => {
-        handleEvent('pointerup', event);
+        handleEvent('onpointerup', event);
     };
     const handleClick = (event) => {
         // If a click yields no results, pass it back to the user as a miss
@@ -35,7 +35,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (hits.length === 0) {
             pointerMissed(context.interactiveObjects, event);
         }
-        handleEvent('click', event);
+        handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
         for (const [, hoveredObj] of handContext.hovered) {
@@ -47,12 +47,12 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     hit.instanceId === hoveredObj.instanceId)) {
                 const { eventObject } = hoveredObj;
                 handContext.hovered.delete(getIntersectionId(hoveredObj));
-                const eventDispatcher = dispatchers.get(eventObject);
-                if (eventDispatcher) {
+                const events = dispatchers.get(eventObject);
+                if (events !== undefined) {
                     // Clear out intersects, they are outdated by now
                     const data = { ...hoveredObj, intersections };
-                    eventDispatcher('pointerout', data);
-                    eventDispatcher('pointerleave', data);
+                    events.onpointerout?.(data);
+                    events.onpointerleave?.(data);
                     // Deal with cancelation
                     handContext.pointerOverTarget.set(false);
                     cancelPointer([]);
@@ -80,7 +80,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     function pointerMissed(objects, event) {
         for (const object of objects) {
-            dispatchers.get(object)?.('pointermissed', event);
+            dispatchers.get(object)?.pointermissed?.(event);
         }
     }
     function processHits() {
@@ -88,8 +88,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         return getHits();
     }
     const handleEvent = (name, event) => {
-        const isPointerMove = name === 'pointermove';
-        const isClickEvent = name === 'click' || name === 'contextmenu';
+        const isPointerMove = name === 'onpointermove';
+        const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
         // Take care of unhover
         if (isPointerMove)
             cancelPointer(hits);
@@ -115,23 +115,23 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 pointer: handContext.pointer.current,
                 ray: context.raycaster.ray
             };
-            const eventDispatcher = dispatchers.get(hit.eventObject);
-            if (eventDispatcher === undefined)
+            const events = dispatchers.get(hit.eventObject);
+            if (events === undefined)
                 return;
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));
-                if (eventDispatcher.hasEventListener('pointerover') ||
-                    eventDispatcher.hasEventListener('pointerenter') ||
-                    eventDispatcher.hasEventListener('pointerout') ||
-                    eventDispatcher.hasEventListener('pointerleave')) {
+                if (events.onpointerover ||
+                    events.onpointerenter ||
+                    events.onpointerout ||
+                    events.onpointerleave) {
                     const id = getIntersectionId(intersectionEvent);
                     const hoveredItem = handContext.hovered.get(id);
                     if (hoveredItem === undefined) {
                         // If the object wasn't previously hovered, book it and call its handler
                         handContext.hovered.set(id, intersectionEvent);
-                        eventDispatcher('pointerover', intersectionEvent);
-                        eventDispatcher('pointerenter', intersectionEvent);
+                        events.onpointerover?.(intersectionEvent);
+                        events.onpointerenter?.(intersectionEvent);
                         handContext.pointerOverTarget.set(true);
                     }
                     else if (hoveredItem.stopped) {
@@ -140,14 +140,14 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     }
                 }
                 // Call pointer move
-                eventDispatcher('pointermove', intersectionEvent);
+                events.onpointermove?.(intersectionEvent);
             }
             else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                eventDispatcher.hasEventListener(name)) {
+                events[name] !== undefined) {
                 // Missed events have to come first
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
                 // Call the event
-                eventDispatcher(name, intersectionEvent);
+                events[name]?.(intersectionEvent);
             }
             else if (isClickEvent && handContext.initialHits.includes(hit.eventObject)) {
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
@@ -162,12 +162,12 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (targetRay === undefined)
             return;
         if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
-            handleEvent('pointermove');
+            handleEvent('onpointermove');
         }
         lastPosition.copy(targetRay.position);
     }, {
         fixedStep,
-        autostart: false
+        autoStart: false
     });
     watch(controller, (input) => {
         if (input === undefined)
@@ -181,17 +181,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             input.targetRay.removeEventListener('select', handleClick);
         };
     });
-    // watch(hand, (input) => {
-    //   if (input === undefined) return
-    //   input.hand.addEventListener('pinchstart', handlePointerDown)
-    //   input.hand.addEventListener('pinchend', handlePointerUp)
-    //   input.hand.addEventListener('pinchend', handleClick)
-    //   return () => {
-    //     input.hand.removeEventListener('pinchstart', handlePointerDown)
-    //     input.hand.removeEventListener('pinchend', handlePointerUp)
-    //     input.hand.removeEventListener('pinchend', handleClick)
-    //   }
-    // })
+    watch(hand, (input) => {
+        if (input === undefined)
+            return;
+        input.hand.addEventListener('pinchstart', handlePointerDown);
+        input.hand.addEventListener('pinchend', handlePointerUp);
+        input.hand.addEventListener('pinchend', handleClick);
+        return () => {
+            input.hand.removeEventListener('pinchstart', handlePointerDown);
+            input.hand.removeEventListener('pinchend', handlePointerUp);
+            input.hand.removeEventListener('pinchend', handleClick);
+        };
+    });
     watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
         if (isPresenting && enabled) {
             start();

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

@@ -48,15 +48,15 @@ export interface PointerCaptureTarget {
     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;
+    onclick: IntersectionEvent;
+    oncontextmenu: IntersectionEvent;
+    onpointerup: IntersectionEvent;
+    onpointerdown: IntersectionEvent;
+    onpointerover: IntersectionEvent;
+    onpointerout: IntersectionEvent;
+    onpointerenter: IntersectionEvent;
+    onpointerleave: IntersectionEvent;
+    onpointermove: IntersectionEvent;
+    onpointermissed: IntersectionEvent;
 };
 export declare const events: (keyof ThrelteXREvents)[];

package/dist/plugins/pointerControls/types.js

@@ -1,11 +1,11 @@
 export const events = [
-    'click',
-    'contextmenu',
-    'pointerup',
-    'pointerdown',
-    'pointerover',
-    'pointerout',
-    'pointerenter',
-    'pointerleave',
-    'pointermove'
+    'onclick',
+    'oncontextmenu',
+    'onpointerup',
+    'onpointerdown',
+    'onpointerover',
+    'onpointerout',
+    'onpointerenter',
+    'onpointerleave',
+    'onpointermove'
 ];

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

@@ -1,13 +1,19 @@
-import type { Mesh, Raycaster, Intersection } from 'three';
-import type { CurrentWritable, createRawEventDispatcher } from '@threlte/core';
+import { type Mesh, Raycaster, type Intersection } from 'three';
+import type { CurrentWritable } from '@threlte/core';
+import type { TeleportControlsOptions } from '.';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
+export type TeleportEvents = {};
 export interface Context {
     interactiveObjects: Mesh[];
     surfaces: Map<string, Mesh>;
     blockers: Map<string, Mesh>;
-    dispatchers: WeakMap<Mesh, ReturnType<typeof createRawEventDispatcher>>;
+    dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
     raycaster: Raycaster;
     compute: ComputeFunction;
+    addBlocker: (mesh: Mesh) => void;
+    removeBlocker: (mesh: Mesh) => void;
+    addSurface: (mesh: Mesh, events: TeleportEvents) => void;
+    removeSurface: (mesh: Mesh) => void;
 }
 export interface HandContext {
     hand: 'left' | 'right';
@@ -17,5 +23,5 @@ export interface HandContext {
 }
 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;
+export declare const useTeleportControls: () => Context;
+export declare const createTeleportContext: (compute: TeleportControlsOptions['compute']) => Context;

package/dist/plugins/teleportControls/context.js

@@ -1,4 +1,6 @@
+import { Raycaster } from 'three';
 import { getContext, setContext } from 'svelte';
+import { defaultComputeFunction } from './compute';
 const handContextKeys = {
     left: Symbol('teleport-controls-context-left-hand'),
     right: Symbol('teleport-controls-context-right-hand')
@@ -10,9 +12,50 @@ export const getHandContext = (hand) => {
 export const setHandContext = (hand, context) => {
     setContext(handContextKeys[hand], context);
 };
-export const getTeleportContext = () => {
+export const useTeleportControls = () => {
     return getContext(contextKey);
 };
-export const setTeleportContext = (context) => {
+export const createTeleportContext = (compute) => {
+    const addSurface = (mesh, events) => {
+        // 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, events);
+    };
+    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);
+    };
+    const context = {
+        interactiveObjects: [],
+        surfaces: new Map(),
+        blockers: new Map(),
+        dispatchers: new WeakMap(),
+        raycaster: new Raycaster(),
+        compute: compute ?? defaultComputeFunction,
+        addBlocker,
+        removeBlocker,
+        addSurface,
+        removeSurface
+    };
     setContext(contextKey, context);
+    return context;
 };

package/dist/plugins/teleportControls/index.js

@@ -1,25 +1,16 @@
-import { Raycaster } from 'three';
 import { currentWritable, watch } from '@threlte/core';
-import { setTeleportContext, getTeleportContext, getHandContext } from './context';
+import { createTeleportContext, useTeleportControls, 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) {
+    if (useTeleportControls() === undefined) {
         injectTeleportControlsPlugin();
-        setTeleportContext({
-            interactiveObjects: [],
-            surfaces: new Map(),
-            blockers: new Map(),
-            dispatchers: new WeakMap(),
-            raycaster: new Raycaster(),
-            compute: options?.compute ?? defaultComputeFunction
-        });
+        createTeleportContext(options?.compute);
     }
-    const context = getTeleportContext();
+    const context = useTeleportControls();
     if (getHandContext(handedness) === undefined) {
         const enabled = options?.enabled ?? true;
         controlsCounter += enabled ? 1 : -1;

package/dist/plugins/teleportControls/plugin.js

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

package/dist/plugins/teleportControls/setup.js

@@ -49,7 +49,7 @@ export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40)
         handContext.hovered.set(intersect);
     }, {
         fixedStep,
-        autostart: false
+        autoStart: false
     });
     watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
         if (isPresenting && enabled) {

package/dist/types.d.ts

@@ -4,16 +4,27 @@ import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerMod
 import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
 export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
+export type XRControllerEvents = {
+    onconnected?: XRControllerEventCallback<'connected'>;
+    ondisconnected?: XRControllerEventCallback<'disconnected'>;
+    onselect?: XRControllerEventCallback<'select'>;
+    onselectstart?: XRControllerEventCallback<'selectstart'>;
+    onselectend?: XRControllerEventCallback<'selectend'>;
+    onsqueeze?: XRControllerEventCallback<'squeeze'>;
+    onsqueezeend?: XRControllerEventCallback<'squeezeend'>;
+    onsqueezestart?: XRControllerEventCallback<'squeezestart'>;
+};
 export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
-export type XRSessionEvent<Type = XRSessionEventType> = Event & {
+export type XRSessionEvent<Type = XRSessionEventType> = (event: Event & {
     type: Type;
     target: XRSession;
-};
+}) => void;
 export type XRControllerEvent<Type = XRControllerEventType> = Event & {
     type: Type;
     target: Group;
     data: XRInputSource;
 };
+export type XRControllerEventCallback<Type = XRControllerEventType> = (event: XRControllerEvent<Type>) => void;
 export type XRController = {
     targetRay: XRTargetRaySpace;
     grip: XRGripSpace;
@@ -35,3 +46,10 @@ export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'di
     handedness: 'left' | 'right';
     target: null;
 } : never;
+export type XRHandEventCallback<Type> = (event: XRHandEvent<Type>) => void;
+export type XRHandEvents = {
+    onconnected?: XRHandEventCallback<'connected'>;
+    ondisconnected?: XRHandEventCallback<'disconnected'>;
+    onpinchstart?: XRHandEventCallback<'pinchstart'>;
+    onpinchend?: XRHandEventCallback<'pinchend'>;
+};

package/package.json

@@ -1,35 +1,55 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.10",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
+  "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/kit": "^2.7.2",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "eslint": "^9.0.0",
     "eslint-plugin-svelte": "^2.36.0",
     "svelte-check": "^3.6.9",
-    "typescript": "^5.4.4",
-    "@types/three": "^0.163.0",
+    "typescript": "^5.4.5",
+    "@types/three": "^0.169.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^4.2.12",
-    "three": "^0.163.0",
+    "svelte": "^5.0.5",
+    "three": "^0.169.0",
     "tslib": "^2.6.2",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.0"
+    "@threlte/core": "8.0.0-next.21"
   },
   "peerDependencies": {
-    "svelte": ">=4",
-    "three": ">=0.152"
+    "svelte": ">=5",
+    "three": ">=0.155"
   },
   "type": "module",
+  "keywords": [
+    "webxr",
+    "vr",
+    "ar",
+    "threlte",
+    "svelte",
+    "three",
+    "three.js",
+    "3d"
+  ],
+  "homepage": "https://threlte.xyz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/threlte/threlte.git",
+    "directory": "packages/xr"
+  },
+  "bugs": {
+    "url": "https://github.com/threlte/threlte/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -48,8 +68,8 @@
     "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=. .",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
     "cleanup": "rimraf node_modules .svelte-kit dist"
   }
 }

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

@@ -1,4 +0,0 @@
-/// <reference types="svelte" />
-export declare const useComponentHasEventHandlers: () => {
-    hasEventHandlers: import("svelte/store").Writable<boolean>;
-};

package/dist/plugins/pointerControls/useComponentEventHandlers.js

@@ -1,13 +0,0 @@
-import { onMount } from 'svelte';
-import { writable } from 'svelte/store';
-// import { events } from './types'
-export const useComponentHasEventHandlers = () => {
-    const hasEventHandlers = writable(false);
-    onMount(() => {
-        // const match = Object.keys(component.$$.callbacks).some((callback) => events.includes(callback))
-        hasEventHandlers.set(true);
-    });
-    return {
-        hasEventHandlers
-    };
-};

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

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

package/dist/plugins/teleportControls/hook.js

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