Question

目前，我正在Three.js中开发类似Tamagotchi的浏览器应用程序。但是目前，我坚持使用一只手，单击该手会抚摸头像。

手是装备了Blender的模型，具有2个动画，分别是空闲和戳动画。在gltf Viewer中，该模型对于两个动画都可以正常工作。但是当添加到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）}）以清晰地了解场景的导出方式，例如，我在搅拌机gltf导出器中找到了通常有2个单独的父节点，一个用于定位，另一个用于缩放和旋转，因此，值得一看，因为它可能与您的期望不完全相同。

之前，我抓住了您的仓库，并在模型预览器中打开了gltfs，但是似乎看不到任何动画。我的预览器设置为按顺序播放找到的所有动画。.所以不确定那里发生了什么。我猜这些是skinnedmeshes而不是morphtarget？

Three.js将已绑定的动画资产添加到现有场景

1 个答案: