Recommended JS library for origami-like paper folding animation

Question

I would like to create an origami-like paper folding animation using WebGL or Canvas (no Flash!). The effect I would like to reproduce is similar to the one in the video here.

A clear view of the final animation could be represented as follows for a cube:

I was trying to use three.js library, but I couldn't find a way to animate a single face of a THREE.Mesh. I also tried simple CSS3 animation, but it would make very difficult to animate solid with more than 6 faces - as it is not possibile to create relationships between 2 or more faces.

Anyone can recommend other JS libraries? Or is there a way to achieve this with three.js? Of course, it would be great if there could be a way to make it work just using canvas2d - but I think is pretty unlikely!

Answer 1

I'm not sure which framework is best, but I think it's best to use a framework that supports skinned meshes and animation playback. A quick search gave...

http://www.oak3d.com/

...but I have no idea if it's the way to go. Three have (or at least had) support for skinning but to get the data out of a 3D-program wasn't trivial and animation playback was/is limited.

Answer 2

if you use Maya as 3D-program then try www.inka3d.com. then you can animate it in maya simply by parenting the top face to the front face and all side faces to the floor (each being a plane object), and crating some keyframes. then add a camera, do "export all..." and you're done

Answer 3

I would recommend http://oridomi.com/ as an inspiration. It offers basic folding animations.