Updated to new WebXR Hands API

examples/jsm/webxr/XRHandPrimitiveModel.js

@@ -36,13 +36,13 @@ class XRHandPrimitiveModel {
 			const tipMaterial = new MeshStandardMaterial( { color: 0x999999, roughness: 1, metalness: 0 } );
 
 			const tipIndexes = [
-				window.XRHand.THUMB_PHALANX_TIP,
-				window.XRHand.INDEX_PHALANX_TIP,
-				window.XRHand.MIDDLE_PHALANX_TIP,
-				window.XRHand.RING_PHALANX_TIP,
-				window.XRHand.LITTLE_PHALANX_TIP
+				4,
+				9,
+				14,
+				19,
+				24,
 			];
-			for ( let i = 0; i <= window.XRHand.LITTLE_PHALANX_TIP; i ++ ) {
+			for ( let i = 0; i <= 24; i ++ ) {
 
 				var cube = new Mesh( geometry, tipIndexes.indexOf( i ) !== - 1 ? tipMaterial : jointMaterial );
 				cube.castShadow = true;

examples/webxr_vr_handinput_cubes.html

@@ -160,7 +160,7 @@
 
 				if ( grabbing ) {
 
-					const indexTip = controller.joints[ XRHand.INDEX_PHALANX_TIP ];
+					const indexTip = controller.joints[ 9 ];
 					const sphere = collideObject( indexTip );
 
 					if ( sphere ) {
@@ -172,7 +172,7 @@
 							scaling.active = true;
 							scaling.object = sphere;
 							scaling.initialScale = sphere.scale.x;
-							scaling.initialDistance = indexTip.position.distanceTo( hand2.joints[ XRHand.INDEX_PHALANX_TIP ].position );
+							scaling.initialDistance = indexTip.position.distanceTo( hand2.joints[ 9 ].position );
 							return;
 
 						}
@@ -190,7 +190,7 @@
 				const spawn = new THREE.Mesh( geometry, material );
 				spawn.geometry.computeBoundingSphere();
 
-				const indexTip = controller.joints[ XRHand.INDEX_PHALANX_TIP ];
+				const indexTip = controller.joints[ 9 ];
 				spawn.position.copy( indexTip.position );
 				spawn.quaternion.copy( indexTip.quaternion );
 
@@ -222,7 +222,7 @@
 			function onPinchStartRight( event ) {
 
 				const controller = event.target;
-				const indexTip = controller.joints[ XRHand.INDEX_PHALANX_TIP ];
+				const indexTip = controller.joints[ 9 ];
 				const object = collideObject( indexTip );
 				if ( object ) {
 
@@ -266,8 +266,8 @@
 
 				if ( scaling.active ) {
 
-					const indexTip1Pos = hand1.joints[ XRHand.INDEX_PHALANX_TIP ].position;
-					const indexTip2Pos = hand2.joints[ XRHand.INDEX_PHALANX_TIP ].position;
+					const indexTip1Pos = hand1.joints[ 9 ].position;
+					const indexTip2Pos = hand2.joints[ 9 ].position;
 					const distance = indexTip1Pos.distanceTo( indexTip2Pos );
 					const newScale = scaling.initialScale + distance / scaling.initialDistance - 1;
 					scaling.object.scale.setScalar( newScale );

src/renderers/webxr/WebXR.d.ts

@@ -271,40 +271,7 @@ export interface XRJointPose extends XRPose {
 }
 
 export declare class XRHand extends Array<XRJointSpace> {
-
 	readonly length: number;
-
-	static readonly WRIST = 0;
-
-	static readonly THUMB_METACARPAL = 1;
-	static readonly THUMB_PHALANX_PROXIMAL = 2;
-	static readonly THUMB_PHALANX_DISTAL = 3;
-	static readonly THUMB_PHALANX_TIP = 4;
-
-	static readonly INDEX_METACARPAL = 5;
-	static readonly INDEX_PHALANX_PROXIMAL = 6;
-	static readonly INDEX_PHALANX_INTERMEDIATE = 7;
-	static readonly INDEX_PHALANX_DISTAL = 8;
-	static readonly INDEX_PHALANX_TIP = 9;
-
-	static readonly MIDDLE_METACARPAL = 10;
-	static readonly MIDDLE_PHALANX_PROXIMAL = 11;
-	static readonly MIDDLE_PHALANX_INTERMEDIATE = 12;
-	static readonly MIDDLE_PHALANX_DISTAL = 13;
-	static readonly MIDDLE_PHALANX_TIP = 14;
-
-	static readonly RING_METACARPAL = 15;
-	static readonly RING_PHALANX_PROXIMAL = 16;
-	static readonly RING_PHALANX_INTERMEDIATE = 17;
-	static readonly RING_PHALANX_DISTAL = 18;
-	static readonly RING_PHALANX_TIP = 19;
-
-	static readonly LITTLE_METACARPAL = 20;
-	static readonly LITTLE_PHALANX_PROXIMAL = 21;
-	static readonly LITTLE_PHALANX_INTERMEDIATE = 22;
-	static readonly LITTLE_PHALANX_DISTAL = 23;
-	static readonly LITTLE_PHALANX_TIP = 24;
-
 }
 
 declare type Constructor<T = object> = {

src/renderers/webxr/WebXRController.js

@@ -25,7 +25,7 @@ Object.assign( WebXRController.prototype, {
 
 			if ( window.XRHand ) {
 
-				for ( let i = 0; i <= window.XRHand.LITTLE_PHALANX_TIP; i ++ ) {
+				for ( let i = 0; i <= 24; i ++ ) {
 
 					// The transform of this joint will be updated with the joint pose on each frame
 					const joint = new Group();
@@ -138,54 +138,51 @@ Object.assign( WebXRController.prototype, {
 			if ( hand && inputSource.hand ) {
 
 				handPose = true;
+				let i = 0;
 
-				for ( let i = 0; i <= window.XRHand.LITTLE_PHALANX_TIP; i ++ ) {
+				for ( let inputjoint of inputSource.hand.values() ) {
 
-					if ( inputSource.hand[ i ] ) {
+					// Update the joints groups with the XRJoint poses
+					const jointPose = frame.getJointPose( inputjoint, referenceSpace );
+					const joint = hand.joints[ i++ ];
 
-						// Update the joints groups with the XRJoint poses
-						const jointPose = frame.getJointPose( inputSource.hand[ i ], referenceSpace );
-						const joint = hand.joints[ i ];
+					if ( jointPose !== null ) {
 
-						if ( jointPose !== null ) {
+						joint.matrix.fromArray( jointPose.transform.matrix );
+						joint.matrix.decompose( joint.position, joint.rotation, joint.scale );
+						joint.jointRadius = jointPose.radius;
 
-							joint.matrix.fromArray( jointPose.transform.matrix );
-							joint.matrix.decompose( joint.position, joint.rotation, joint.scale );
-							joint.jointRadius = jointPose.radius;
-
-						}
-
-						joint.visible = jointPose !== null;
+					}
 
-						// Custom events
+					joint.visible = jointPose !== null;
 
-						// Check pinch
-						const indexTip = hand.joints[ window.XRHand.INDEX_PHALANX_TIP ];
-						const thumbTip = hand.joints[ window.XRHand.THUMB_PHALANX_TIP ];
-						const distance = indexTip.position.distanceTo( thumbTip.position );
+					// Custom events
 
-						const distanceToPinch = 0.02;
-						const threshold = 0.005;
+					// Check pinchz
+					const indexTip = hand.joints[ 9 ];
+					const thumbTip = hand.joints[ 4 ];
+					const distance = indexTip.position.distanceTo( thumbTip.position );
 
-						if ( hand.inputState.pinching && distance > distanceToPinch + threshold ) {
+					const distanceToPinch = 0.02;
+					const threshold = 0.005;
 
-							hand.inputState.pinching = false;
-							this.dispatchEvent( {
-								type: "pinchend",
-								handedness: inputSource.handedness,
-								target: this
-							} );
+					if ( hand.inputState.pinching && distance > distanceToPinch + threshold ) {
 
-						} else if ( ! hand.inputState.pinching && distance <= distanceToPinch - threshold ) {
+						hand.inputState.pinching = false;
+						this.dispatchEvent( {
+							type: "pinchend",
+							handedness: inputSource.handedness,
+							target: this
+						} );
 
-							hand.inputState.pinching = true;
-							this.dispatchEvent( {
-								type: "pinchstart",
-								handedness: inputSource.handedness,
-								target: this
-							} );
+					} else if ( ! hand.inputState.pinching && distance <= distanceToPinch - threshold ) {
 
-						}
+						hand.inputState.pinching = true;
+						this.dispatchEvent( {
+							type: "pinchstart",
+							handedness: inputSource.handedness,
+							target: this
+						} );
 
 					}