如何在Three.js中进行圆柱体展开/解开的动画？

Question

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

它应该像这样（在youtube上找到）：

1. 我可以使用THREE.CylinderGeometry绘制两个圆（底部和顶部）

2. 我可以使用THREE.CylinderGeometry绘制不填充的侧面

3. 但是如何完成展开“矩形”的外部蓝色动画？

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

- Avatar

---

为什么不直接使用YouTube视频/GIF呢？许可问题吗？也许你可以请求授权？你应该知道，你的问题目前正在关闭审核队列中，因为它被认为是“过于广泛”。我认为概念性问题应该在一定程度上被允许（如果它们足够有趣），但其他人可能会持不同意见。至于学习动画的建议，请使用Google并寻找文档/教程。那绝对不是SO的领域。 - Jan

这是一个关于编程技术的有趣问题，它在这里很合适。 - Mouloud85

看起来这个问题即将关闭，而且没有人回答它。我认为如果楼主对动画和渲染有一定了解，那么就会有一个好的起点。顺便说一下：https://dev59.com/_GbWa4cB1Zd3GeqPZ7wl?rq=1 - Jan

Answer 1

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

- 两个CircleGeometry用于表示圆 - 一个自定义Geometry用于展开平面

该平面实际上由表示在圆上卷曲/展开的一组顶点组成。控制移动的是每个线段之间的角度均匀地缓动。假设N是线段数，为了简化，N是偶数，你需要将此角度从0（线状态）缓动到360 / N（圆状态）的一侧，并在另一侧从中间开始缓动到-360 / N（360 / N代表每侧180 /（N / 2））。

因此，在您的自定义Geometry()中，您定义顶点和面。然后，您可以使用您喜欢的缓动库来缓动它们。在每个update回调结束时添加geometry.verticesNeedUpdate=true;。 http://jsfiddle.net/2x4Lbvs0/7/

- Mouloud85

---

感谢您的帮助。我开发了一个名为“Geoknecht”的3D绘图工具，并今天添加了圆柱体 - 我能够通过更改设置文本值来动画化其形状。这不是我上面问题的解决方案，而是第一步。只需要做您提到的自定义网格并需要一个展开数学函数以获得正确的坐标。 - Avatar

@Matheretter 我已经比预计的工作时间要长得多了 :) http://jsfiddle.net/2x4Lbvs0/. 我对正弦/余弦的角度转换在超过π/2时出现了误解。所以它结束时只有应该有的一半！需要改进的算法位于最后的wrap和unwrap方法中。 - Mouloud85

@Matheretter希望我没有频繁地催促。最终版本在这里。我不明白在数学上我在 update 函数中错了哪里。如果你解决了这个问题，我很感兴趣。 - Mouloud85

这对我来说是一段有趣的代码，如果你需要其他形状，我很乐意帮忙。 - Mouloud85