Animation 如何在Three.js中为圆柱体形状执行展开/展开动画？

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

它应该是这样的（在上找到）：

我可以使用

THREE.CylinderGeometry

我可以使用

THREE.Cylinder Geometry

绘制侧面，无需填充

但是我如何做展开的“矩形”的外部蓝色动画呢

---

我以前从未用three.js制作过动画，所以我也需要一个建议。谢谢。

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

• 圆的两个

  圆几何测量法
  

• 一个用于展开平面的自定义

  几何图形

该平面实际上是两组顶点，表示圆上的绕线/展开线。控制移动的是每个线段之间的角度相等。N是分段数，N为偶数，为了简单起见，需要将此角度从一侧的0（直线状态）到360/N（圆状态），另一侧到-360/N，从中间开始（360/N表示每侧180/（N/2））

因此，在自定义的

Geometry（）

中定义顶点和面。然后你把它们和你最喜欢的吐温图书馆放在一起。用几何图形结束每个

update

回调。verticesNeedUpdate=true

---

为什么不直接使用youtube视频/gif？许可问题？也许你可以请求允许？您应该知道，您的问题目前在密切审查队列中，因为“范围太广”。我认为概念性问题应该被允许（如果它们足够有趣的话），但其他人可能不同意。至于如何学习动画的建议，请使用谷歌并查找文档/教程。这是一个关于编程技术的有趣的问题，它在这里有它的位置，看起来它即将被关闭，但没有人回答它。我认为如果OP知道一些关于动画和渲染的知识，那么就有了一些开始。说到：谢谢你的帮助。我已经开发了一个3d绘图工具“Geoknecht”，今天，我可以通过更改设置的文本值来设置其形状的动画。这不是上述问题的解决方案，而是第一步。只需要执行您提到的自定义网格，并需要一个“展开数学”函数来获得正确的坐标。@Matheretter我处理它的时间比我想象的要长：）。我误解了正弦/余弦的角度转换，超过pi/2。所以它的末端是它应该的一半！需要改进的算法最后是

wrap

和

unwrap

方法。@Matheretter我希望我不要ping太多。最终版本是。我不明白我的数学错在哪里，在

update

函数中。如果你解决了这个问题，我很感兴趣。这是一段有趣的代码为我写，如果你需要其他形状，我很乐意帮助。