Sliders, axes and a grid
Use the panel: drag x, change the height, turn spin to 0 and back. Both helpers are objects in the scene, so they are in the draw call count.
Sliders, axes, grids and counters let you see a scene instead of guessing. You use lil-gui to tweak values live, axes and grid helpers to read directions, renderer.info to count the GPU's work, and meet the three.js editor, DevTools and Spector.js.
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.
Add a Box3Helper or BoxHelper around the cube in the first example. How does it change the child count?
Write a loop line that shows the draw call count in the page title every frame.
Explain it without notes
Your slider moves but the object does not. Give two possible causes.
What do info.render.calls and info.memory.geometries tell you, and why can the first be larger than the second?
Console
Nothing logged yet.Expected console output
controls in the panel: 5
helpers are objects too: scene holds 5 children (2 lights, 2 helpers, 1 cube)