3D Coordinate Space

Thu, 05 Oct 2023 12:18:28 GMT — Properties

---

In the context of three.js, the 3D coordinate space refers to the virtual three-dimensional world where objects, cameras, lights, and other entities are positioned and manipulated. It uses a standard Cartesian coordinate system with three perpendicular axes: X, Y, and Z.

Here's how the 3D coordinate space works in three.js:

• X-Axis: The X-axis represents the horizontal dimension. Positive values extend to the right, and negative values extend to the left.
• Y-Axis: The Y-axis represents the vertical dimension. Positive values extend upward, and negative values extend downward.
• Z-Axis: The Z-axis represents the depth or the front-back dimension. Positive values extend outward from the screen, and negative values extend into the screen.

In the standard configuration of three.js:

• The camera looks down the negative Z-axis by default.
• The positive X-axis is to the right of the camera's view.
• The positive Y-axis is upward from the camera's view.

When working with 3D graphics in three.js, understanding the 3D coordinate space is essential for positioning objects, defining camera perspectives, and handling transformations. By manipulating the positions, rotations, and scales of objects along the X, Y, and Z axes, developers create complex 3D scenes and animations.

Back to top