Camera and User Interaction - WebGL Game Development - page 174

The next very important function is rotateOnAxis ; this function is the base
function for pitch, yaw, and roll functionalities. It takes two parameters: the axis
vector ( axisVec ) and an angle in radians. The axis vector holds the axis (up, left,
and direction) on which we want the rotation. In this function, we will not use the
rotation matrix but use quaternions described earlier. We will use the setAxisAngle
function of our quat class to compute the rotation along an axis and store it in
our quate variable: quat.setAxisAngle(quate, axisVec, angle) . Then, we
transform our three vectors with the rotation quaternion. Rotation using quaternions
is much faster than using the rotation matrix, as the rotation matrix would use 9/16
elements but quaternions use four elements ( i , j , k , and w ). The rotateOnAxis
function is defined as follows:
FreeCamera.prototype.rotateOnAxis =function (axisVec, angle)
{
// Create a proper Quaternion based on location and angle
var quate=quat.create();
quat.setAxisAngle(quate, axisVec, angle)
// Create a rotation Matrix out of this quaternion
vec3.transformQuat(this.dir, this.dir, quate)
vec3.transformQuat(this.left, this.left, quate)
vec3.transformQuat(this.up, this.up, quate)
vec3.normalize(this.up, this.up);
vec3.normalize(this.left, this.left);
vec3.normalize(this.dir, this.dir);
}
For functionalities such as pitch, yaw, and roll, we will invoke the rotateOnAxis
function to calculate our new vectors. For pitch , we will pass the left vector as a
parameter ( axisVec ) to rotateOnAxis , as pitch is rotation around the x axis. For
yaw , we will pass the up vector, as yaw is rotation around the y axis, and for roll ,
we will pass the direction vector for roll. These three functions are defined in the
following code snippet:
FreeCamera.prototype.yaw =function (angle) {
this.rotateOnAxis(this.up, angle);
}
FreeCamera.prototype.pitch =function (angle) {
this.rotateOnAxis(this.left, angle);
}
FreeCamera.prototype.roll =function (angle) {
this.rotateOnAxis(this.dir, angle);
}