javascript - Basics of 3d to draw Rubik's Cube - Stack Overflow

admin管理员组

文章数量:1292809

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 :

.html

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./js_canvas/3d_cube/index.html

• javascript
• canvas
• 3d
• perspective
• rubiks-cube

Share Improve this question Follow edited Nov 17, 2012 at 21:04 HostileFork says dont trust SE 33.6k1313 gold badges102102 silver badges174174 bronze badges asked Sep 16, 2011 at 22:18 mike_hornbeckmike_hornbeck 1,62233 gold badges3030 silver badges5252 bronze badges 1

• There are some Java applets around that can draw isometric Rubik's Cubes that might help. – Neil Commented Sep 16, 2011 at 22:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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./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.

I wrote this awhile back

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

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

本文标签： javascriptBasics of 3d to draw Rubik39s CubeStack Overflow