2

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

HostileFork says dont trust SE
  • 32,904
  • 11
  • 98
  • 167
mike_hornbeck
  • 1,612
  • 3
  • 30
  • 51
  • There are some Java applets around that can draw isometric Rubik's Cubes that might help. – Neil Sep 16 '11 at 22:33

2 Answers2

8

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.

Eric Rowell
  • 5,191
  • 23
  • 22
  • I know this is an old question but this answer still applies. The example linked uses jQuery, but a vanilla JS solution should be possible. Much easier than Three.js. I think that 'ease-out' transitions would feel more natural than the linear transitions in the demo, too. – mikeypie Jun 16 '22 at 23:24
1

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.

epascarello
  • 204,599
  • 20
  • 195
  • 236