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

Question

我正在尝试使用给定的6个面作为一个面可移动的立方体网络作为面。是这样的：

在上述图像中，有6个面，一个面（蓝色）的可移动的。

人们可以沿着它们的边缘一起旋转它们以形成“网”。 一旦他们认为他们完成了，他们可以按下一个“折叠”按钮 - 所有的边都会变成90度来创建立方体（或者如果他没有在适当的位置加入蓝色脸部，则可能不是立方体）。

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

面折叠后，它应该是这样的：

相应的动画这里给出：http://www.mathematikus.de/10/

（不知该链接不工作在Mac）

我不知道该怎么做。任何帮助表示赞赏。

感谢您提前。

Answer 1

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

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

有一个很好的example它。

所以，使用这个原理，我在你的问题中给出了折叠立方体的动画。当然，这不是最终的解决方案，这只是一个起点。

jsfiddle例如

UPD：我已经更新了小提琴。您可以点击PressMe按钮开始折叠。使用Tween.js制作的动画（请参阅foldTheCube()函数）