Concept of Rotation in Virtual World

By now you should be familiar with spatial 3D coordinate systems, positioning and translating objects, as well as scaling them. Rotation is the last fundamental spatial concept in computer graphics; however, it’s often the hardest to understand, so let’s begin to untangle it. To understand rotation, first we need to touch upon the mathematical concepts related to it. Theta denotes the angle between two lines. The angle can be measured in degrees or radians. In this case, the angle is 45 degrees or pi over 4 radians. A-frame operates using degrees, but remember that many functions expect radians. The conversion between degrees in radians is trivial; however, error due to the incorrect input is not.

We can measure the angle between two lines from A to B or B to A. The value is the same, but the rotation is not. In one case, we have clockwise rotation, and in the other, we have anti-clockwise. You should be aware of the handedness of your system as it can drastically alter the outcome. For example, if we rotate something 45 degrees clockwise, this is very different then rotating it 45 degrees anti-clockwise. A frame is a right handed system. This means if you’re facing in the direction of your positive axis, clockwise rotation will occur. Let us see this in action. Single-axis rotation is easy to follow. Let’s see how two-axis rotation works.

A-Frame follows a pitch/yaw/roll rotation approach. Without going into the complicated maths, this can simply be understood as a rotation on the x-y-z axes, keeping the axes fixed. These axes are considered the global axes, and all rotation is performed with reference to them. The local axes can be imagined as being attached to the entity. Rotation simply reorients it as seen in the previous example. As with two-axis rotation, we can also perform a full three-axis rotation. Here, try to predict or explain how the final position was arrived at.

When both are to be applied, rotation is applied first, and then translation second. If there are child objects, then the global rotation will affect the local translation of child objects. For example, the green sphere sets a plus 3 on its local plus y-axis. Initially, this matched its global position at plus 3 on the global plus y-axis, but if we rotate along the x and y-axis, the sphere’s global position will change even if its local position stays fixed. Instead of computing a single rotation use nested entities, apply your rotations and translations at the right level, break down complex rotations into individual axes, and then use entity wrappers to apply only parts of the rotation.