Three.js Coordinate System Explained

This article provides a clear overview of the standard 3D coordinate system used by Three.js. You will learn about the orientation of the X, Y, and Z axes, how the right-handed coordinate system works, and how this affects the placement and rotation of objects in your 3D scenes.

The Right-Handed Coordinate System

Three.js uses a right-handed coordinate system as its default standard. This is a common convention in OpenGL and web graphics, distinguishing it from left-handed systems often used in DirectX or game engines like Unity and Unreal Engine.

To visualize the right-handed system, you can use your right hand: * Thumb: Points to the right, representing the positive X-axis. * Index Finger: Points straight up, representing the positive Y-axis. * Middle Finger: Points toward you (out of the screen), representing the positive Z-axis.

Direction of the Axes

When you initialize a default Three.js scene, the coordinates behave as follows:

X-Axis (Width): Represents the horizontal axis. Moving an object in the positive X direction moves it to the right. Moving it in the negative X direction moves it to the left.
Y-Axis (Height): Represents the vertical axis. Moving an object in the positive Y direction moves it up. Moving it in the negative Y direction moves it down.
Z-Axis (Depth): Represents the depth axis. Moving an object in the positive Z direction moves it toward the viewer (out of the screen). Moving it in the negative Z direction moves it away from the viewer (into the screen).

Rotations in Three.js

Because Three.js uses a right-handed system, rotations also follow the right-hand rule for behavior:

Point the thumb of your right hand along the positive direction of the axis of rotation (X, Y, or Z).
Curl your fingers.
The direction your fingers curl is the direction of a positive rotation (counter-clockwise when looking down the axis toward the origin).

By default, Three.js measures rotations in radians rather than degrees. To rotate an object 180 degrees, you would rotate it by \(\pi\) (approximately 3.14159) radians.