Javascript communication with Flash 5 and Cookies Tutorial

Site hosted by Angelfire.com: Build your free website today!

Wireframe Objects and 3D Rotations

by Bill Tagliaferro

In an article entitled "Do We Really Need Quaternion", Diana Gruber says: "The rotation matrix R is so intrinsically useful, it is worth taking the time to look at the derivation."

Even thought I'm not a Game Developer this topic interested me, when a number of threads appeared at the Flashkit message board because of a need to produce wireframe objects for simulations in which 3D motion is displayed. Well actually it's 6D motion, 3 translation (position) and 3 rotation (attitude)

The rotation matrix R that Diana talks about can be separated into the product of three rotations, one about each axis of the three dimensional system (e.g. X, Y, Z). What follows is NOT meant to be a mathematical derivation of these rotation matricies. This tutorial is meant for the "Mathematically Impaired" as a simple and practical method of 3D rotational motion and its use with wireframe objects.

Mathematical Definitions

Rotational matrices are often most easily conceptualized as noncommuting products of rotations about a single coordinate axes. These rotations are defined as:

(CCW rotation about forward axis, +x, produces roll)

(CCW rotation about down axis, +y, produces yaw or heading)

(CCW rotation about out axis, +z, produces pitch)

The combined result of rotations about all three coordinate axes is:

Then, to rotate the coordinates of a point about some arbitrary origin the equation is:

Where:

XO, YO, and ZO are the origin coordinates, and X, Y, and Z are the display coordinates of the point to be rotated.

How this looks in actionscript is:

//
// Definitions:
//
//	p[0] = x display
//	p[1] = y display
//	p[2] = z display
//
//	t = angle to rotate in degrees
//
//	org[0] = x display coordinate of the rotation origin
//	org[1] = y display coordinate of the rotation origin
//	org[2] = z display coordinate of the rotation origin
//
function xrot(p,t,org) {
//rotates ccw about x axis (right) looking toward the origin
	ang = t * deg2rad;
	a = p[0]-org[0];
	b = p[1]-org[1];
	c = p[2]-org[2];
	x =  a;
	y =  b*Math.cos(ang) + c*Math.sin(ang);
	z = -b*Math.sin(ang) + c*Math.cos(ang);
	p[0] = x+org[0];
	p[1] = y+org[1];
	p[2] = z+org[2];
	return;
}
function yrot(p,t,org) {
//rotates ccw about y axis (down) looking toward the origin
	ang = t * deg2rad;
	a = p[0]-org[0];
	b = p[1]-org[1];
	c = p[2]-org[2];
	x =  a*Math.cos(ang) - c*Math.sin(ang);
	y =  b;
	z =  a*Math.sin(ang) + c*Math.cos(ang);
	p[0] = x+org[0];
	p[1] = y+org[1];
	p[2] = z+org[2];
	return;
}
function zrot(p,t,org) {
//rotates ccw about z axis (out) looking toward the origin
	ang = t * deg2rad;
	a = p[0]-org[0];
	b = p[1]-org[1];
	c = p[2]-org[2];
	x =  a*Math.cos(ang) + b*Math.sin(ang);
	y = -a*Math.sin(ang) + b*Math.cos(ang);
	z =  c;
	p[0] = x+org[0];
	p[1] = y+org[1];
	p[2] = z+org[2];
	return;
}
//
//
//	Att	=	Attitude
//			[0] - roll
//			[1] - heading
//			[2] - pitch
//
//
function rotate(p,att,org) {

sinr = Math.sin(att[0]*deg2rad);
	cosr = Math.cos(att[0]*deg2rad);
	sinp = Math.sin(att[1]*deg2rad);
	cosp = Math.cos(att[1]*deg2rad);
	siny = Math.sin(att[2]*deg2rad);
	cosy = Math.cos(att[2]*deg2rad);
	// r for NED
	r00 = cosy*cosp;
	r10 = cosy*sinp*sinr-siny*cosr;
	r20 = cosy*sinp*cosr+siny*sinr;
	r01 = siny*cosp;
	r11 = siny*sinp*sinr+cosy*cosr;
	r21 = siny*sinp*cosr-cosy*sinr;
	r02 = -sinp;
	r12 = cosp*sinr;
	r22 = cosp*cosr;

a = p[0]-org[0];
	b = p[1]-org[1];
	c = p[2]-org[2];

x = a*r00 + b*r01 + c*r02;
	y = a*r10 + b*r11 + c*r12;
	z = a*r20 + b*r21 + c*r22;

p[0] = x+org[0];
	p[1] = y+org[1];
	p[2] = z+org[2];
	return;
}

Each of these functions receives the coordinates of a point P in display space, converts to object space, performs the rotation, converts back to display space, and returns the rotated point in the same vactor as input "P".

How they work:

The lines are drawn by attaching a line to point 1 and scaling it to point 2 (see source).

Initialization and "Connecting the Dots":

Make sure that you download the source file and study it carefully.

[Download Source]