Translate, rotate, scale and order
No picture is needed: this example is the numbers. Each matrix is printed row by row; the point (1, 0, 0) is sent through each.
A 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.
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.
Build a matrix that scales by 2, turns 90° around z, and moves by (1, 0, 0), using compose, and apply it to the point (1, 0, 0). Predict the result first.
Show with code that multiplyMatrices(a, b) and multiplyMatrices(b, a) can differ, for a a move and b a 90° turn.
Explain it without notes
Why does the order of translate and rotate matter, and in what order does three.js build an object's matrix?
A child's world position is wrong right after you move its parent. Give two possible reasons and how to check each.
Console
Nothing logged yet.Expected console output
translate by (2, 0, 0):
[ 1 0 0 2 ]
[ 0 1 0 0 ]
[ 0 0 1 0 ]
[ 0 0 0 1 ]
rotate 90 degrees around y:
[ 0 0 1 0 ]
[ 0 1 0 0 ]
[ -1 0 0 0 ]
[ 0 0 0 1 ]
move: 3, 0, 0
turn: 0, 0, -1
grow: 2, 0, 0
turn, then move: 2, 0, -1
move, then turn: 0, 0, -3
compose(move, turn, grow) of (1, 0, 0): 2, 0, -2