animation - 如何在 Three.js 中为圆柱体制作展开/展开动画？

Question

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

它应该看起来像这样(在 youtube 上找到):

1. 我可以使用 THREE.CylinderGeometry

绘制两个圆(底部和顶部)

2. 我可以使用 THREE.CylinderGeometry 绘制侧面，无需填充

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

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

Answer 1

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

• 两个 CircleGeometry 圆圈

• 展开平面的一个自定义几何

平面实际上是两组顶点，表示在圆上环绕/展开的线。控制运动的是每个段之间的角度相等。 N 是段数，为了简单起见，N 是偶数，您需要将这个角度从一侧的 0(线状态)调整为 360/N(圆形状态)，在另一侧调整为 -360/N，从中间(360/N 代表每边 180/( N/2 ))。

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

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