XRHandMeshModel.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import { GLTFLoader } from '../loaders/GLTFLoader.js';
  2. class XRHandMeshModel {
  3. constructor( handModel, controller, assetUrl ) {
  4. this.controller = controller;
  5. this.handModel = handModel;
  6. this.bones = [];
  7. const loader = new GLTFLoader();
  8. loader.setPath( '' );
  9. loader.load( assetUrl, gltf => {
  10. const object = gltf.scene.children[ 0 ];
  11. this.handModel.add( object );
  12. const mesh = object.getObjectByProperty( 'type', 'SkinnedMesh' );
  13. mesh.frustumCulled = false;
  14. mesh.castShadow = true;
  15. mesh.receiveShadow = true;
  16. const joints = [
  17. 'wrist',
  18. 'thumb-metacarpal',
  19. 'thumb-phalanx-proximal',
  20. 'thumb-phalanx-distal',
  21. 'thumb-tip',
  22. 'index-finger-metacarpal',
  23. 'index-finger-phalanx-proximal',
  24. 'index-finger-phalanx-intermediate',
  25. 'index-finger-phalanx-distal',
  26. 'index-finger-tip',
  27. 'middle-finger-metacarpal',
  28. 'middle-finger-phalanx-proximal',
  29. 'middle-finger-phalanx-intermediate',
  30. 'middle-finger-phalanx-distal',
  31. 'middle-finger-tip',
  32. 'ring-finger-metacarpal',
  33. 'ring-finger-phalanx-proximal',
  34. 'ring-finger-phalanx-intermediate',
  35. 'ring-finger-phalanx-distal',
  36. 'ring-finger-tip',
  37. 'pinky-finger-metacarpal',
  38. 'pinky-finger-phalanx-proximal',
  39. 'pinky-finger-phalanx-intermediate',
  40. 'pinky-finger-phalanx-distal',
  41. 'pinky-finger-tip',
  42. ];
  43. joints.forEach( jointName => {
  44. const bone = object.getObjectByName( jointName );
  45. if ( bone !== undefined ) {
  46. bone.jointName = jointName;
  47. } else {
  48. console.warn( `Couldn't find ${jointName} in ${handedness} hand mesh` );
  49. }
  50. this.bones.push( bone );
  51. } );
  52. } );
  53. }
  54. updateMesh() {
  55. // XR Joints
  56. const XRJoints = this.controller.joints;
  57. for ( let i = 0; i < this.bones.length; i ++ ) {
  58. const bone = this.bones[ i ];
  59. if ( bone ) {
  60. const XRJoint = XRJoints[ bone.jointName ];
  61. if ( XRJoint.visible ) {
  62. const position = XRJoint.position;
  63. if ( bone ) {
  64. bone.position.copy( position );
  65. bone.quaternion.copy( XRJoint.quaternion );
  66. // bone.scale.setScalar( XRJoint.jointRadius || defaultRadius );
  67. }
  68. }
  69. }
  70. }
  71. }
  72. }
  73. export { XRHandMeshModel };