Arrows: add, scale, length, normalise
Orange is a, blue is b, white is a + b. The second blue arrow starts at the tip of a: tip to tail, it ends at the same place as a + b. The last two lines show the in-place trap.
A 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.
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 midpoint(a, b) that returns a new Vector3 halfway between two points without changing either.
Write distance(a, b) using only sub and length, then check it against a.distanceTo(b).
Explain it without notes
How do you compute the length, direction and midpoint of a tube whose ends are two Vector3 points?
A friend's code calls position.add(offset) and then finds the original position changed. Explain, and give two ways to avoid it.
Console
Nothing logged yet.Expected console output
a = 2, 1, 0 length 2.236
a + b = 3, 3, 0
a * 0.5 = 1, 0.5, 0
a normalised = 0.894, 0.447, 0.000 length 0.9999999999999999
after c.add(...): c = 2, 1, 1, and d === c is true