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

Question

我正在尝试用给定的6个面作为立方体网格图来制作一个立方体，其中一个面是可移动的。就像这样：

在上面的图片中，有6个面，其中一个面（蓝色的）是可移动的。

人们可以沿着它们的边缘将它们一起旋转以形成一个“网格”。 一旦他们认为完成了，他们可以按下“折叠”按钮 - 所有边缘都会上翻90度以创建立方体（如果他没有将蓝色面放在正确的位置，则可能不是立方体）。

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

折叠完面后，它应该像这样：

这里提供相应的动画: http://www.mathematikus.de/10/ （不知道为什么在Mac上链接无法打开）

我不确定该如何处理。非常感谢您的帮助。

提前感谢您。

- Artiga

---

一个立方体有6个面... :-) - 6502

Answer 1

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

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

这里有一个不错的示例。

所以，按照这个原理，我为折叠立方体制作了动画，就像你问题中描述的一样。当然，这并不是最终解决方案，这只是个起点。

jsfiddle 示例。

更新：我已经更新了代码段。你可以通过点击 PressMe 按钮开始折叠动画。动画使用 Tween.js 制作（见 foldTheCube() 函数）。

- prisoner849

---

非常感谢您的回答。我该如何使只有蓝色侧面可以移动/拖动，并且一旦魔方立方体形成后，它就不应再发生动画效果。 - Artiga

关于移动/拖动对象，这里有一个很好的例子：可拖动立方体。 - prisoner849

嗯..请标记我的答案，而不是我的评论 ;) 我从未使用过DragContorls.js，所以我无法对它发表任何意见。 - prisoner849

jsfiddle 示例演示了如何使用 DragContorls。取消注释 //sides.push(s); 这一行，你就可以拖动所有的平面了。 - prisoner849

非常感谢 @prisoner849，这很棒，但是当点击按钮时它不会折叠成一个立方体。像这样的：http://www.mathematikus.de/10/ - Artiga

Answer 2

jsfiddle现在出问题了 - 这是我尝试更新jsfiddle的结果

我移除了Tween以简化它

https://jsfiddle.net/fd5e48ka/1/

function animate() {
    requestAnimationFrame( animate );

    var angle = Math.PI / 2 / 300;
    sides[0].rotation.y += angle;
    sides[1].rotation.x += -angle;
    sides[2].rotation.y += -angle;
    sides[3].rotation.x += -angle;
    sides[4].rotation.x += angle;

    renderer.render( scene, camera );
}

- Charlie