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!