Poster first, three.js when seen, stop when not
The first line only sets up this preview's import map; a real app does not write it. three.js is already on this page, so the saving shows in your project's Network panel, not here.
A 3D scene is the heaviest thing on most pages. Show a poster picture first, fetch three.js only when the scene is about to be seen, reserve its space, and stop drawing when it scrolls away.
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.
Write whenVisible(element, start) that calls start once, when the element is within 200 px of the viewport.
Add a CSS rule so a 16:9 canvas slot is reserved at any width.
Explain it without notes
A product page has a 3D viewer below the fold. List four changes that protect LCP, INP and CLS.
Why does import("./main.js") make the page lighter than a normal import?
Console
Nothing logged yet.Expected console output
page ready: poster shown, no scene built yet
visible: fetching three.js now
started: poster hidden: true
scrolled away: loop stopped