Exploring and Interacting - Game Development with Three.js - page 37

Next, we'll instantiate the controls variable and the clock variable in
setupThreeJS() :
clock = new THREE.Clock();
controls = new THREE.FirstPersonControls(camera);
controls.movementSpeed = 100;
controls.lookSpeed = 0.1;
A clock is a timer. We'll use it in this case to keep track of the amount of time that
passes between each frame we draw. Also note that we changed the speed at which
the camera moves and looks; otherwise, it feels very sluggish.
Finally, we'll change our animation loop in the setup() function to update
our controller:
requestAnimationFrame(function animate() {
renderer.render(scene, camera);
controls.update(clock.getDelta());
requestAnimationFrame(animate);
});
Updating the controls allows the camera to move when each frame is rendered. The
clock's getDelta method returns the amount of time in seconds since the last time
the getDelta method was called, so in this case it returns the number of seconds
since the last frame was rendered. Internally, the controls use that delta to make sure
that the animation is smooth over time. Now we can fly around our city!
You can see in the following screenshot what the city might look like from the ground:
Flying around the city