I'm writing a small 3D renderer (using an orthographic projection right now).
I've run into some trouble with my 3D rotation matrices. They seem to squeeze my 3D object (a box primitive) at certain angles.
Here's a live demo (only tested in Google Chrome):
http://dl.dropbox.com/u/109400107/3D/index.html
The box is viewed from the top along the Y axis and is rotating around the X and Z axis.
These are my 3 rotation matrices (Only rX and rZ are being used):
var rX = new Matrix([
[1, 0, 0],
[0, Math.cos(radiants), -Math.sin(radiants)],
[0, Math.sin(radiants), Math.cos(radiants)]
]);
var rY = new Matrix([
[Math.cos(radiants), 0, Math.sin(radiants)],
[0, 1, 0],
[-Math.sin(radiants), 0, Math.cos(radiants)]
]);
var rZ = new Matrix([
[Math.cos(radiants), -Math.sin(radiants), 0],
[Math.sin(radiants), Math.cos(radiants), 0],
[0, 0, 1]
]);
Before projecting the verticies I multiply them by rZ and rX like so:
vert1.multiply(rZ);
vert1.multiply(rX);
vert2.multiply(rZ);
vert2.multiply(rX);
vert3.multiply(rZ);
vert3.multiply(rX);
The projection itself looks like this:
bX = (pos.x + (vert1.x*scale));
bY = (pos.y + (vert1.z*scale));
Where "pos.x" and "pos.y" is an offset for centering the box on the screen.
I just can't seem to find a solution to this and I'm still relativly new to working with Matricies.
You can view the source-code of the demo page if you want to see the whole thing.
