javascript - 使用 three.js 折叠矩形以形成立方体

我正在尝试制作一个立方体，其表面有 6 个面，作为一个面可移动的立方体网。像这样:

上图中，有6张脸，一张脸(蓝色的)是可动的。

人们可以沿着它们的边缘将它们一起向上旋转以形成一个“网”。一旦他们认为自己完成了，他们可以按下“折叠它”按钮——所有的边都旋转 90 度以创建立方体(或者如果他没有在适当的位置加入蓝色面，则可能不是立方体。)

下面是按下“折叠”按钮后的中间状态。

折叠面后应该是这样的:

(不知何故该链接在 mac 上不起作用)

我不知道该怎么做。感谢您的帮助。

在此先感谢您。

最佳答案

您可以使用对象的层次结构。

var obj1 = new THREE.Mesh(...);
var obj2 = new THREE.Mesh(...);
obj1.add(obj2);

有一个很好的example它的。

因此，根据这个原理，我制作了折叠立方体的动画，如您的问题所示。当然，这不是最终的解决方案，这只是一个起点。

更新:我更新了 fiddle 。您可以通过单击 PressMe 按钮开始折叠。使用 Tween.js 制作的动画(参见 foldTheCube() 函数)

关于javascript - 使用 three.js 折叠矩形以形成立方体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41320005/