在 Angular 中结合 Three.js 中的 GLTF 动画

Question

我正在研究 Angular 项目，并在 web 上进行了搜索，但我没有找到任何东西可以帮助我确定前进的道路。 我收到了 3 个 GLTF 文件，用于 model 微笑、哭泣、大笑的脸，以及另一组用于相同model跑步、跳跃和行走的 GLTF 文件。 我的目标是我希望能够组合我可以拥有的动画（跑步+微笑或跑步+笑或走路+哭或任何组合。

如何在threejs中组合两个gltf动画？ 我读到我可以使用 AnimationMixer，但不知道这将如何在同一个 model 上工作？ 我是否必须将基础 model 与骨架/动画分开导出，然后尝试将它们组合到我的threejs 应用程序中？ 或者有什么我想念的。

任何指针将不胜感激我真的不知道从哪里开始。 谢谢你的帮助。

Answer 1

AnimationMixer class 将根 object 作为其参数。 如果（且仅当）各种 glTF 模型的骨架/动画兼容，那么您可以从这些 glTF 文件中的任何一个加载角色，构建一个以它为目标的 AnimationMixer，并使用该混音器上其他文件中的动画。

const mixer = new THREE.AnimationMixer( gltf1.scene );
const run = mixer.clipAction( gltf2.animations[ 0 ] );
const laugh = mixer.clipAction( gltf3.animations[ 0 ] );
const smile = mixer.clipAction( gltf4.animations[ 0 ] );
// ...

run.play();

有关更多详细信息，请参阅THREE.AnimationMixer 文档。

如果您不确定这些模型的动画和骨架是否兼容，通常最简单的方法是将它们组合到 Blender 等软件中，然后导出一个包含所有动画和单个角色副本的 glTF 文件。