@needle-tools/engine 5.1.9 → 5.1.11

package/src/engine-components/webxr/controllers/XRControllerModel.ts

@@ -1,7 +1,6 @@
 import { AxesHelper, Group, Material, Mesh, Object3D, XRHandSpace } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory.js";
-import { XRHandMeshModel } from "three/examples/jsm/webxr/XRHandMeshModel.js";
 
 import { AssetReference } from "../../../engine/engine_addressables.js";
 import { setDontDestroy } from "../../../engine/engine_gameobject.js";
@@ -15,6 +14,7 @@ import { NeedleXRController, type NeedleXRControllerEventArgs, type NeedleXREven
 import { registerComponentExtension, registerExtensions } from "../../../engine/extensions/extensions.js";
 import { NEEDLE_progressive } from "../../../engine/extensions/NEEDLE_progressive.js";
 import { flipForwardMatrix } from "../../../engine/xr/internal.js";
+import { XRHandMeshModel } from "../../../engine/xr/XRHandMeshModel.js";
 import { Behaviour, Component, GameObject } from "../../Component.js"
 
 const debug = getParam("debugwebxr");
@@ -288,8 +288,6 @@ export class XRControllerModel extends Behaviour {
 
         const loader = new GLTFLoader();
         addDracoAndKTX2Loaders(loader, context);
-        await registerExtensions(loader, context, this.sourceId ?? "", this.sourceId ?? "");
-        const componentsExtension = registerComponentExtension(loader);
 
         let filename = "";
 
@@ -306,22 +304,30 @@ export class XRControllerModel extends Behaviour {
             loader.setPath('https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/generic-hand/');
         }
 
+        // The hand is a separate glTF and needs its own source id: its components resolve their
+        // relative uris against it (resolveUrl) and its lightmaps/skybox are keyed by it. Using
+        // this component's id resolved the hand's uris next to the HOST glb and let the hand's
+        // skybox overwrite the scene's. customHand.url is already resolved, `filename` is not
+        // (extension stripped for XRHandMeshModel).
+        const handSourceId = customHand?.url ?? `${loader.path}${filename}.glb`;
+        await registerExtensions(loader, context, handSourceId, handSourceId);
+        const componentsExtension = registerComponentExtension(loader);
+
 
         const handObject = new Object3D();
         setDontDestroy(handObject);
-        // @ts-ignore
         const handmesh = new XRHandMeshModel(handObject, hand, loader.path, filename, loader, (object: Object3D) => {
 
             const gltf = componentsExtension?.gltf;
-            // The XRHandMeshController removes the hand from the gltf before calling this callback
-            // we need this in the GLTF scene however for creating the builtin components 
+            // XRHandMeshModel reparents the hand out of the gltf scene before calling this
+            // callback; we need it back in the scene so the builtin components are created on it
             if (gltf?.scene.children?.length === 0) {
                 gltf.scene.children[0] = object;
             }
 
             // console.log(controller.side, componentsExtension.gltf, object, componentsExtension.gltf.scene?.children)
             if (componentsExtension?.gltf)
-                getLoader().createBuiltinComponents(comp.context, comp.sourceId || filename, componentsExtension.gltf, null, componentsExtension);
+                getLoader().createBuiltinComponents(comp.context, handSourceId, componentsExtension.gltf, null, componentsExtension);
 
             // The hand mesh should not receive raycasts
             object.traverse(child => {