WebXR: Added model caching to XRHandModelFactory. (#33252)

Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

examples/jsm/webxr/XRHandMeshModel.js

@@ -1,4 +1,5 @@
 import { GLTFLoader } from '../loaders/GLTFLoader.js';
+import { clone } from '../utils/SkeletonUtils.js';
 
 const DEFAULT_HAND_PROFILE_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/generic-hand/';
 
@@ -20,8 +21,9 @@ class XRHandMeshModel {
 	 * @param {XRHandedness} handedness - The handedness of the XR input source.
 	 * @param {?Loader} [loader=null] - The loader. If not provided, an instance of `GLTFLoader` will be used to load models.
 	 * @param {?Function} [onLoad=null] - A callback that is executed when a controller model has been loaded.
+	 * @param {?Object} [customCache=null] - An optional shared cache object for storing and reusing loaded assets across instances.
 	 */
-	constructor( handModel, controller, path, handedness, loader = null, onLoad = null ) {
+	constructor( handModel, controller, path, handedness, loader = null, onLoad = null, customCache = null ) {
 
 		/**
 		 * The WebXR controller.
@@ -45,16 +47,11 @@ class XRHandMeshModel {
 		 */
 		this.bones = [];
 
-		if ( loader === null ) {
+		const pathToUse = path || DEFAULT_HAND_PROFILE_PATH;
 
-			loader = new GLTFLoader();
-			loader.setPath( path || DEFAULT_HAND_PROFILE_PATH );
+		const processAsset = ( gltf ) => {
 
-		}
-
-		loader.load( `${handedness}.glb`, gltf => {
-
-			const object = gltf.scene.children[ 0 ];
+			const object = clone( gltf.scene.children[ 0 ] );
 			this.handModel.add( object );
 
 			const mesh = object.getObjectByProperty( 'type', 'SkinnedMesh' );
@@ -110,7 +107,36 @@ class XRHandMeshModel {
 
 			if ( onLoad ) onLoad( object );
 
-		} );
+		};
+
+		const assetUrl = `${pathToUse}${handedness}.glb`;
+
+		if ( customCache && customCache[ assetUrl ] ) {
+
+			processAsset( customCache[ assetUrl ] );
+
+		} else {
+
+			if ( loader === null ) {
+
+				loader = new GLTFLoader();
+				loader.setPath( pathToUse );
+
+			}
+
+			loader.load( `${handedness}.glb`, gltf => {
+
+				if ( customCache ) {
+
+					customCache[ assetUrl ] = gltf;
+
+				}
+
+				processAsset( gltf );
+
+			} );
+
+		}
 
 	}
 

examples/jsm/webxr/XRHandModelFactory.js

@@ -118,6 +118,7 @@ class XRHandModelFactory {
 		 * @default null
 		 */
 		this.path = null;
+		this._assetCache = {};
 
 		/**
 		 * A callback that is executed when a hand model has been loaded.
@@ -173,7 +174,7 @@ class XRHandModelFactory {
 
 				} else if ( profile === 'mesh' ) {
 
-					handModel.motionController = new XRHandMeshModel( handModel, controller, this.path, xrInputSource.handedness, this.gltfLoader, this.onLoad );
+					handModel.motionController = new XRHandMeshModel( handModel, controller, this.path, xrInputSource.handedness, this.gltfLoader, this.onLoad, this._assetCache );
 
 				}