I have a demo that shows a simple 3D model with th camera rotating around the Y axis. The current transformation matrix can be seen overlaid on top of the canvas.
Scaling and translating work great so far, but rotations seem very wonky. I believe the problem lies in the function used to create the transformation matrix (which I took from http://www.songho.ca...glestoaxes.html ):
(the properties this.rx, ry, rz represent the angles of rotation around each axis in degrees)
this._calculateMatrix = function()
{
// reset to identity matrix
this.m = j3dMat.getIdentity();
// translation
this.m[3][0] = this.tx;
this.m[3][1] = this.ty;
this.m[3][2] = this.tz;
// scale
this.m[0][0] = this.sx;
this.m[1][1] = this.sy;
this.m[2][2] = this.sz;
// rotation begins here
this.rx = this.rx % 360;
this.ry = this.ry % 360;
this.rz = this.rz % 360;
var DEG2RAD = 3.141593 / 180;
var rm = j3dMat.getIdentity(); // a separate rotation matrix
// rotation angle about X-axis (pitch)
var theta = this.rx * DEG2RAD;
var sx = Math.sin(theta);
var cx = Math.cos(theta);
// rotation angle about Y-axis (yaw)
theta = this.ry * DEG2RAD;
var sy = Math.sin(theta);
var cy = Math.cos(theta);
// rotation angle about Z-axis (roll)
theta = this.rz * DEG2RAD;
var sz = Math.sin(theta);
var cz = Math.cos(theta);
// determine left axis
rm[0][0] = cy*cz;
rm[0][1] = sx*sy*cz + cx*sz;
rm[0][2] = -cx*sy*cz + sx*sz;
// determine up axis
rm[1][0] = -cy*sz;
rm[1][1] = -sx*sy*sz + cx*cz;
rm[1][2] = cx*sy*sz + sx*cz;
// determine forward axis
rm[2][0] = sy;
rm[2][1] = -sx*cy;
rm[2][2] = cx*cy;
// multiply trans matrix by rotation matrix
this.m = j3dMat.mult(this.m, rm);
}
What am I doing wrong? Any pointers/resources on how to do this the right way?
Thanks!