使用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);

这是一个很好的例子.

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

upd:我已经更新了小提琴.您可以通过单击PressMe按钮开始折叠.用Tween.js制作的动画(参见foldTheCube()函数)