Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
111 lines
2.3 KiB
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, path, handedness ) { |
|
|
|
this.controller = controller; |
|
this.handModel = handModel; |
|
|
|
this.bones = []; |
|
|
|
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 ); |
|
|
|
const mesh = object.getObjectByProperty( 'type', 'SkinnedMesh' ); |
|
mesh.frustumCulled = false; |
|
mesh.castShadow = true; |
|
mesh.receiveShadow = true; |
|
|
|
const joints = [ |
|
'wrist', |
|
'thumb-metacarpal', |
|
'thumb-phalanx-proximal', |
|
'thumb-phalanx-distal', |
|
'thumb-tip', |
|
'index-finger-metacarpal', |
|
'index-finger-phalanx-proximal', |
|
'index-finger-phalanx-intermediate', |
|
'index-finger-phalanx-distal', |
|
'index-finger-tip', |
|
'middle-finger-metacarpal', |
|
'middle-finger-phalanx-proximal', |
|
'middle-finger-phalanx-intermediate', |
|
'middle-finger-phalanx-distal', |
|
'middle-finger-tip', |
|
'ring-finger-metacarpal', |
|
'ring-finger-phalanx-proximal', |
|
'ring-finger-phalanx-intermediate', |
|
'ring-finger-phalanx-distal', |
|
'ring-finger-tip', |
|
'pinky-finger-metacarpal', |
|
'pinky-finger-phalanx-proximal', |
|
'pinky-finger-phalanx-intermediate', |
|
'pinky-finger-phalanx-distal', |
|
'pinky-finger-tip', |
|
]; |
|
|
|
joints.forEach( jointName => { |
|
|
|
const bone = object.getObjectByName( jointName ); |
|
|
|
if ( bone !== undefined ) { |
|
|
|
bone.jointName = jointName; |
|
|
|
} else { |
|
|
|
console.warn( `Couldn't find ${jointName} in ${handedness} hand mesh` ); |
|
|
|
} |
|
|
|
this.bones.push( bone ); |
|
|
|
} ); |
|
|
|
} ); |
|
|
|
} |
|
|
|
updateMesh() { |
|
|
|
// 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 ); |
|
bone.quaternion.copy( XRJoint.quaternion ); |
|
// bone.scale.setScalar( XRJoint.jointRadius || defaultRadius ); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
export { XRHandMeshModel };
|
|
|