javascript - Folding rectangles to form a cube using three.js

Question

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:

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

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:

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

(somehow that link is not working on mac)

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

Thanking you in advance.

Answer 1

You can use hierarchy of objects.

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

There's a good example of it.

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 example

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