WebXR hand mesh and profiles updated

examples/files.js

@@ -330,6 +330,7 @@ var files = {
 		"webxr_vr_dragging",
 		"webxr_vr_handinput",
 		"webxr_vr_handinput_simple",
+		"webxr_vr_handinput_profiles",
 		"webxr_vr_lorenzattractor",
 		"webxr_vr_panorama",
 		"webxr_vr_panorama_depth",

examples/jsm/webxr/WebXRHandController.js

@@ -1,39 +1,24 @@
 import {
-	Object3D,
-	SphereBufferGeometry,
-	MeshStandardMaterial,
-	Mesh
+	Object3D
 } from "../../../build/three.module.js";
 
+import {
+	XRHandPrimitiveModel
+} from "./XRHandPrimitiveModel.js";
+
+import {
+	XRHandOculusMeshModel
+} from "./XRHandOculusMeshModel.js";
+
 function XRHandModel( controller ) {
 
 	Object3D.call( this );
 
 	this.controller = controller;
+	this.motionController = null;
 	this.envMap = null;
 
-	if ( window.XRHand ) {
-
-		var geometry = new SphereBufferGeometry( 1, 10, 10 );
-		var jointMaterial = new MeshStandardMaterial( { color: 0x000000, roughness: 0.2, metalness: 0.8 } );
-		var tipMaterial = new MeshStandardMaterial( { color: 0x333333, roughness: 0.2, metalness: 0.8 } );
-
-		const tipIndexes = [
-			XRHand.THUMB_PHALANX_TIP,
-			XRHand.INDEX_PHALANX_TIP,
-			XRHand.MIDDLE_PHALANX_TIP,
-			XRHand.RING_PHALANX_TIP,
-			XRHand.LITTLE_PHALANX_TIP
-		];
-		for ( let i = 0; i <= XRHand.LITTLE_PHALANX_TIP; i ++ ) {
-
-			var cube = new Mesh( geometry, tipIndexes.indexOf( i ) !== - 1 ? tipMaterial : jointMaterial );
-			cube.castShadow = true;
-			this.add( cube );
-
-		}
-
-	}
+	this.mesh = null;
 
 }
 
@@ -45,34 +30,13 @@ XRHandModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
 
 		Object3D.prototype.updateMatrixWorld.call( this, force );
 
-		this.updateMesh();
-
-	},
-
-	updateMesh: function () {
-
-		const defaultRadius = 0.008;
+		if ( this.motionController ) {
 
-		// XR Joints
-		const XRJoints = this.controller.joints;
-		for ( var i = 0; i < this.children.length; i ++ ) {
-
-			const jointMesh = this.children[ i ];
-			const XRJoint = XRJoints[ i ];
-
-			if ( XRJoint.visible ) {
-
-				jointMesh.position.copy( XRJoint.position );
-				jointMesh.quaternion.copy( XRJoint.quaternion );
-				jointMesh.scale.setScalar( XRJoint.jointRadius || defaultRadius );
-
-			}
-
-			jointMesh.visible = XRJoint.visible;
+			this.motionController.updateMesh();
 
 		}
 
-	}
+	},
 } );
 
 
