Measuring, centring and a stale box
The blue outline is the world-space box of the turned shape. Read the console for the three boxes: before, stale and recomputed.
UV coordinates say where each vertex sits on a picture, so a flat image can wrap a 3D shape. Bounding boxes and spheres say how big and where a shape is, so you can centre it, fit the camera to it and let three.js skip it when it is off screen.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a UV set that tiles the picture 3 times across a square. Which numbers go in, and what must the texture's wrap mode be?
Write a function placeOnFloor(mesh) that moves a mesh so its lowest world point is at y = 0.
Explain it without notes
What are u and v, and what happens if a geometry has no uv attribute?
How would you put a loaded model's feet on the floor and its middle on the centre line?
Console
Nothing logged yet.Expected console output
box min: (1.2, 0, 0) max: (1.8, 1, 0.4)
size: (0.6, 1, 0.4) centre: (1.5, 0.5, 0.2)
sphere radius: 0.616
after translate, box min: (-0.3, 0, -0.2)
stale box after editing by hand: (-0.3, 0, -0.2) (0.3, 1, 0.2) <- still the old numbers
after computeBoundingBox(): (-0.3, 0.5, -0.2) (0.3, 1.5, 0.2)
world box, moved and turned: (1.8, 0.5, -0.3) (2.2, 1.5, 0.3)