Phase 2 · part: Top tube
Just Enough 3D Math
Points, arrows, dot and cross products, coordinate spaces, matrices and rotations: only the maths three.js needs, shown first, counted second, written as a formula last.
This phase is the maths you need for 3D, and no more. It is written for people who do not love maths. Every idea starts with a picture you can look at or a figure you can drag. Then real numbers, printed by three.js's own Vector3, Matrix4, Quaternion and Euler classes while you watch. The formula comes last, if at all.
You meet points and arrows (vectors), the dot product (do two directions agree?) and the cross product (which way is at right angles?), the five coordinate spaces a point passes through on its way to your screen, matrices as recipes for moving between spaces, and rotations: why angles can lock up and what a quaternion does about it.
At the end you use all of it for real. You write tubeBetween(from, to, radius, name), a function that puts a cylinder between any two points, and use it to place the down tube and the top tube of the Lumen bike. The frame starts to look like a frame.
Phase 2 · the brief from Lumen
Kofi, frontend engineer at Lumen Bikes
“I can place a box. But the frame tubes are slanted, and every number I try puts them in the wrong place.”
Kofi has the display stand turning, and Phase 1 gave him one slanted down tube with an angle he copied from a page and does not understand. Now Ama wants the top tube, the seat tube and the stays. Each one is a straight tube between two points on a drawing, and each one needs a position, a length and a direction.
Kofi tries guessing rotations. The tube ends up pointing at the ceiling, then at the floor. He needs a way to say "put a tube from here to there" and have it happen. That takes a little maths: what an arrow between two points is, what its length and direction are, and what a rotation really is.
This is that maths, with no more than the showroom needs. By the end of the phase the bike has a src/objects/bike.js with a tubeBetween function, two frame tubes in exactly the right places, and Kofi can read a position, a matrix or a rotation without fear.
At this station
You will learn
- Read x, y, z coordinates and say where a point is, including negative and huge values
- Add, scale, measure and normalise vectors, and use dot and cross products
- Follow a point through local, world, camera, clip and screen space
- Read a matrix and a rotation, and avoid gimbal lock with quaternions
You write code in
In the editor on this page (no install); the build adds to your lumen-3d project
Files you touch
- src/objects/bike.js
- src/main.js
Work order · 7 steps
- 2.1Coordinates and AxesEvery position in a 3D scene is three numbers, x, y and z, measured from one point called the origin. three.js uses a right-handed system with y pointing up, and it will happily accept numbers that are negative, enormous or not numbers at all. 18 min 2 live scenes
- 2.2VectorsA vector is an arrow: a direction and a length. Adding, scaling, measuring and normalising arrows is most of what you do to place and move things, and three.js's Vector3 methods change the vector in place unless you clone it first. 19 min 2 live scenes
- 2.3Dot and Cross ProductThe dot product tells you how much two directions agree: 1 when they match, 0 at a right angle, negative when they oppose. The cross product gives a new direction at right angles to both. Lighting, culling and surface directions all use them. 21 min 2 live scenes
- 2.4Coordinate SpacesA point has different numbers depending on what you measure it from. The same wheel is (1, 0, 0) from its frame and (2, 0, −1) from the world, and the GPU carries it through camera, clip and screen space before a pixel is lit. 21 min 2 live scenes
- 2.5Matrices Without FearA 4 × 4 matrix is a recipe that moves a point from one space to another. Translate, rotate and scale are each one matrix, they combine by multiplying, and the order you combine them in changes the result. 20 min 2 live scenes
- 2.6Rotations: Euler Angles and Quaternionsthree.js turns objects with three angles (Euler angles, in radians) or with a quaternion. Euler angles are easy to read but depend on their order and can lock up; quaternions turn smoothly and never lock. 23 min 3 live scenes
- 2.7Build: Placing the Frame TubesbuildWrite tubeBetween(from, to, radius, name), a function that puts a cylinder exactly between two points, and use it to place the Lumen bike's down tube and top tube. The showroom gets a real frame, and the numbers come from vectors, not from guessing. 22 min 1 live scene
Quality control · 5 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
step that is exactly 0.25 m from the origin along that ray.BeginnerQC-03Mark a wheel's world positionA frame stands at x = 2 and is turned 90° around y. A wheel is its child, at local (1, 0, 0).BeginnerQC-04Aim a pointer at a targetA cone named pointer has its tip along its own +z axis. A ball named target sits at (1.5, 0.4, −2).IntermediateQC-05Write tubeBetween and place the fork tubeFinish the function tubeBetween(from, to, radius, name) so it returns a cylinder mesh whose two ends are exactly the points from and to.Intermediate