使用three.js折叠矩形以形成立方体 [英] Folding rectangles to form a cube using three.js

问题描述

我正在尝试制作一个立方体，其中6个面位于表面上作为立方体网，其中一个面可移动。这样的事情：

I am trying to make a cube with given 6 faces lying on the surface as a cube net with one face movable. Something like this:

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

In the above picture, there are 6 faces, one face ( blue one) is movable.

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

One can rotate them up together along their edges to form a "net". Once they think they are finished, they can press a "fold it" button – all edges turn up 90 degrees to create the cube (or may not be a cube if he hasn't joined the blue face at proper position.)

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

Below is intermediate status after pressing "fold it" button.

面部折叠后应该是这样的：

After the faces are folded it should like this:

此处给出了相应的动画：< a href =http://www.mathematikus.de/10/ =noreferrer> http://www.mathematikus.de/10/

The corresponding animation is given here: http://www.mathematikus.de/10/

（不知何故，该链接无法在Mac上运行）

(somehow that link is not working on mac)

我不知道如何解决这个问题。任何帮助表示赞赏。

I am not sure how to go about this. Any help is appreciated.

提前感谢您。

推荐答案

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

You can use hierarchy of objects.

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

有一个很好的示例。

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

So, using this principle, I made animation for folding the cube, given in your question. Of course, this is not the ultimate solution, this is just a starting point.

jsfiddle 示例

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

upd: I've updated the fiddle. You can start folding by clicking the PressMe button. Animation made with Tween.js (see the foldTheCube() function)

这篇关于使用three.js折叠矩形以形成立方体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！