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

【问题标题】：Combine GLTF animations in Three.js in Angular在 Angular 的 Three.js 中结合 GLTF 动画
【发布时间】：2022-09-26 08:40:51
【问题描述】：

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

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

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

请看这个example，你可能会发现它很有用
@Bilal 我已经看到了，但这是针对不同型号的。我希望能够添加到单个模型中。谢谢

标签： angular animation three.js blender gltf

【解决方案1】：

AnimationMixer 类将根对象作为其参数。如果（且仅当）各种 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 documentation。

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

【讨论】：