Currently, I'm developing a browser app similar to Tamagotchi using three.js. However, I've hit a roadblock while trying to implement a hand that can pet the avatar when clicked.
The Hand is a rigged Blender model with two animations: idle and poking. When viewed in the gltf Viewer, the model works perfectly with both animations. But, when added in JavaScript, the hand either appears distorted or rendered correctly but fails to recognize positions for movement with the cursor.
Most of the examples I've come across only show how to add a general scene, without focusing on just one animated model. In both versions of those animations, I encounter an animation error.
Here's the code for the distorted version:
loader.load('resources/models/gltf/Hand.gltf', function(gltf) {
gltf.scene.traverse(function(node) {
if (node.isMesh) hand = node;
});
//hand.material.morphTargets = true;
scene.add(hand);
mixer = new THREE.AnimationMixer(hand);
clips = hand.animations;
hand = gltf;
scene.add(hand.scene);
});
In the second version, where the Hand renders correctly but doesn't recognize positions for event handling:
loader.load('resources/models/gltf/Hand.gltf', function(gltf) {
var hand = gltf.scene;
var animations = gltf.animations;
mixer = new THREE.AnimationMixer(hand);
for (var i = 0; i < animations.length; i++) {
mixer.clipAction(animations[i]).play();
}
scene.add(hand);
});
Function for the idle animation:
function idleAnim() {
var idleClip = THREE.AnimationClip.findByName(clips, "Idle");
var action = mixer.clipAction(idleClip);
action.play();
console.log("idling");
}
Link: https://github.com/JoeJoe49/AnimTest
Thank you in advance for any help and best regards!