Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Camera Controls in Three.js: TrackballControls

Explore how to use TrackballControls in Three.js to enable interactive camera movements such as rotation, zooming, and panning. Understand how to integrate THREE.Clock for smooth updates and customize control properties to enhance 3D scene navigation.

We'll cover the following...

The TrackballControls

Using TrackballControls follows the same approach as for ArcballControls:

Javascript (babel-node-es2024)
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
const controls = new TrackballControls(camera, renderer.domElement)
const clock = new THREE.Clock()

This time, we just need to pass in the camera and domeElement properties from the renderer. For the TrackballControls to work, we also need to add a THREE.Clock and update the render loop, like so:

Javascript (babel-node-es2024)
const clock = new THREE.Clock()
function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    controls.update(clock.getDelta())
}

In the preceding code snippet, we can see a new Three.js object, THREE.Clock (line 1). The THREE.Clock object can be used to calculate the elapsed time that a specific ...