Let's cover an example covering various camera types:

1. Open the ch04_04_camera-types.html file in your browser. You will see something like the following:

2. Go around the world using the sliders in Tracking mode. Cool, huh?
3. Change the camera type to Orbiting mode and do the same.
4. Check that besides the slider controls, both in Tracking and Orbiting mode, you can use your mouse and keyboard to move around the world.
5. In this exercise, we have implemented a camera using two new classes:
   • Camera: To manipulate the camera.
   • Controls: To connect the camera to the canvas. The canvas will now receive mouse and keyboard events and pass them along to the camera.

6. If you are curious, you can see the source code of these two classes in the common/js directory. We have applied the concepts explained in this chapter to build these two classes.
7. So far, we have seen a cone in the center of the world. As we explore, let's change it to something more interesting. Open the file ch04_04_camera-types.html file in your source code editor.
8. Go to the load function. Let's add the car to the scene. Rewrite the contents of this function to the following:

function load() {
  scene.add(new Floor(2000, 100));
  scene.add(new Axis(2000));
  scene.loadByParts('/common/models/nissan-gtr/part', 178);
}

9. You will see that we've increased the size of the axis and the floor so that we can see them. We need to do this because the car model is a much larger object than the original cone.
10. There are a few steps we need to take in order to see the car correctly. We need to make sure that we have a large enough view volume. Go to the updateTransforms function and update this line:

mat4.perspective(projectionMatrix, 45, canvas.width / canvas.height, 0.1, 1000);

Replace it with this:

mat4.perspective(projectionMatrix, 45, canvas.width / canvas.height, 0.1, 5000);

11. Change the type of camera so that when we load the page, we have an orbiting camera by default. In the configure function, change this line:

camera = new Camera(Camera.TRACKING_TYPE);

Replace it with this:

camera = new Camera(Camera.ORBITING_TYPE);

12. Another thing we must consider is the location of the camera. For a large object such as this car, we need to be farther away from the center of the world. For that purpose, we need to change the home location of camera.goHome from [0, 2, 50] to [0, 25, 300].
13. Let's modify our scene's lighting so that it better fits into the model we are displaying. In the configure function, update the following:

gl.uniform3fv(program.uLightPosition, [0, 120, 120]);
gl.uniform4fv(program.uLightAmbient, [0.2, 0.2, 0.2, 1]);
gl.uniform4fv(program.uLightDiffuse, [1, 1, 1, 1]);

Replace it with this:

gl.uniform4fv(program.uLightAmbient, [0.1, 0.1, 0.1, 1]);
gl.uniform3fv(program.uLightPosition, [0, 0, 2120]);
gl.uniform4fv(program.uLightDiffuse, [0.7, 0.7, 0.7, 1]);

14. Save the file with a different name and then load this new file in your browser. You should see something like the following screenshot:

15. Using the mouse, keyboard, and/or the sliders, explore the new scene.
16. Use orbiting mode to explore the car from different angles.
17. See how the Camera matrix is updated when you move around the scene.
18. You can see what the final exercise looks like by opening the ch04_05_car.html file.

What just happened?

We added mouse and keyboard interaction to our scene. We also experimented with the two basic camera types: tracking and orbiting cameras. Finally, we modified the settings of our scene to visualize a complex model.