@threlte/xr 1.4.0 → 1.5.1

package/dist/components/XR.svelte

@@ -19,6 +19,8 @@ This should be placed within a Threlte `<Canvas />`.
 -->
 <script lang="ts">
   import type { EventListener, WebXRManager, Event as ThreeEvent } from 'three'
+  import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js'
+  import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js'
   import type { Snippet } from 'svelte'
   import { useThrelte } from '@threlte/core'
   import {
@@ -65,6 +67,12 @@ This should be placed within a Threlte `<Canvas />`.
     /** Called after an XRSession is ended */
     onsessionend?: (event: XRSessionEvent) => void
 
+    /** Optionally provide custom XRHandModelFactory */
+    handFactory?: XRHandModelFactory
+
+    /** Optionally provide custom XRControllerModelFactory */
+    controllerFactory?: XRControllerModelFactory
+
     /** Called when an XRSession is hidden or unfocused. */
     onvisibilitychange?: (event: XRSessionEvent) => void
 
@@ -81,7 +89,9 @@ This should be placed within a Threlte `<Canvas />`.
     onvisibilitychange,
     oninputsourceschange,
     fallback,
-    children
+    children,
+    handFactory,
+    controllerFactory
   }: Props = $props()
 
   const { renderer, renderMode } = useThrelte()
@@ -90,8 +100,8 @@ This should be placed within a Threlte `<Canvas />`.
 
   setupRaf()
   setupHeadset()
