HTML5 Experiment: A Rotating Solid Cube

Previously I shared an HTML5 experiment consisting of a rotating wireframe cube. Today, I will share a new experiment that makes a rotating solid cube. This experiment is largely based on the wireframe cube experiment.

To run this experiment you need a browser that supports the HTML5 canvas element. You should see a rotating solid cube below if your browser supports the canvas element. If not, you should consider upgrading your browser to the latest version.

The Code

Please leave a comment if you have any doubt, comment, or suggestion regarding this code.

I guess you want to make a texture mapped cube.
First of all, let me tell you that there are 3 approaches for doing 3D with HTML:
(1) CSS3 using 3D transforms (with or without javascript)
(2) Canvas 2D (HTML5 + JavaScript) – this is the one used in this tutorial.
(3) WebGL (HTML5 + JavaScript)

It is possible to make a textured cube with the 3 approaches. However, the first approach is the only one that supports 3D animation of DIVs.

The code in this tutorial is something like a mini 3d engine coded from scratch. To do texture mapping, we would need to implement a function to draw textured polygons, and additionally we would need to alter the Point3D class adding texture map coordinates (called UV coordinates).
I will write a texture mapped version of this code, and post a tutorial about it in a few days.

It is possible to map images to the cube. The process is called TEXTURE MAPPING. Today I will start a series of tutorials that aim to show how to draw a texture mapped cube. The series will be broken in 4 parts.
Thank you very much

I will share code to do a textured cube as soon as I get some free time.
Regarding the code to stop movement, you mean when the mouse is inside the whole canvas, or inside any of faces/surfaces of the cube?

Thank a lot for this code, I try to make a map for create a mini-game like Prelude of the Chambered (http://s3.amazonaws.com/ld48/index.html) or Wolfenstein 3D (http://en.wikipedia.org/wiki/Wolfenstein_3D) without use raycaster but I’ve no idea how to do that. I think create a map a 2D array (because I’ve only one layout) and a camera with coordinate x, y and z but I’m lost. It’s possible with this base code ? Can you help me, please ?

Hi Lefam, Love the spinning cube and have tested it and it works and spins in all major browsers, which has been really hard to find. I need to do a texture mapped version of the cube and you said in 2011 that you would be posting a tutorial about the texture mapped cube in a few days, I haven’t been able to find it, did you post it? It is essential for me to have a texture mapped cube, preferably with text on each face as well as a picture and for each face to have a link to a website page, would this functionality be possible with this cube? Please help. Thank you so much.

I guess you want to make a texture mapped cube.
First of all, let me tell you that there are 3 approaches for doing 3D with HTML:
(1) CSS3 using 3D transforms (with or without javascript)
(2) Canvas 2D (HTML5 + JavaScript) – this is the one used in this tutorial.
(3) WebGL (HTML5 + JavaScript)
It is possible to make a textured cube with the 3 approaches. However, the first approach is the only one that supports 3D animation of DIVs.
The code in this tutorial is something like a mini 3d engine coded from scratch. To do texture mapping, we would need to implement a function to draw textured polygons, and additionally we would need to alter the Point3D class adding texture map coordinates (called UV coordinates).
I will write a texture mapped version of this code, and post a tutorial about it in a few days.
(Texture Mapping = applying an image to a 3D object)

Amazing code. I tried making my own from scratch, matrix multiplication is too confusing. This page even works in mobile browsers like my 3Ds and iPod! By removing the code at line 120 and the last t[f[3]].z part on 105 you can create faces using 3 verts. I guess for texture mapped cubes in canvas you would have to get the image data from the UV image and skew it to the faces? Or some type of array that replaces the colors with the pixel data?

I’mamazed, I have to admit. Rarely do I encounter a blog that’s both equally educative and engaging, and let me tell you,
you have hit the nail on the head. The issue is something
which too few men and women are speaking intelligently about.
I am very happy that I stumbled across this during my search for something concerning this.

wondering if you can imbed video into each wall of this rotating cube while still keeping it all HTML5? Also, is there a way I can email you? I might be interested in hiring you to do some cube work for my personal website

I do consider alll of the idea you’ve offered in your
post. They’re really convincing annd can certainly work.
Nonetheless, the posts are verry short for newbies.
May you please extend them a little from next time? Thank you for the post.

However, in comparison to Tramadol, morphine does not have the ability to induce improved postoperative immuno-suppression. The
nerve root and neurologic structures are protected and carefully retracted, so that the herniated
disc can be removed. In addition, the Green Light Laser Prostate Treatment
by less risk and complications than those previously used for treatment of BPH.

I have checked your site and i have found some duplicate content, that’s
why you don’t rank high in google’s search results, but there is a
tool that can help you to create 100% unique content, search for;
boorfe’s tips unlimited content

Hi. I see that you don’t update your website too often. I know that writing articles is boring and time consuming.
But did you know that there is a tool that allows you to create new articles using existing
content (from article directories or other websites from your niche)?
And it does it very well. The new posts are
high quality and pass the copyscape test. You should try miftolo’s tools