Preface

Each year, web browsers become more powerful, increase in features, and improve in performance. Throughout the last couple of years, browsers have emerged as a great platform to create immersive, complex, and beautiful applications. Most of the current applications that are being built use modern HTML5 features such as web sockets, local storage, and advanced CSS techniques for styling.

Most modern browsers, however, also have support for a technology that can be used to create beautiful, 3D graphics and animations that use the GPU to achieve maximal performance. This technology is called WebGL and is supported by the latest versions of Firefox, Chrome, Safari, and Internet Explorer. With WebGL, you can create 3D scenes that run directly in your browser, without the need for any plugins. Support on the desktop for this standard is great, and most modern devices and mobile browsers fully support this standard.

To create WebGL applications, however, you need to learn a new language (called GLSL) and understand how vertex and fragment shaders can be used to render your 3D geometries. Luckily, though, there are a number of JavaScript libraries available that wrap the WebGL internals and provide a JavaScript API that you can use without having to understand the most complex features of WebGL. One of the most mature and feature-rich of those libraries is Three.js.

Three.js started in 2010 and provides a large number of easy-to-use APIs that expose all the features of Three.js and allows you to quickly create complex 3D scenes and animations in your browser.

Through its APIs, you can do pretty much everything that you want with Three.js. However, because it has so many features, it's sometimes difficult to find the right way to accomplish something. Throughout the years, Three.js has been under heavy development, but it is stabilizing now. So many examples and tutorials that you find online are outdated and don't work anymore. In this book, we'll provide you with a large number of recipes that you can follow to accomplish some common tasks with Three.js. Each example is accompanied with a runnable example that you can examine to better understand the recipe or adapt for your own purposes.