第三.js将绑定的动画资源添加到现有场景中

Question

我目前正在开发一个类似Tamagotchi的浏览器应用程序.js目前。但目前我坚持实现一只手，点击时抚摸头像。

手是一个绑定的搅拌机模型，有2个动画，空闲和戳动画。在 gltf 查看器中，模型可以很好地处理这两种动画。 但是当在js中添加时，手部要么完全扭曲，要么正确呈现，但无法识别位置(对于光标移动(。

我看过的大多数示例只添加了一个一般场景，而不仅仅是一个动画模型。在这些动画的两个版本中，我都收到动画错误。

扭曲版本的代码：

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);
});

第二个版本，其中手形正确呈现，但无法识别事件处理的位置。

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 idleAnim() {
var idleClip = THREE.AnimationClip.findByName(clips, "Idle");
var action = mixer.clipAction(idleClip);
action.play();
console.log("idling");
}

链接： https://github.com/JoeJoe49/AnimTest

提前感谢和问候。

Answer 1

在第一个示例中，您将"手"对象从导入场景中拉出，将其添加到渲染场景中，然后将导入场景的其余部分添加到渲染场景中。 我的猜测是，你需要从层次结构中的更高层拉出"手"。它可能有一些父对象需要附带，以保留动画的正确层次结构。

值得做一个 scene.traverse((o(=>{console.log(o(} 来清楚地了解你的场景是如何导出的。例如，我发现使用 blender gltf 导出器，通常有 2 个单独的父节点，一个用于定位，一个用于缩放+旋转，所以。值得一看，因为它可能不完全是您所期望的。

fwiw 我抓住了你的存储库并在我的模型预览器中打开了 gltf，但我似乎没有看到任何动画。我的预览器设置为按顺序播放它找到的所有动画。所以不知道那里发生了什么。我猜这些是皮肤网格而不是变形目标？