-  setupControllers()
-  setupHands()
+  setupControllers(controllerFactory)
+  setupHands(handFactory)
 
   const handleSessionStart: EventListener<object, 'sessionstart', WebXRManager> = (event) => {
     isPresenting.current = true

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

@@ -1,4 +1,6 @@
 import type { WebXRManager, Event as ThreeEvent } from 'three';
+import type { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
+import type { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
 import type { Snippet } from 'svelte';
 interface Props {
     /**
@@ -26,6 +28,10 @@ interface Props {
     onsessionstart?: (event: ThreeEvent<'sessionstart', WebXRManager>) => void;
     /** Called after an XRSession is ended */
     onsessionend?: (event: XRSessionEvent) => void;
+    /** Optionally provide custom XRHandModelFactory */
+    handFactory?: XRHandModelFactory;
+    /** Optionally provide custom XRControllerModelFactory */
+    controllerFactory?: XRControllerModelFactory;
     /** Called when an XRSession is hidden or unfocused. */
     onvisibilitychange?: (event: XRSessionEvent) => void;
     /** Called when available inputsources change */

package/dist/internal/setupControllers.d.ts

@@ -1 +1,2 @@
-export declare const setupControllers: () => void;
+import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
+export declare const setupControllers: (factory?: XRControllerModelFactory) => void;

package/dist/internal/setupControllers.js

@@ -4,17 +4,17 @@ import { onMount } from 'svelte';
 import { useHandTrackingState } from './useHandTrackingState.js';
 import { controllers } from '../hooks/useController.svelte.js';
 import { controllerEvents } from './state.svelte.js';
-export const setupControllers = () => {
-    const factory = new XRControllerModelFactory();
+export const setupControllers = (factory) => {
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
     const targetRaySpaces = [xr.getController(0), xr.getController(1)];
     const indexMap = new Map();
     targetRaySpaces.forEach((targetRay, index) => {
+        const model = (factory ?? new XRControllerModelFactory()).createControllerModel(targetRay);
         indexMap.set(targetRay, {
             targetRay,
             grip: xr.getControllerGrip(index),
-            model: factory.createControllerModel(targetRay)
+            model
         });
     });
     onMount(() => {

package/dist/internal/setupHands.d.ts

@@ -1 +1,2 @@
-export declare const setupHands: () => void;
+import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
+export declare const setupHands: (factory?: XRHandModelFactory) => void;

package/dist/internal/setupHands.js

@@ -4,17 +4,17 @@ import { onMount } from 'svelte';
 import { hands } from '../hooks/useHand.svelte.js';
 import { useHandTrackingState } from './useHandTrackingState.js';
 import { handEvents } from './state.svelte.js';
-export const setupHands = () => {
-    const factory = new XRHandModelFactory();
+export const setupHands = (factory) => {
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
     const handSpaces = [xr.getHand(0), xr.getHand(1)];
     const map = new Map();
     handSpaces.forEach((handSpace, index) => {
+        const model = (factory ?? new XRHandModelFactory()).createHandModel(handSpace, 'mesh');
         map.set(handSpace, {
             hand: handSpace,
             targetRay: xr.getController(index),
-            model: factory.createHandModel(handSpace, 'mesh')
+            model
         });
     });
     onMount(() => {

package/dist/plugins/pointerControls/plugin.svelte.js

@@ -11,6 +11,17 @@ export const injectPointerControlsPlugin = () => {
         if (!hasEventHandlers)
             return;
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
+        $effect.pre(() => {
+            const ref = args.ref;
+            const props = args.props;
+            const hasEventHandlers = events.some((eventName) => typeof props[eventName] === 'function');
+            if (!hasEventHandlers)
+                return;
+            addInteractiveObject(ref, props);
+            return () => {
+                removeInteractiveObject(ref);
+            };
+        });
         observe.pre(() => [args.ref], ([ref]) => {
             addInteractiveObject(ref, args.props);
             return () => removeInteractiveObject(ref);

package/dist/plugins/pointerControls/setup.svelte.js

@@ -6,7 +6,7 @@ import { useHand } from '../../hooks/useHand.svelte.js';
 import { useFixed } from '../../internal/useFixed.js';
 import { isPresenting, pointerIntersection } from '../../internal/state.svelte.js';
 const getIntersectionId = (intersection) => {
-    return `${(intersection.eventObject || intersection.object).uuid}/${intersection.index}${intersection.instanceId ?? ''}`;
+    return `${(intersection.eventObject || intersection.object).uuid}|${intersection.index}|${intersection.instanceId}`;
 };
 const EPSILON = 0.0001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
@@ -37,31 +37,49 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
-        for (const [, hoveredObj] of handContext.hovered) {
-            // When no objects were hit or the the hovered object wasn't found underneath the cursor
+        if (handContext.hovered.size === 0)
+            return;
+        const toRemove = [];
+        for (const [id, hoveredObj] of handContext.hovered) {
+            // When no objects were hit or the hovered object wasn't found underneath the cursor
             // we call pointerout and delete the object from the hovered elements map
             if (intersections.length === 0 ||
                 !intersections.some((hit) => hit.object === hoveredObj.object &&
                     hit.index === hoveredObj.index &&
                     hit.instanceId === hoveredObj.instanceId)) {
-                const { eventObject } = hoveredObj;
-                handContext.hovered.delete(getIntersectionId(hoveredObj));
-                const events = dispatchers.get(eventObject);
-                if (events !== undefined) {
-                    // Clear out intersects, they are outdated by now
-                    const data = { ...hoveredObj, intersections };
-                    events.onpointerout?.(data);
-                    events.onpointerleave?.(data);
-                    // Deal with cancelation
-                    handContext.pointerOverTarget.set(false);
-                    cancelPointer([]);
-                }
+                toRemove.push([id, hoveredObj]);
             }
         }
+        for (const [id, hoveredObj] of toRemove) {
+            const { eventObject } = hoveredObj;
+            handContext.hovered.delete(id);
+            const events = dispatchers.get(eventObject);
+            if (events !== undefined) {
+                // Clear out intersects, they are outdated by now
+                const data = { ...hoveredObj, intersections };
+                events.onpointerout?.(data);
+                events.onpointerleave?.(data);
+            }
+        }
+        if (handContext.hovered.size === 0) {
+            handContext.pointerOverTarget.set(false);
+        }
     }
     const getHits = () => {
         const intersections = [];
-        const hits = context.raycaster.intersectObjects(context.interactiveObjects, true);
+        const rawHits = context.raycaster.intersectObjects(context.interactiveObjects, true);
+        const seen = new Set();
+        const hits = rawHits.filter((hit) => {
+            const key = hit.instanceId !== undefined
+                ? `${hit.object.uuid}|${hit.instanceId}`
+                : hit.index !== undefined
+                    ? `${hit.object.uuid}|${hit.index}`
+                    : hit.object.uuid;
+            if (seen.has(key))
+                return false;
+            seen.add(key);
+            return true;
+        });
         const filtered = context.filter === undefined ? hits : context.filter(hits, context, handContext);
         pointerIntersection[handedness] = filtered[0];
         // Bubble up the events, find the event source (eventObject)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
@@ -28,7 +28,7 @@
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.5.0"
+    "@threlte/core": "8.5.4"
   },
   "peerDependencies": {
     "svelte": ">=5",