The showroom with the effect chain
The project's changed files joined into one module, because local imports cannot run in the preview, with short stand-ins for the renderer, scene, lights and camera. The pedals are outlined from code, as the picker would do on hover. Look at the status bar: the chain adds draw calls.
The showroom gets an effect chain: the headlight glows (and nothing else does), the part under the pointer gets an outline, and the bike gets its pedals. A button turns the effects off.
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.
Add a second #fx-style toggle that lowers the pixel ratio of the chain to 1 (effects.resize with composer.setPixelRatio(1)).
Change the headlight's price in panel.js to 55.
Explain it without notes
Why does the build keep effects.render and the plain renderer both available?
Why is the bloom selective by brightness rather than by layers here?
Console
Nothing logged yet.Expected console output
bike parts: down-tube, top-tube, seat-tube, chain-stays, seat-stays, fork, front-wheel, rear-wheel, handlebar, crankset, pedals, headlight
effect chain: RenderPass > OutlinePass > UnrealBloomPass > OutputPass
outlined part: pedals
glow round the headlight lens: yes, bloom adds light round the lens