Three.js Local vs World Space Coordinates

This article explains the core differences between local space and world space coordinate transformations in Three.js. You will learn how these two coordinate systems function, how parent-child relationships affect 3D object transformations, and how to programmatically convert coordinates between local and world spaces using the Three.js API.

Understanding Local Space

Local space (also known as object space) is the coordinate system that is local to a specific 3D object. The origin (0, 0, 0) of local space is the object’s own anchor or pivot point.

When you modify an object’s position, rotation, or scale, you are altering its local transform properties. If an object is added directly to the Three.js Scene, its local space aligns with the global world space. However, if the object is added as a child of another object (such as a group), its local coordinates become relative to the parent object’s position, rotation, and scale.

Understanding World Space

World space is the global coordinate system shared by every object in the 3D scene. The origin (0, 0, 0) of world space is the absolute center of the entire virtual universe.

Regardless of how deeply nested an object is within groups or parent objects, its world space coordinates represent its actual, absolute position, rotation, and scale relative to the scene’s root.

The Core Difference: Hierarchy

The fundamental difference between local and world space lies in the parent-child hierarchy:

• Local Space is relative. It defines where an object is in relation to its immediate parent.
• World Space is absolute. It defines where an object is in relation to the scene origin, calculated by combining the local transformations of the object and all of its ancestors.

A Practical Example

Imagine a 3D model of a car: 1. The Car (parent) is placed at world coordinates (10, 0, 0). 2. The Wheel (child) is attached to the car at a local position of (0, 1, 0).

• The Wheel’s local position is (0, 1, 0) because it is 1 unit above the center of the car.
• The Wheel’s world position is (10, 1, 0) because Three.js combines the car’s position (10, 0, 0) and the wheel’s local position (0, 1, 0).

If you rotate the car, the wheel’s local position remains (0, 1, 0), but its world position changes as it orbits around the turning car.

Coordinate Conversion in Three.js

Three.js provides built-in methods to easily convert vectors between these two coordinate spaces.

1. Get the Absolute World Position

To find where an object is in the global scene, use getWorldPosition():

const worldVector = new THREE.Vector3();
myObject.getWorldPosition(worldVector);
console.log(worldVector); // Outputs the absolute world coordinates

2. Local to World Transformation

To convert a specific point from an object’s local coordinate system into world coordinates, use localToWorld():

const localPoint = new THREE.Vector3(0, 1, 0);
myObject.localToWorld(localPoint); 
// localPoint is now mutated to represent the corresponding world coordinates

3. World to Local Transformation

To convert a global world coordinate into an object’s local coordinate system, use worldToLocal():

const worldPoint = new THREE.Vector3(10, 5, 0);
myObject.worldToLocal(worldPoint);
// worldPoint is now mutated to show where that point lies relative to myObject