Four points and the three axes
Red is x, green is y, blue is z. Orange balls are the four points. Open the scene tree to see the four meshes named A to D.
Every 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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write code that puts a small ball at each corner of a square on the floor, 2 units on a side, centred on the origin. Print each corner.
Write a helper isUsable(position) that returns false for NaN, infinite or absurdly large (over 1e6) values.
Explain it without notes
Explain the right-handed coordinate system three.js uses, and what changes if a model comes from a left-handed tool.
A mesh vanishes after you set its position from a calculation. List what you check, in order.
Console
Nothing logged yet.Expected console output
A = (1, 0, 0)
B = (0, 1.5, 0)
C = (0, 0, 2)
D = (1, 1, -2)
x cross y = (0, 0, 1)