Page 3: Axis Angle Representations

Axis Angle Representation

With Euler Angles, we built rotations by using the “building block” of rotations about coordinate axes. We rotate around the X, Y or Z axis.

We can actually rotate about any axis. As we mentioned on page 1, we can represent any rotation as a single rotation about some axis. The only trick is that we need to specify the axis. (contrast this with Euler Angles that require 3 rotations, but around pre-determined axes).

This leads to a different way to represent a rotation: we can provide the direction of the axis (a vector), and an amount to rotate around that axis. This is called axis angle.

As an aside… both of these representations were invented by mathmetician Leonard Euler, and are consequences of his basic theorems about rotation.

You can try it with this gadget. On the left, we have Euler Angles (which you should be used to by now). On the right, we have Axis Angle form - note how it has 4 numbers (3 for the vector of the axis, one for the amount of rotation around that axis). With the gadget, the axis of rotation is shown by the yellow cylinder.

You can set the Euler Angles (X1,Y1,Z1) and press “To AxAng” to have the other side updated. Or you can set the Axis Angle (X2,Y2,Z2,theta2) and press “To Euler”. Try it. Notice that you can make any rotation and convert it - it may not be obvious how to do the conversion manually, but the math is possible. (Axis Angle to Euler Angle is actually tricky to implement - but it is built into three).

You can see that if you set the axis to be one of the coordinate axes (the default setup has the vector as 0,0,1 - or the Z axis), it is the same as a rotation about that axis. But try making the vector be something else. For example, set the axis to be 1,1,1 (so the cylinder is pointing “diagonally”) and note how the object rotates around this axis.

With axis-angle form, we ignore the magnitude of the vector - we just use its direction. Things break if the vector has zero length.

Axis angle form is useful if the object naturally has some axis to rotate around. If you want to make a particular rotation, it can be difficult to figure out what the right axis is.

The rest of the page gives an example where axis angle form is useful that can help appreciating the difference between axis angles and Euler Angles.

Box 1: A simple example that isn’t so simple

The real learning goal of this page is to get you to think about axis angle representations. To do that, we will use an example you have seen before: trying to understand what is going on in the first spinning cube demo in the previous Workbook.

The code is in 07-03-01.js ( 07-03-01.html) (it’s the same as the one on page 1 of the previous Workbook). The key lines are:

43
44
45
46
47
48
49
50
51
52

function animate(timestamp) {
  let timeDelta = 0.002 * (lastTimestamp ? timestamp - lastTimestamp : 0);
  lastTimestamp = timestamp;

  cube.rotation.x += 0.5 * timeDelta;
  cube.rotation.y += 0.5 * timeDelta;

  renderer.render(scene, camera);
  window.requestAnimationFrame(animate);
}

07-03-01

Notice that this animation loop causes a somewhat complicated motion - it goes left and right, even though it moves through a simple progression in Euler Angles (incrementing by 0.5*timeDelta each frame) … THREE’s built in Euler Angles are XYZ.

What is going on here is that each time we change the X rotation, which changes the meaning of the Y rotation. So we don’t get a simple motion as we might have expected.

For the first Euler angles, that first step would be: $ R_x(.01) \circ R_y(.01) $ (rotation about X followed by a rotation about Z). If we wanted to continue another step, we could repeat that, composing those same rotations again. $$R_x(.01) \circ R_y(.01) \circ R_x(.01) \circ R_y(.01) \neq R_x(.01+.01) \circ R_y(.01 + .01)$$ The left side of that inequality would be uniform steps. The right side is what we did when we just added to the Euler Angles. Since you read Page  1  (Rotations in 3D), you were reminded that just because $ R_x(\alpha) \circ R_x(\beta) = R_x(\alpha+\beta) $, this doesn’t work when there’s a rotation about Y stuck in between.

To put it a different way, we could have written the code as:

1
2

cube.rotation.x = 0.5*time;
cube.rotation.y = 0.5*time;

Each frame, the rotation is separate (we’re setting the angles). The rotation around X happens first, before the rotation around Y. When the rotation around X changes (as it does as time advances), the direction of the Y axis (and therefore what a rotation around Y does) changes.

Box 2: A Simpler Rotation

Here’s a different thing to try… Suppose that each step rather than setting the angles, we did a little rotation around X and then a little rotation around Y.

1
2

objRight.rotateX(.5*timeDelta);
objRight.rotateY(.5*timeDelta);

On the left is the version incrementing the rotations (adding), on the right is the new thing (composing). Notice that adding has a complicated pattern, whereas the right motion is a simple rotation (spinning around an axis).

You can see that on the right, the object is spinning around the cylinder. To convince yourself that the object is rotating around this axis, move the camera such that you are looking straight down the cyliner (so it appears as a dot) - the cubes will be going in a circle around the center.

We can think of this as follows: the sequence of rotations $R_x(.01)$ and $R_y(.01)$ is equivalent to a single rotation about some other axis.

So, if we wanted to just keep spinning around that axis, we could instead write:

cube.rotateOnAxis(axis, angle);

We just need to figure out how to come up with axis and angle.

There is a subtle catch here: the amount of the rotations change things. $R_x(.01)$ followed by $R_y(.01)$ is not the same as $R_x(.02)$ followed by $R_y(.02)$. In the latter case, each rotation is more. Changing the amounts of rotations changes both the axis and the angle of the combined rotation: the first rotation about X sets the direction of the Y axis that we rotate around next, so rotating more about X means a different direction for Y.

When we rotate around X first, the amount we rotate around X determines where the Y axis is. So, different amounts of rotation can lead to different axes. $R_x(.02)$ followed by $R_y(.02)$ is a different rotation (in terms of both axis and angle) as $R_x(.01)$ followed by $R_y(.01)$. And, $R_x(.02)$ followed by $R_y(.02)$ is not the same as the sequence $R_x(.01)$ $R_y(.01)$ $R_x(.01)$ $R_y(.01)$.

In Axis Angle form, we don’t have this problem: if we want to rotate around some axis, we can rotate around that axis. Even if that axis isn’t aligned with a coordinate axis.

Using Axis Angle

Axis angle is useful when we know the axis we want an object to spin around. For example, if we know we want a cube to rotate around its diagonal, we can do that (by picking the axis as the diagonal).

Axis angle is also useful if we want to have the object to have a spinning motion (with Euler Angles we get the weird complex motions for alternating the different rotations).

A question is “how do we figure out the axis?” In some cases it is easy (the diagonal of a cube example). In other cases, we might want to convert from other angle forms. These conversions can be tricky - but fortunately, THREE has a lot of code to help with doing these conversions.

The axis angle representation is also important to learn because it serves as the basic idea for Quaternions, which are a way to represent rotations that are very important in graphics. We’ll learn about them next.