What the controls take from the page
The WheelEvent is sent by the code itself. In a real page the same applies to a person's wheel, and the touch-action line decides what a finger does.
OrbitControls lets a visitor orbit, zoom and (optionally) pan the camera around a target with mouse, touch or wheel. Left alone it lets the camera go under the floor and through the bike, and it takes over touch scrolling, so you set limits and know what it claims.
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 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the controls so the bike can only turn sideways (no tilt), between 1 m and 4 m away, with no panning.
Print a line each time the user starts and stops moving the camera.
Explain it without notes
A visitor on a phone says the page will not scroll when the finger is on the 3D view. What causes it and what are two fixes?
Why can a camera end up under the floor with default OrbitControls, and what one setting prevents it?
Console
Nothing logged yet.Expected console output
before the controls: touch-action = "" | wheel scrolls the page: yes
controls made: touch-action = "none" | wheel scrolls the page: no (the controls took it)
enableZoom = false: touch-action = "none" | wheel scrolls the page: yes
pan-y set by us: touch-action = "pan-y" | wheel scrolls the page: no (the controls took it)
after dispose(): touch-action = "" | wheel scrolls the page: yes