如何在 Three.js 中处理动画模型？

Posted 2023-02-27

【中文标题】如何在 Three.js 中处理动画模型？

【英文标题】：How do I handle animated models in Three.js?

【发布时间】：2013-04-23 00:10:18

【问题描述】：

我有一个关于 Three.js 的基本问题。我用谷歌搜索但没有发现任何有用的东西...... 我知道如何导入 .js 文件，并且我有一个从搅拌机导出为 .js 格式的动画立方体。我已经用 JSONLoader 导入了它，但是动画不会自己播放。所以我就是这样，我不知道怎么玩。

我已经检查了文档，但我不知道我应该使用什么... 尝试了 MorphAnimationMesh，当我记录长度时，它找到了 250 帧。所以我猜出口进展顺利。

我正在使用 WebMatrix，但它似乎无法识别 dae 文件，所以我还没有尝试使用它们。对于他们来说，我也不知道如何处理动画。

请帮忙！

【参考方案1】：

有很多examples in the three.js sources。您也可以在线查看它们，例如

http://threejs.org/examples/webgl_morphnormals.html http://threejs.org/examples/webgl_morphtargets_horse.html

还有另一种动画风格，称为骨架动画或“skinning”。但是，如果您发现了 250 帧的变形，那么此时您无需担心，但最好注意这一点。 Blender 可以同时导出这两种 - 变形更简单，但蒙皮占用的空间更少。

【讨论】：

谢谢！我现在开始播放动画。我还尝试导出多个 obj 文件并使用 python 脚本将它们转换为 json。效果很好，实际上这是获得平滑组的唯一方法......所以我也要去尝试蒙皮动画，会有什么不同吗？

@user1066278：是的，看看例子。此外，python 脚本不支持蒙皮，因为这需要例如obj 文件无法保存的骨骼信息。

好的，很高兴知道！不过我会尝试一下，因为如果每一帧都有一个 obj，动画是否仍然烘焙？那么obj不支持蒙皮也没关系

变形动画是“烘焙”的，即每一帧动画都有一个单独的对象。这会占用大量空间，因为每个顶点都存在于每一帧中。在蒙皮中，有一个单独的动画骨架。顶点是骨骼的父级并随它们一起移动，因此只为 10 个骨骼而不是数千个顶点设置动画帧非常有效。

【参考方案2】：

我发现这个例子对游戏开发非常有用：

https://threejs.org/examples/webgl_animation_skinning_blending.html