ThreeJs：如何旋转已经动画的对象

Question

我在 Blender 中创建了一个对象（宇宙飞船），为其运动设置了动画（使其稍微随机摆动/旋转）并将 3D 模型导出到 ThreeJs。

如果用户按左箭头，模型应在 X-Y 平面上向左旋转，右箭头也类似。

但是，由于动画的原因，旋转坐标不断重置。下面的图片将澄清这个问题：

这是来自控制台，我在其中打印出宇宙飞船网格的旋转：

然而，紧接着：

我想要的是：是当我旋转网格时它会旋转，然后围绕新轴摆动，而不仅仅是其原始方向。换句话说，动画应该具有相对旋转，而不是绝对旋转。这可能吗？

Answer 1

如果您使用 Three.js 提供的加载器（可能是 GLTFLoader）添加模型，那么您将获得清晰的对象层次结构。也就是说，如果你像这样加载你的对象......

GLTFLoader().load('something.glb', (gltf) => {
  //... the code below goes here
})

所以，现在如果你跑...

console.log(gltf)

您将看到我正在谈论的对象层次结构。在这里，您需要检测您的动画在哪里？他们在

gltf.scene.animations

下吗？如果是这样，那么您将需要添加一个group并将您的模型粘贴到其中。这样，模型将单独进行动画处理，您将在其中对作为另一个变量的组进行动画处理 - 尤其是新的 Object3D。

否则，只需为

gltf.scene

对象设置动画，您就可以让您的东西按您想要的方式工作。