Learn Three.js for 3D Computer Graphics/

...

/

Camera Controls in Three.js: TrackballControls

Camera Controls in Three.js: TrackballControls

Learn how to use the TrackballControls in Three.js.

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 ...