Fixed code WebXR Hands code.

Author: mrdoob

examples/jsm/webxr/OculusHandModel.js

@@ -1,10 +1,6 @@
 import { Object3D, Sphere, Box3 } from '../../../build/three.module.js';
-import { fetchProfile } from '../libs/motion-controllers.module.js';
 import { XRHandMeshModel } from './XRHandMeshModel.js';
 
-const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles';
-const DEFAULT_PROFILE = 'generic-hand';
-
 const TOUCH_RADIUS = 0.01;
 const POINTING_JOINT = 'index-finger-tip';
 
@@ -23,23 +19,13 @@ class OculusHandModel extends Object3D {
 		controller.addEventListener( 'connected', ( event ) => {
 
 			const xrInputSource = event.data;
+
 			if ( xrInputSource.hand && ! this.motionController ) {
 
 				this.visible = true;
 				this.xrInputSource = xrInputSource;
-				fetchProfile( xrInputSource, DEFAULT_PROFILES_PATH, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
-
-					this.motionController = new XRHandMeshModel(
-						this,
-						controller,
-						assetPath
-					);
-
-				} ).catch( ( err ) => {
-
-					console.warn( err );
 
-				} );
+				this.motionController = new XRHandMeshModel( this, controller, this.path, xrInputSource.handedness );
 
 			}
 

examples/jsm/webxr/XRHandMeshModel.js

@@ -1,17 +1,19 @@
 import { GLTFLoader } from '../loaders/GLTFLoader.js';
 
+const DEFAULT_HAND_PROFILE_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles/generic-hand/';
+
 class XRHandMeshModel {
 
-	constructor( handModel, controller, assetUrl ) {
+	constructor( handModel, controller, path, handedness ) {
 
 		this.controller = controller;
 		this.handModel = handModel;
 
 		this.bones = [];
-		const loader = new GLTFLoader();
 
-		loader.setPath( '' );
-		loader.load( assetUrl, gltf => {
+		const loader = new GLTFLoader();
+		loader.setPath( path || DEFAULT_HAND_PROFILE_PATH );
+		loader.load( `${handedness}.glb`, gltf => {
 
 			const object = gltf.scene.children[ 0 ];
 			this.handModel.add( object );
@@ -21,6 +23,8 @@ class XRHandMeshModel {
 			mesh.castShadow = true;
 			mesh.receiveShadow = true;
 
+			mesh.material.side = 0; // Workaround: force FrontSide
+
 			const joints = [
 				'wrist',
 				'thumb-metacarpal',
@@ -52,6 +56,7 @@ class XRHandMeshModel {
 			joints.forEach( jointName => {
 
 				const bone = object.getObjectByName( jointName );
+
 				if ( bone !== undefined ) {
 
 					bone.jointName = jointName;
@@ -74,15 +79,19 @@ class XRHandMeshModel {
 
 		// XR Joints
 		const XRJoints = this.controller.joints;
+
 		for ( let i = 0; i < this.bones.length; i ++ ) {
 
 			const bone = this.bones[ i ];
+
 			if ( bone ) {
 
 				const XRJoint = XRJoints[ bone.jointName ];
+
 				if ( XRJoint.visible ) {
 
 					const position = XRJoint.position;
+
 					if ( bone ) {
 
 						bone.position.copy( position );

examples/jsm/webxr/XRHandModelFactory.js

@@ -10,13 +10,6 @@ import {
 	XRHandMeshModel
 } from './XRHandMeshModel.js';
 
-import {
-	fetchProfile
-} from '../libs/motion-controllers.module.js';
-
-const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles';
-const DEFAULT_PROFILE = 'generic-hand';
-
 class XRHandModel extends Object3D {
 
 	constructor( controller ) {
@@ -49,18 +42,19 @@ class XRHandModelFactory {
 
 	constructor() {
 
-		this.path = '';
+		this.path = null;
 
 	}
 
 	setPath( path ) {
 
 		this.path = path;
+
 		return this;
 
 	}
 
-	createHandModel( controller, profile, options ) {
+	createHandModel( controller, profile ) {
 
 		const handModel = new XRHandModel( controller );
 
@@ -70,7 +64,6 @@ class XRHandModelFactory {
 
 			if ( xrInputSource.hand && ! handModel.motionController ) {
 
-				handModel.visible = true;
 				handModel.xrInputSource = xrInputSource;
 
 				// @todo Detect profile if not provided
@@ -82,17 +75,9 @@ class XRHandModelFactory {
 
 					handModel.motionController = new XRHandPrimitiveModel( handModel, controller, this.path, xrInputSource.handedness, { primitive: 'box' } );
 
-				} else if ( profile === 'oculus' ) {
-
-					fetchProfile( xrInputSource, DEFAULT_PROFILES_PATH, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
-
-						handModel.motionController = new XRHandMeshModel( handModel, controller, assetPath );
-
-					} ).catch( ( err ) => {
-
-						console.warn( err );
+				} else if ( profile === 'mesh' ) {
 
-					} );
+					handModel.motionController = new XRHandMeshModel( handModel, controller, this.path, xrInputSource.handedness );
 
 				}
 

examples/webxr_vr_handinput.html

@@ -87,7 +87,7 @@
 				scene.add( controller2 );
 
 				const controllerModelFactory = new XRControllerModelFactory();
-				const handModelFactory = new XRHandModelFactory().setPath( "./models/gltf/" );
+				const handModelFactory = new XRHandModelFactory();
 
 				// Hand 1
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );

examples/webxr_vr_handinput_cubes.html

@@ -100,7 +100,7 @@
 				scene.add( controller2 );
 
 				const controllerModelFactory = new XRControllerModelFactory();
-				const handModelFactory = new XRHandModelFactory().setPath( "./models/gltf/" );
+				const handModelFactory = new XRHandModelFactory();
 
 				// Hand 1
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );

examples/webxr_vr_handinput_profiles.html

@@ -99,7 +99,7 @@
 				scene.add( controller2 );
 
 				const controllerModelFactory = new XRControllerModelFactory();
-				const handModelFactory = new XRHandModelFactory().setPath( "./models/gltf/" );
+				const handModelFactory = new XRHandModelFactory();
 
 				// Hand 1