Learn Three.js - Third Edition

TrackballControls

Before you can use TrackballControls, you first need to include the correct JavaScript file in your page:

<script type="text/javascript" src="../libs/TrackballControls.js"></script>

With this included, we can create the controls and attach them to the camera, as follows:

var trackballControls = new THREE.TrackballControls(camera); 
trackballControls.rotateSpeed = 1.0; 
trackballControls.zoomSpeed = 1.0; 
trackballControls.panSpeed = 1.0; 

Updating the position of the camera is something we do in the render loop, as follows:

var clock = new THREE.Clock(); 
function render() { 
  var delta = clock.getDelta(); 
  trackballControls.update(delta); 
  requestAnimationFrame(render); 
  webGLRenderer.render(scene, camera); 
}  

In the preceding code ...