[Contents]

Visualizing Rotations in 3D
John Denker

## 1  Reference Frames

We imagine the diagram is a top view. The plane of the diagram is called the NE plane. It is like an ordinary map. It is part of the NED (north-east-down) coordinate system. We assume you are looking straight down onto the diagram, so the D direction is synonymous with your line of sight. The NED system does not rotate.

Meanwhile, the xyz coordinate system is attached to the object. For an aircraft, by convention, the x axis points out the nose, while the y axis points out the starboard wingtip, and the z axis points out through the floorboards. The xyz system rotates with the object.

Terminology:

• Rotation in the xy plane is called yaw. The x direction is also called the heading.
• Rotation in the zx plane is called pitch.
• Rotation in the yz plane is called roll. The angle of the yz plane relative to the NE plane is sometimes called the roll angle (logically enough), but more commonly it is called the bank angle.

## 2  Mouse Semantics

In the diagram, dragging with the mouse rotates the object. Double-clicking the mouse restores the original orientation.

More specifically, the rotation works like this: If you drag the mouse some amount r in the NE plane, the object rotates in the rD plane. That is, the plane of rotation includes your line of sight and includes the mouse-motion. It couldn’t be simpler.

This is sometimes called trackball semantics. Imagine a ball held loosely in a socket. If you push the top of the ball sideways, it rotates in the direction you push it.

## 3  Combining Rotations

When the object is in its initial orientation, dragging the mouse gives you direct control over pitch and roll. The mouse only moves in two dimensions, so you might be wondering how to change the heading, i.e. change the yaw angle. Here’s one way to do it: Drag the mouse in the −N direction until the x axis is pointing straight toward you, in the −D direction. Then drag the mouse in the E direction until the x axis is pointing in the E direction. Finally, drag the mouse in the +N direction to return the z axis to its original direction (parallel to D).

This works because in three (or more) dimensions, rotations do not commute. The final rotation in the ND direction does not undo the initial rotation in the −ND direction.

We have just described an operation consisting of two motions in the ±N directions and one in the E direction; it does not form a closed path in the NE plane.

However, you can achieve the same result using closed paths. In particular, if you drag the mouse around a circular path clockwise, the object will rotate counterclockwise, by an amount proportional to the area of the circle. This is particularly useful for making small changes.

Remark: If the circle is small, this is essentially the Lie derivative of the rotation operator. If this doesn’t mean anything to you, don’t worry about it.

This is really quite remarkable. Consider the contrast:

• For ordinary vectors such as position vectors in 3D, the set of all such vectors is a three-dimensional vector space, and we need three basis vectors to span the space.

If we started with just two basis vectors, we would be stuck in two dimensions; there would be no good way to manufacture another basis vector.

• The set of all rotations in 3D is also a three-dimensional space. It’s a space of bivectors, not exactly vectors, but still it’s a three-dimensional space. It takes three numbers (e.g. yaw, pitch, and roll) to fully specify the attitude of the object. So far so good.

The peculiar thing is that we can start with only two rotation operators. We need three, but we can construct the third by combining the first two in artful ways.

## 4  Plane (versus Axis) of Rotation

There are quite a few ways of representing a rotation.

 The recommend way is in terms of the plane of rotation. This works in any number of dimensions, from 2 on up. In contrast, the notion of a “rotation vector” along the “axis of rotation” only works in three dimensions. You can define an axis perpendicular to the plane of rotation in three dimensions, but not in two dimensions, nor in four-dimensional spacetime.

 You can talk about the plane of rotation without reference to the right-hand rule or anything like that. The plane of rotation has the same symmetries as the rotation itself. The idea of a “rotation vector” requires invoking the right-hand rule, which is a never-ending source of confusion. The “rotation vector” has a lower symmetry than the actual rotation.

## 5  Color Code

In the diagram, the axes and octants are color-coded. The x axis is red, and every octant in the +x hemisphere has red as one of its RGB components. Similar words apply to the y axis (green) and the z axis (blue).

## 6  Mutations

There is evidently no “standard” way to rotate a 3D object using the mouse. For example, reference 1 uses quite different sematics. Horizontal motion apparently always to rotate the object in the DN plane, while vertical motion appears to always rotate in the body yz plane.

Evidently the software does not keep track of the accumulated rotation as a rotation per se; instead, it keeps track of the accumulated mouse motion in the NE plane. Motions in the plane are commutative. This is not a good model for the rotation of real objects. Among other things, it suffers from severe “gimbal lock” under certain rather common conditions.

## 7  References

1.
https://threejs.org/docs/#api/geometries/TextGeometry
[Contents]