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

【问题标题】：How do I handle animated models in Three.js?如何在 Three.js 中处理动画模型？
【发布时间】：2013-04-23 00:10:18
【问题描述】：

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

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

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

请帮忙！

【问题讨论】：

标签： javascript animation model three.js webgl

【解决方案1】：

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

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

【讨论】：

谢谢！我现在开始播放动画。我还尝试导出多个 obj 文件并使用 python 脚本将它们转换为 json。效果很好，实际上这是获得平滑组的唯一方法......所以我也要去尝试蒙皮动画，会有什么不同吗？
@user1066278：是的，看看例子。此外，python 脚本不支持蒙皮，因为这需要例如obj 文件无法保存的骨骼信息。
好的，很高兴知道！不过我会尝试一下，因为如果每一帧都有一个 obj，动画是否仍然烘焙？那么obj不支持蒙皮也没关系
变形动画是“烘焙”的，即每一帧动画都有一个单独的对象。这会占用大量空间，因为每个顶点都存在于每一帧中。在蒙皮中，有一个单独的动画骨架。顶点是骨骼的父级并随它们一起移动，因此只为 10 个骨骼而不是数千个顶点设置动画帧非常有效。

【解决方案2】：

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

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

【讨论】：