Programming 3D Applications with HTML5 and WebGL

Chapter 11. Developing a 3D Environment

The techniques explored in Chapter 10 cover a lot of use cases. A single 3D model as the centerpiece of interactive content can be used to market, sell, inform, and entertain. But many 3D applications need more. If we want to develop an immersive game, an architectural walkthrough, or an interactive training system, we will need to learn how to create 3D environments, with multiple objects and more complex types of interaction.

In this chapter, we will develop a 3D environment with realistic scenery, moving objects, and the ability for the user to navigate within the scene by interactively controlling the camera. Extending the theme we developed in Chapter 10, we are going to create a virtual city and take the Futurgo concept car for a test drive. Figure 11-1 shows the application.

Figure 11-1. The Futurgo concept car in a 3D environment

The Futurgo LTD waits parked on a city street, ready for a test drive. The scene spans a few city blocks, with skyscrapers looming in the distance against a dusky sky, reflected in the office buildings nearby. Using the mouse, you can click and drag to look up, down, left, and right. Move forward, back, left, and right using the arrow keys on your keyboard. Walk up to the Futurgo, and click on it to jump inside and take it for a spin. This world may look a little foreboding—but we’ll be safe inside our own personal ...