Camera Controls in Three.js 3D WebGL

So far, our camera has been locked in place. In a 3D world, the user expects to be able to look around, zoom, and explore — a static viewpoint feels closer to a screenshot than an actual 3D experience.

Making a camera interactive means responding to mouse or touch input by adjusting its position and rotation every frame, while still respecting the same Scene/Camera/Renderer pipeline you've already learned. Controls don't replace the camera; they simply drive it based on user input.

You could write complex math using mouse events to move the camera, but Three.js provides built-in 'Controls' classes to do this for you, saving you from reimplementing trigonometry that's already been solved and battle-tested.

OrbitControls is the most commonly used of these — it's shipped as an official Three.js example add-on rather than part of the core library, which is why it's imported from a separate 'examples/jsm/controls' path instead of the main three package.

OrbitControls allow you to left-click and drag to rotate, right-click and drag to pan, and scroll to zoom. It orbits around a 'target' point (which is [0,0,0] by default) rather than rotating the camera in place around its own axis.

This target-based orbiting is what makes it feel natural for inspecting an object: the camera always stays pointed at the target as it moves, so dragging never accidentally spins the view away from what you're looking at. You can move the target itself if you want the orbit to center on a different point in the scene.

If you enable 'damping' (smooth inertia), you MUST call controls.update() inside your animation loop, otherwise it won't work — damping simulates momentum by gradually easing the camera toward its target position across multiple frames instead of snapping instantly.

This is one of the most common OrbitControls gotchas in vanilla Three.js: enabling enableDamping without also calling update() every frame results in controls that appear completely frozen, since the eased movement never actually gets applied without that per-frame recalculation.

If you set controls.enableDamping = true to get smooth, buttery camera movements, calling controls.update() each frame is what recalculates the camera's eased position based on however much 'inertia' remains from the last drag or scroll input.

Even without damping enabled, it's good practice to call controls.update() every frame anyway — some other OrbitControls features (like auto-rotation) also depend on this per-frame recalculation, so making it a habitual part of your render loop avoids subtle bugs later when you enable those features.

In React Three Fiber, this is hilariously easy. You just import OrbitControls from @react-three/drei and drop it in your Canvas — no manual instantiation, no renderer.domElement plumbing, and no manual controls.update() call needed.

drei's OrbitControls component wires all of that up internally, including the per-frame update() call, damping defaults, and disposal when the component unmounts. This is a good example of how drei exists specifically to wrap common vanilla Three.js add-ons into zero-boilerplate React components.

Try it out! Click and drag on the 3D preview below to rotate the camera around the torus knot. Scroll to zoom in and out — this hands-on feedback loop is exactly what OrbitControls is built to provide with almost no setup code.

The makeDefault prop used here tells R3F to register this specific controls instance as the scene's default controls, which matters if other components (like transform gizmos) need to know which controls to temporarily disable during their own interactions.

Notice that we passed autoRotate to the OrbitControls. This automatically spins the camera around the object slowly, which looks incredibly premium for product showcases — it keeps the scene visually alive even when no one is actively interacting with it.

autoRotate typically pauses automatically the moment the user starts dragging, and resumes after they let go, which is why it feels natural rather than fighting against user input. autoRotateSpeed controls how fast that idle rotation spins.

You can also restrict the controls. For example, stopping the user from zooming too far in or panning the camera under the floor — unrestricted OrbitControls can let users clip through geometry or lose the object entirely.

minDistance and maxDistance bound how far the camera can zoom in or out, while maxPolarAngle limits vertical rotation (Math.PI / 2 stops the camera from dropping below a horizontal 'ground level' view). These constraints are essential for product showcases and architectural walkthroughs where certain angles would break the illusion or reveal unfinished geometry.

Awesome! You've given the user agency in your 3D world. They can now look at your masterpieces from any angle, with sensible boundaries keeping the experience polished rather than breakable.

From here, the same interaction patterns extend to more specialized control schemes — FirstPersonControls for walkthroughs, PointerLockControls for FPS-style games, or fully custom drag handlers when you need behavior OrbitControls doesn't cover out of the box.

So far, our camera has been locked in place. In a 3D world, the user expects to be able to look around, zoom, and explore.

You could write complex math using mouse events to move the camera, but Three.js provides built-in 'Controls' to do this for you.

Which Three.js add-on class allows the user to orbit (rotate) the camera around a specific target using the mouse?

• →MouseControls
• →OrbitControls
• →CameraControls

OrbitControls allow you to left-click and drag to rotate, right-click and drag to pan, and scroll to zoom. It orbits around a 'target' (which is [0,0,0] by default).

If you enable 'damping' (smooth inertia), you MUST call controls.update() inside your animation loop, otherwise it won't work.

If you set controls.enableDamping = true to get smooth, buttery camera movements, what must you do in your render loop?

• →Call controls.update()
• →Call renderer.clear()
• →Nothing, it's automatic

In React Three Fiber, this is hilariously easy. You just import <OrbitControls /> from @react-three/drei and drop it in your Canvas.

Try it out! Click and drag on the 3D preview below to rotate the camera around the torus knot. Scroll to zoom in and out.

Notice that we passed autoRotate to the OrbitControls. This automatically spins the camera around the object slowly, which looks incredibly premium for product showcases.

Which prop on the R3F <OrbitControls> component makes the camera slowly spin around the target automatically without user input?

• →spin
• →autoRotate
• →animate

You can also restrict the controls. For example, stopping the user from zooming too far in or panning the camera under the floor.

Awesome! You've given the user agency in your 3D world. They can now look at your masterpieces from any angle.