diff --git a/examples/webxr_vr_handinput_profiles.html b/examples/webxr_vr_handinput_profiles.html index cf7a1c86a68bf568a7de257a8f3a1405a4552eb7..a0c483962d100fd6999eb593b4b1d61204276cfa 100644 --- a/examples/webxr_vr_handinput_profiles.html +++ b/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 ) ] );