Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 7.3 — OrbitControls
3D Web · Example 1 of 2

OrbitControls with limits

Drag, scroll or pinch to try it. The two lines come from a test that pushes both setups as hard as a user could. dollyOut(100) shrinks the distance, and rotateUp(-2) drags the camera downwards.

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.

01

Make the controls so the bike can only turn sideways (no tilt), between 1 m and 4 m away, with no panning.

02

Print a line each time the user starts and stops moving the camera.

Explain it without notes

01

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?

02

Why can a camera end up under the floor with default OrbitControls, and what one setting prevents it?

OrbitControls with limits
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

default limits: camera height -2.60 m; closest distance 0.03 m
with limits   : camera height 0.64 m; closest distance 0.80 m