From 571347f504dec332f6905bb3d8ef43f1b405d45c Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 6 May 2021 12:28:55 +0100 Subject: [PATCH] Fixed code WebXR Hands code. --- examples/jsm/webxr/OculusHandModel.js | 18 ++-------------- examples/jsm/webxr/XRHandMeshModel.js | 17 +++++++++++---- examples/jsm/webxr/XRHandModelFactory.js | 25 +++++------------------ examples/webxr_vr_handinput.html | 2 +- examples/webxr_vr_handinput_cubes.html | 2 +- examples/webxr_vr_handinput_profiles.html | 2 +- 6 files changed, 23 insertions(+), 43 deletions(-) diff --git a/examples/jsm/webxr/OculusHandModel.js b/examples/jsm/webxr/OculusHandModel.js index eb46696934..8be43b7a7d 100644 --- a/examples/jsm/webxr/OculusHandModel.js +++ b/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/assets@1.0/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 ); } diff --git a/examples/jsm/webxr/XRHandMeshModel.js b/examples/jsm/webxr/XRHandMeshModel.js index 994338d7c3..aab86a1139 100644 --- a/examples/jsm/webxr/XRHandMeshModel.js +++ b/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/assets@1.0/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 ); diff --git a/examples/jsm/webxr/XRHandModelFactory.js b/examples/jsm/webxr/XRHandModelFactory.js index a340c188a1..158f6d4883 100644 --- a/examples/jsm/webxr/XRHandModelFactory.js +++ b/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/assets@1.0/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 ); } diff --git a/examples/webxr_vr_handinput.html b/examples/webxr_vr_handinput.html index c7f0ad340b..1c7e0496c0 100644 --- a/examples/webxr_vr_handinput.html +++ b/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 ); diff --git a/examples/webxr_vr_handinput_cubes.html b/examples/webxr_vr_handinput_cubes.html index a784916f5c..a2ddc3aa5d 100644 --- a/examples/webxr_vr_handinput_cubes.html +++ b/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 ); diff --git a/examples/webxr_vr_handinput_profiles.html b/examples/webxr_vr_handinput_profiles.html index 1f7e8c5c75..cf7a1c86a6 100644 --- a/examples/webxr_vr_handinput_profiles.html +++ b/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 -- GitLab