如何在Three.js中展开圆柱形状的展开/展开动画？

Question

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

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

1. 我可以使用THREE.CylinderGeometry

绘制两个圆圈（底部和顶部）

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

3. 但是如何进行展开＆＃34;矩形的外部蓝色动画＆＃34;？！

我之前从未做过带有three.js的动画，所以我还需要一个建议。感谢。

Answer 1

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

• 两个CircleGeometry - 圈子

• 展开平面的一个自定义Geometry

平面实际上是两组顶点，表示围绕圆圈的换行/展开。控制运动的是每个段之间的角度均匀地补偿。由于N是段的数量，N为简单起见，你需要在一侧将此角度从0（线状态）调整为360 / N（圆形状态），在另一侧调整为-360 / N，从中间（360 / N代表每边180 /（N / 2））。

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

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