three.js - 旋转段（不是对象）

我正在使用three.js来创建一个折纸效果图像过渡（即用当前图像对对象进行纹理化，折叠对象中的段，也许用洗色，下载下一个图像，然后展开对象以显示新的一。）我想写一个引擎，可以根据专辑产生不同的形状。

到目前为止的设计是根据折叠的位置来定义段，移动要折叠的段的 Z 索引，然后将段（和任何附加的段）沿移动方向旋转 180 度。

问题是似乎有旋转物体的功能，但据我所知，没有分段。除了手动重新计算段之外，有没有办法旋转对象的段？

标签： three.js

以你想做的方式做你想做的事情（如果我理解正确的话）的问题是你不断更新几何缓冲区，而几何缓冲区又需要不断地重新发送到 GPU。这对于小型网格可能具有足够好的性能，但它通常仍然是一项昂贵的操作。

处理它的另一种方法是考虑您的“折叠”将如何发生，并围绕它设计对象组。例如，要对角折叠一个正方形，您需要两个三角形。如果每个三角形都是一个网格，那么您可以对每个三角形应用特定的旋转以模拟沿公共边缘折叠。因此，对于您想要产生的任何折叠效果，只需创建网格组并定义它们如何展开/折叠。

两帧之间的差异可能难以察觉。展开的图像都将被映射到相同的位置，也许映射到一个平面。然后，在单个帧内，您将帧交换为可折叠的网格集合，并开始制作动画。通过使用 UV 坐标，图像可以像单平面一样映射到集合，将图像上的关键点与折叠段的顶点联系起来。

如果这有帮助，那就太好了。如果你有问题，或者想要一个例子，请告诉我，尽管我现在没有时间制作一个复杂的演示。