Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Folding rectangles to form a cube using three.js

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:

enter image description here

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.

enter image description here

After the faces are folded it should like this:

enter image description here

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.

like image 200
Artiga Avatar asked Dec 25 '16 09:12

Artiga


1 Answers

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)

like image 155
prisoner849 Avatar answered Oct 01 '22 19:10

prisoner849