@threlte/xr 1.4.0 → 1.5.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "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.2"
   },
   "peerDependencies": {
     "svelte": ">=5",