matrix, matrixWorld and matrixAutoUpdate
A blue parent at x = −1 carries an orange child at local x = 1.5. The console reports each state of the child's matrices.
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
before any render: child.matrixWorld x = 0.00
after render(): child.matrixWorld x = 0.50 (-1 + 1.5)
frozen, position.x = 3: matrix x = 1.50, world x = 0.50
after updateMatrix(): matrix x = 3.00, world x = 2.00
matrixWorld.elements = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 0, 0, 1]