Basics of 3d to draw Rubik's Cube

Question

I'd like to draw a Rubik's Cube on html canvas element with some perspective, but I've never had any experience with 3d graphics, perspective etc. so I'm looking for all helpful resources to achieve this. The only helpful link I've found is for this demo :

http://oos.moxiecode.com/js_canvas/3d_cube/index.html

Answer 1

You can certainly create 3-d models with canvas using webGL or 3-d javascript libraries, but I would personally use CSS3 transforms and translations instead if you're wanting to create a rubix cube (I promise, it would be MUCH LESS code). Check this out and you'll be inspired:

http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

This demo is using linear rotations, but if you use ease-in-out rotations, the rotations will look much more natural.

Answer 2

I wrote this awhile back

http://www.pascarello.com/canvas/rubikscube/

It has issues when you start to mix up colors, but you can play with the code.