3D Object in HTML5 Canvas

I was going to make a rotating cube to show you guys, but i decided to just quickly make a very simple rotating 3D shape instead.

This demonstrates that 3D is possible, even though there isn't a standard for 3D rendering in the canvas API. Here is the example.


You can look at the source (right click -> source/view source/open source), but it is very messy and hard-coded.
My original plan was to explain every bit of it; but that is a very tricky thing to do, so I just stopped there to demonstrate it's possibility.
What I will do instead is make a 3D engine for you guys to use or examine. A 3D engine that allows free use of z-axis values, making it very simple to create 3D objects.

In the example I linked, it uses a bit of simple maths (the maths is simple, but figuring out where and how to use it is not).
I recommend anyone wishing to do 3D from scratch to learn the maths first.


When you think about a 3D object on a screen, you need to look at it as a "2D projection" of the 3D object. First you must have the 3D points of reference and then use the maths to calculate where these points would be on a 2D projection of the 3D object, then join the points with lines.
That's basically how it works. I might explain it more when I post the 3D engine once I've written it.