Dot and cross product: two arrows
Orange is a, blue is b, white is a × b, drawn with the origin axes. The numbers are printed from the same vectors.
The 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.
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.
A triangle has corners P0 = (0, 0, 0), P1 = (1, 0, 0) and P2 = (0, 1, 0). Compute its normal with three.js and say which way it faces.
Write isInFront(camera, point) that returns true when point is in front of a camera that looks along its own forward direction.
Explain it without notes
A light shines from direction L onto a surface with normal N. How does the brightness depend on them, and why is it clamped at 0?
Why do a.cross(b) and b.cross(a) give different answers, and when is the result the zero vector?
Console
Nothing logged yet.Expected console output
a . b = 2
angle between a and b = 56.31 degrees
same thing from the dot product: 56.31
a x b = (0, 0, 3)
b x a = (0, 0, -3) (swap the order and it flips)
a . (a x b) = 0, b . (a x b) = 0