如何在 Three.js 中为圆柱形状制作展开/展开动画？答案

【问题标题】：How to do an unfold / unwrap animation for cylinder shape in Three.js?如何在 Three.js 中为圆柱形状制作展开/展开动画？
【发布时间】：2015-12-04 11:18:06
【问题描述】：

我尝试制作一个圆柱体展开动画，让学生更好地理解圆柱体的三个表面。

它应该看起来像这样（在youtube 找到）：

我可以使用THREE.CylinderGeometry绘制两个圆（底部和顶部）
我可以使用THREE.CylinderGeometry绘制侧面而无需填充
但是展开“矩形”的外层蓝色动画怎么做？！

我以前从来没有用 three.js 做过动画，所以在这里我也需要一个建议。谢谢。

【问题讨论】：

为什么不直接使用 youtube 视频/gif？许可问题？也许你可以请求许可？您应该知道您的问题目前因为“过于宽泛”而处于密切审查队列中。我认为应该允许一些概念性问题（如果它们足够有趣的话），但其他人可能不同意。至于如何学习动画的建议，请使用 google 并查找文档/教程。那绝对不是这样的领域。
这是一个关于编程技术的有趣问题，它在这里占有一席之地
好像要关门了，还没人回答。我认为如果 OP 了解关于动画和渲染的一些东西，这将有所帮助，因此有一些东西可以开始。说到：stackoverflow.com/questions/11739926/…

标签： animation three.js

【解决方案1】：

最简单的方法是使用 3 个网格：

两个CircleGeometry-ies 用于圈子
一个用于展开平面的自定义 Geometry

平面实际上是两组顶点，表示在一个圆上环绕/展开的线。控制运动的是每个段之间的角度被均匀地补间。 N 是段数，N 为简单起见，您需要将此角度从 0（线状态）到一侧的 360/N（圆形状态）和另一侧的 -360/N 之间进行补间，从中间（360/N 代表每边 180/( N/2 )）。

因此，在您的自定义 Geometry() 中，您可以定义顶点和面。然后你用你最喜欢的补间库对它们进行补间。以geometry.verticesNeedUpdate=true; 结束每个update 回调。

http://jsfiddle.net/2x4Lbvs0/7/

【讨论】：

感谢您的帮助。我今天开发了一个 3D 绘图工具“Geoknecht”和added the cylinder - 我可以通过更改设置的文本值来为其形状设置动画。这不是我上述问题的解决方案，而是第一步。只需要做你提到的自定义网格，需要一个展开数学函数来获得正确的坐标。
@Matheretter 我研究它的时间比我想象的要长得多:) jsfiddle.net/2x4Lbvs0。我误解了 pi/2 以上的正弦/余弦的角度转换。所以它结束于它应该是一半的管子！需要改进的算法在最后的wrap和unwrap方法中。
@Matheretter 我希望我不要 ping 太多。最终版本是here。我不明白我在 update 函数中的数学哪里错了。如果你解决了我感兴趣的问题。
这是为我编写的一段有趣的代码，如果您需要其他形状，我很乐意提供帮助。