Three.js 向现有场景添加绑定的动画资源

Question

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

Hand 是一个装配好的 Blender 模型，有 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);
});

第二个版本，Hand 被正确渲染，但无法识别事件处理的位置。

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 exporter，那里通常是 2 个独立的父节点，一个用于定位，一个用于缩放+旋转，所以.. 值得一看，因为它可能不是您所期望的。

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