CODEWITHSUNDEEP
javascriptthree.js
Artiga
Artiga

Reputation: 796

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.

Upvotes: 8

Views: 3238

Answers (2)

Charlie
Charlie

Reputation: 2231

The jsfiddle is now broken - here's my attempt at an updated jsfiddle

I removed Tween to simplify it

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 );
}

Upvotes: 0

prisoner849
prisoner849

Reputation: 17586

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)

Upvotes: 11

Related Questions