Examples: Simplified webxr_vr_handinput_profiles.

Author: mrdoob

examples/webxr_vr_handinput_profiles.html

@@ -26,11 +26,6 @@
 			let controller1, controller2;
 			let controllerGrip1, controllerGrip2;
 
-			const currentHandModel = {
-				left: 0,
-				right: 0
-			};
-
 			const handModels = {
 				left: null,
 				right: null
@@ -108,36 +103,28 @@
 				scene.add( controllerGrip1 );
 
 				hand1 = renderer.xr.getHand( 0 );
+				hand1.userData.currentHandModel = 0;
 				scene.add( hand1 );
 
 				handModels.left = [
 					handModelFactory.createHandModel( hand1, "boxes" ),
 					handModelFactory.createHandModel( hand1, "spheres" ),
-					// low poly option disabled until low poly hands model is fixed
-					// handModelFactory.createHandModel( hand1, "oculus", { model: "lowpoly" } ),
-					handModelFactory.createHandModel( hand1, "oculus" )
+					handModelFactory.createHandModel( hand1, "mesh" )
 				];
 
-				handModels.left.forEach( model => {
+				for ( let i = 0; i < 3; i ++ ) {
 
-					model.visible = false;
+					const model = handModels.left[ i ];
+					model.visible = i == 0;
 					hand1.add( model );
 
-				} );
-
-				handModels.left[ currentHandModel.left ].visible = true;
-
-				function cycleHandModel( hand ) {
-
-					handModels[ hand ][ currentHandModel[ hand ] ].visible = false;
-					currentHandModel[ hand ] = ( currentHandModel[ hand ] + 1 ) % handModels[ hand ].length;
-					handModels[ hand ][ currentHandModel[ hand ] ].visible = true;
-
 				}
 
-				hand1.addEventListener( 'pinchend', evt => {
+				hand1.addEventListener( 'pinchend', function ( event ) {
 
-					cycleHandModel( evt.handedness );
+					handModels.left[ this.userData.currentHandModel ].visible = false;
+					this.userData.currentHandModel = ( this.userData.currentHandModel + 1 ) % 3;
+					handModels.left[ this.userData.currentHandModel ].visible = true;
 
 				} );
 
@@ -148,34 +135,32 @@
 				scene.add( controllerGrip2 );
 
 				hand2 = renderer.xr.getHand( 1 );
+				hand2.userData.currentHandModel = 0;
 				scene.add( hand2 );
 
 				handModels.right = [
 					handModelFactory.createHandModel( hand2, "boxes" ),
 					handModelFactory.createHandModel( hand2, "spheres" ),
-					// low poly option disabled until low poly hands model is fixed
-					// handModelFactory.createHandModel( hand2, "oculus", { model: "lowpoly" } ),
-					handModelFactory.createHandModel( hand2, "oculus" )
+					handModelFactory.createHandModel( hand2, "mesh" )
 				];
-				handModels.right.forEach( model => {
-
-					model.visible = false;
-					hand2.add( model );
 
-				} );
+				for ( let i = 0; i < 3; i ++ ) {
 
-				handModels.right[ currentHandModel.right ].visible = true;
+					const model = handModels.right[ i ];
+					model.visible = i == 0;
+					hand2.add( model );
 
-				window.handModels = handModels;
+				}
 
-				hand2.addEventListener( 'pinchend', evt => {
+				hand2.addEventListener( 'pinchend', function ( evevent ) {
 
-					cycleHandModel( evt.handedness );
+					handModels.right[ this.userData.currentHandModel ].visible = false;
+					this.userData.currentHandModel = ( this.userData.currentHandModel + 1 ) % 3;
+					handModels.right[ this.userData.currentHandModel ].visible = true;
 
 				} );
 
 				//
-				window.hands = [ hand1, hand2 ];
 
 				const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );