@threlte/xr 1.3.0 → 1.5.0

package/dist/components/Controller.svelte

@@ -72,7 +72,7 @@
 
   const { scene } = useThrelte()
 
-  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
+  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
     controllerEvents[handedness] = {

package/dist/components/Hand.svelte

@@ -47,7 +47,7 @@
 
   const { scene, renderer, scheduler, renderStage } = useThrelte()
 
-  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
+  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : (hand ?? 'left'))
 
   $effect.pre(() => {
     handEvents[handedness] = {

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/index.js

@@ -1,5 +1,5 @@
 import { Raycaster, Vector3 } from 'three';
-import { currentWritable, watch } from '@threlte/core';
+import { currentWritable, observe } from '@threlte/core';
 import { defaultComputeFunction } from './compute.js';
 import { injectPointerControlsPlugin } from './plugin.svelte.js';
 import { setupPointerControls } from './setup.svelte.js';
@@ -34,11 +34,11 @@ export const pointerControls = (handedness, options) => {
         setupPointerControls(context, ctx, options?.fixedStep);
     }
     const handContext = getHandContext(handedness);
-    watch(handContext.enabled, (enabled) => {
+    observe.pre(() => [handContext.enabled], ([enabled]) => {
         controlsCounter += enabled ? 1 : -1;
         pointerState[handedness].enabled = controlsCounter > 0;
     });
-    watch(handContext.pointerOverTarget, (hovering) => {
+    observe.pre(() => [handContext.pointerOverTarget], ([hovering]) => {
         pointerState[handedness].hovering = hovering;
     });
     return {

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

@@ -1,5 +1,5 @@
 import { Vector3 } from 'three';
-import { observe, watch } from '@threlte/core';
+import { observe } from '@threlte/core';
 import { getInternalContext } from './context.js';
 import { controllers } from '../../hooks/useController.svelte.js';
 import { useHand } from '../../hooks/useHand.svelte.js';
@@ -187,7 +187,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         }
     });
-    watch([hand, handContext.enabled], ([input, enabled]) => {
+    observe.pre(() => [hand, handContext.enabled], ([input, enabled]) => {
         if (input === undefined)
             return;
         const removeHandlers = () => {

package/dist/plugins/teleportControls/index.js

@@ -1,4 +1,4 @@
-import { currentWritable, watch } from '@threlte/core';
+import { currentWritable, observe } from '@threlte/core';
 import { createTeleportContext, useTeleportControls, getHandContext } from './context.js';
 import { injectTeleportControlsPlugin } from './plugin.svelte.js';
 import { setHandContext } from './context.js';
@@ -24,11 +24,11 @@ export const teleportControls = (handedness, options) => {
         setupTeleportControls(context, ctx, options?.fixedStep);
     }
     const handContext = getHandContext(handedness);
-    watch(handContext.enabled, (enabled) => {
+    observe.pre(() => [handContext.enabled], ([enabled]) => {
         controlsCounter += enabled ? 1 : -1;
         teleportState[handedness].enabled = controlsCounter > 0;
     });
-    watch(handContext.active, (hovering) => {
+    observe.pre(() => [handContext.active], ([hovering]) => {
         teleportState[handedness].hovering = hovering;
     });
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.3.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",
@@ -17,8 +17,10 @@
     "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.1.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "publint": "^0.2.7",
-    "svelte": "5.26.2",
+    "svelte": "5.53.6",
     "svelte-check": "^4.3.1",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
@@ -26,7 +28,7 @@
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.4.0"
+    "@threlte/core": "8.5.2"
   },
   "peerDependencies": {
     "svelte": ">=5",
@@ -46,7 +48,7 @@
   "homepage": "https://threlte.xyz",
   "repository": {
     "type": "git",
-    "url": "https://github.com/threlte/threlte.git",
+    "url": "https://github.com/threlte/threlte",
     "directory": "packages/xr"
   },
   "bugs": {