3D Math Fundamentals

0. Introduction

This course covers the foundational mathematical concepts you need for successful Three.js development, including

• Coordinate Systems
• Trigonometry
• Vectors
• Reference Frames
• Transformations
• Linear Interpolation

Each topic is presented with clear explanations and practical demonstrations in interactive Three.js examples, making complex mathematical principles accessible for developers with high school-level math knowledge. Perfect for anyone wanting to understand the mathematical foundation that powers 3D web applications without getting overwhelmed by advanced concepts.

1. Coordinate Systems

Coordinate systems allow us to measure positions in space. They form the foundation for how we measure and manipulate objects in 3D space.

A one-dimensional (1D) coordinate system is simply a line with an origin (0) where positive values extend in one direction and negative values in the opposite. For instance, if a purple ball is at position -5 on this line, you know exactly where to find it: 5 units to the left of the origin.

Moving to two dimensions (2D), we add a vertical Y-axis to our horizontal X-axis. Now positions are represented as (x,y) coordinates. If our ball is at position (-2,1), it's 2 units left and 1 unit up from the origin. This system works just like a computer screen, where each pixel has specific x and y coordinates.

The three-dimensional (3D) system adds depth with a Z-axis (forward/backward). Now any position can be represented as (x,y,z) coordinates. For example, a ball at (3,2,-2) is 3 units right, 2 units up, and 2 units backward from the origin. This is called a Cartesian coordinate system.

// Create a cube at (3, 1, -2)

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
);

cube.position.set(3, 1, -2);
scene.add(cube);