canvas - 类折纸折纸动画推荐JS库

Question

我想使用 WebGL 或 Canvas（没有 Flash！）创建类似折纸的折纸动画。我想重现的效果与此处视频中的效果相似。

对于立方体，最终动画的清晰视图可以表示如下：

我试图使用three.js库，但我找不到为THREE.Mesh 的单个面设置动画的方法。我也尝试过简单的 CSS3 动画，但是用超过 6 个面制作实体动画会非常困难——因为不可能在 2 个或更多面之间创建关系。

任何人都可以推荐其他 JS 库吗？或者有没有办法用three.js实现这一点？当然，如果有一种方法可以使其仅使用 canvas2d 工作，那就太好了——但我认为这不太可能！

Answer 1

我不确定哪个框架最好，但我认为最好使用支持蒙皮网格和动画播放的框架。快速搜索给出了...

http://www.oak3d.com/

...但我不知道这是否是要走的路。三个有（或至少有）支持蒙皮，但从 3D 程序中获取数据并非易事，并且动画播放受到限制。

Answer 2

如果您使用 Maya 作为 3D 程序，请尝试 www.inka3d.com。然后您可以在 Maya 中为其设置动画，只需将顶面设置为正面，将所有侧面设置为地板（每个都是平面对象），然后创建一些关键帧。然后添加一个相机，做“全部导出...”，你就完成了

Answer 3

我会推荐http://oridomi.com/作为灵感。它提供基本的折叠动画。