@@ -84,29 +48,44 @@ var XRHandModelFactory = ( function () {
 
 		constructor: XRHandModelFactory,
 
-		createHandModel: function ( controller ) {
+		createHandModel: function ( controller, profile, options ) {
 
 			const handModel = new XRHandModel( controller );
 			let scene = null;
 
 			controller.addEventListener( 'connected', ( event ) => {
 
 				const xrInputSource = event.data;
-				console.log( "Connected!", xrInputSource );
 
-				if ( xrInputSource.hand ) {
+				if ( xrInputSource.hand && ! handModel.motionController ) {
 
+					handModel.visible = true;
 					handModel.xrInputSource = xrInputSource;
 
+					// @todo Detect profile if not provided
+					if ( profile === undefined || profile === "spheres" ) {
+
+						handModel.motionController = new XRHandPrimitiveModel( handModel, controller, xrInputSource.handedness, { primitive: "sphere" } );
+
+					} else if ( profile === "boxes" ) {
+
+						handModel.motionController = new XRHandPrimitiveModel( handModel, controller, xrInputSource.handedness, { primitive: "box" } );
+
+					} else if ( profile === "oculus" ) {
+
+						handModel.motionController = new XRHandOculusMeshModel( handModel, controller, xrInputSource.handedness, options );
+
+					}
+
 				}
 
 			} );
 
 			controller.addEventListener( 'disconnected', () => {
 
-				handModel.motionController = null;
-				handModel.remove( scene );
-				scene = null;
+				// handModel.motionController = null;
+				// handModel.remove( scene );
+				// scene = null;
 
 			} );
 

examples/jsm/webxr/XRHandOculusMeshModel.js

@@ -0,0 +1,105 @@
+import { FBXLoader } from "../loaders/FBXLoader.js";
+
+class XRHandOculusMeshModel {
+
+	constructor( handModel, controller, handedness, options ) {
+
+		this.controller = controller;
+		this.handModel = handModel;
+
+		this.bones = [];
+		var loader = new FBXLoader();
+		const low = options && options.model === "lowpoly" ? "_low" : "";
+
+		loader.load( `/examples/models/fbx/OculusHand_${handedness === "right" ? "R" : "L"}${low}.fbx`, object => {
+
+			this.handModel.add( object );
+			// Hack because of the scale of the skinnedmesh
+			object.scale.setScalar( 0.01 );
+			object.getObjectByProperty( "type", "SkinnedMesh" ).frustumCulled = false;
+
+			const bonesMapping = [
+				'b_%_wrist', // XRHand.WRIST,
+
+				'b_%_thumb1', // XRHand.THUMB_METACARPAL,
+				'b_%_thumb2', // XRHand.THUMB_PHALANX_PROXIMAL,
+				'b_%_thumb3', // XRHand.THUMB_PHALANX_DISTAL,
+				'b_%_thumb_null', // XRHand.THUMB_PHALANX_TIP,
+
+				null, //'b_%_index1', // XRHand.INDEX_METACARPAL,
+				'b_%_index1', // XRHand.INDEX_PHALANX_PROXIMAL,
+				'b_%_index2', // XRHand.INDEX_PHALANX_INTERMEDIATE,
+				'b_%_index3', // XRHand.INDEX_PHALANX_DISTAL,
+				'b_%_index_null', // XRHand.INDEX_PHALANX_TIP,
+
+				null, //'b_%_middle1', // XRHand.MIDDLE_METACARPAL,
+				'b_%_middle1', // XRHand.MIDDLE_PHALANX_PROXIMAL,
+				'b_%_middle2', // XRHand.MIDDLE_PHALANX_INTERMEDIATE,
+				'b_%_middle3', // XRHand.MIDDLE_PHALANX_DISTAL,
+				'b_%_middlenull', // XRHand.MIDDLE_PHALANX_TIP,
+
+				null, //'b_%_ring1', // XRHand.RING_METACARPAL,
+				'b_%_ring1', // XRHand.RING_PHALANX_PROXIMAL,
+				'b_%_ring2', // XRHand.RING_PHALANX_INTERMEDIATE,
+				'b_%_ring3', // XRHand.RING_PHALANX_DISTAL,
+				'b_%_ring_inull', // XRHand.RING_PHALANX_TIP,
+
+				'b_%_pinky0', // XRHand.LITTLE_METACARPAL,
+				'b_%_pinky1', // XRHand.LITTLE_PHALANX_PROXIMAL,
+				'b_%_pinky2', // XRHand.LITTLE_PHALANX_INTERMEDIATE,
+				'b_%_pinky3', // XRHand.LITTLE_PHALANX_DISTAL,
+				'b_%_pinkynull', // XRHand.LITTLE_PHALANX_TIP
+			];
+			bonesMapping.forEach( boneName => {
+
+				if ( boneName ) {
+
+					const bone = object.getObjectByName( boneName.replace( "%", handedness === "right" ? "r" : "l" ) );
+					this.bones.push( bone );
+
+				} else {
+
+					this.bones.push( null );
+
+				}
+
+			} );
+
+		} );
+
+	}
+
+	updateMesh() {
+
+		// XR Joints
+		const XRJoints = this.controller.joints;
+		for ( var i = 0; i < this.bones.length; i ++ ) {
+
+			const bone = this.bones[ i ];
+			const XRJoint = XRJoints[ i ];
+
+			if ( XRJoint ) {
+
+				if ( XRJoint.visible ) {
+
+					let position = XRJoint.position;
+
+					if ( bone ) {
+
+						bone.position.copy( position.clone().multiplyScalar( 100 ) );
+						bone.quaternion.copy( XRJoint.quaternion );
+						// bone.scale.setScalar( XRJoint.jointRadius || defaultRadius );
+
+					}
+
+				}
+
+			}
+
+		}
+
+	}
+
+}
+
+export { XRHandOculusMeshModel };

examples/jsm/webxr/XRHandPrimitiveModel.js

@@ -0,0 +1,84 @@
+import {
+	SphereBufferGeometry,
+	BoxBufferGeometry,
+	MeshStandardMaterial,
+	Mesh,
+	Group
+} from "../../../build/three.module.js";
+
+class XRHandPrimitiveModel {
+
+	constructor( handModel, controller, handedness, options ) {
+
+		this.controller = controller;
+		this.handModel = handModel;
+
+	  this.envMap = null;
+
+		this.handMesh = new Group();
+		this.handModel.add( this.handMesh );
+
+		if ( window.XRHand ) {
+
+			var geometry;
+			if ( ! options || ! options.primitive || options.primitive === "sphere" ) {
+
+				geometry = new SphereBufferGeometry( 1, 10, 10 );
+
+			} else if ( options.primitive === "box" ) {
+
+				geometry = new BoxBufferGeometry( 1, 1, 1 );
+
+			}
+
+			var jointMaterial = new MeshStandardMaterial( { color: 0xffffff, roughness: 1, metalness: 0 } );
+			var tipMaterial = new MeshStandardMaterial( { color: 0x999999, roughness: 1, metalness: 0 } );
+
+			const tipIndexes = [
+				XRHand.THUMB_PHALANX_TIP,
+				XRHand.INDEX_PHALANX_TIP,
+				XRHand.MIDDLE_PHALANX_TIP,
+				XRHand.RING_PHALANX_TIP,
+				XRHand.LITTLE_PHALANX_TIP
+			];
+			for ( let i = 0; i <= XRHand.LITTLE_PHALANX_TIP; i ++ ) {
+
+				var cube = new Mesh( geometry, tipIndexes.indexOf( i ) !== - 1 ? tipMaterial : jointMaterial );
+				cube.castShadow = true;
+				this.handMesh.add( cube );
+
+			}
+
+		}
+
+	}
+
+	updateMesh() {
+
+		const defaultRadius = 0.008;
+		const objects = this.handMesh.children;
+
+		// XR Joints
+		const XRJoints = this.controller.joints;
+		for ( var i = 0; i < objects.length; i ++ ) {
+
+			const jointMesh = objects[ i ];
+			const XRJoint = XRJoints[ i ];
+
+			if ( XRJoint.visible ) {
+
+				jointMesh.position.copy( XRJoint.position );
+				jointMesh.quaternion.copy( XRJoint.quaternion );
+				jointMesh.scale.setScalar( XRJoint.jointRadius || defaultRadius );
+
+			}
+
+			jointMesh.visible = XRJoint.visible;
+
+		}
+
+	}
+
+}
+
+export { XRHandPrimitiveModel };