Personal Computing and Development by Dag J. Nedrelid

3D Rotation Trig

Below I have created a small matrix with 8 vectors rotating around a center point by using the vector coordinates instead of a preset radius like I did in the 2D rotation. I’ve used DHTML for functionality and illustration. Viewing the source may help you grasp the use of the formula.

Click here to open the script in a new window.

In the 2D script I used this formula to rotate around a center point:

x = Math.cos(Radian)*XRadius(hypotenuse)
y = Math.sin(Radian)*YRadius(hypotenuse)

By changing the radius, you can simulate x,y rotation as well, but only on a 2D plane. It would be simulation, not real 3D. Add depth with another z calculation with the above formula, and you would have the 3D effect available.

It means to give the coordinate or a vector’s ‘x’ and/or ‘y’ new values based on finding the radian x and y ratio through cosine and sine multiplied by hypotenuse to keep the proper center point (radius). This formula could be used for simulating 3D on a 2D plane.
It could even be used for real 3D calculation, but you would need to find a way to make the rotation radius/hypotenus values work together when e.g crossing a z-axis with a y-axis rotation. When e.g. the z-rotation closes in on the y-axis, the radius of z-rotation (x) would have to be shortened accordingly, start a x-rotation as well and you have a calculation challenge.

Here is a formula that does the proper job of 3D calculation.
It respects every axis radius/hypotenuse in regards to each other.

// Rotation around the X axis
xy = Math.cos(RadianX)*y - Math.sin(RadianX)*z
xz = Math.sin(RadianX)*y + Math.cos(RadianX)*z

// Rotation around the Y axis
yz = Math.cos(RadianY)*xz - Math.sin(RadianY)*x
yx = Math.sin(RadianY)*xz + Math.cos(RadianY)*x

// Rotation around the Z axis
zx = Math.cos(RadianZ)*yx - Math.sin(RadianZ)*xy
zy = Math.sin(RadianZ)*yx + Math.cos(RadianZ)*xy

Where zx(X), zy(Y), yz(Z) are the new values to use after every calculation in a 3D space of coordinated rotation. By running this formula on every vector in my little ASCII cube matrix, I get coordinated movement based on the Radians given to it.

By changing the RadianX, RadianY, RadianZ up to 2π(6.28)(360°) in this formula you control every axis rotation, and each rotation radius/hypotenuse should work in harmony. The trick here is basically how each axis calculation inherits the results from the previous.

It will help to repeat the chapter in a math book on trigonometry (especially sine and cosine) if you are having a hard time understanding the formula above.