使用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()函数）