Programming 3D Applications with HTML5 and WebGL

Chapter 9. 3D Engines and Frameworks

Three.js is a fantastic library. It turns a Herculean task—rendering complex 3D content in WebGL—into one manageable by mere mortals. Without a library like Three.js, a WebGL developer would be facing months of programming to get all those pixels on the screen. But for all its graphics power, Three.js is limited. It takes care of the drawing, and that’s about it. For everything else, you are on your own.

Let’s say you want to build a shopping application that allows the user to configure a custom car before buying. A web page displays a 3D model of a car; the user can click on various parts of the car to change colors and styles; and at the touch of a button, the view animates smoothly from the exterior to the inside of the car. Using only Three.js, you would potentially have to write hundreds of lines of code to build this application. The raw toolbox is there, but it is not factored into a set of high-level reusable components. Three.js was designed to be a scene graph and rendering library, but there is more to 3D application development than drawing pictures.

The car configurator scenario involves common 3D programming chores: loading a model, accessing individual parts of the model by name or id, triggering a behavior when a part is clicked, and changing camera views. These design patterns are prevalent in games, virtual worlds, architectural walkthroughs, educational titles, and training simulations—basically most types of 3D applications. ...