How to Use This Book
This book is a complete introduction to using the web as a platform for creating professional-quality 3D applications using three.js. There are many great tutorials for three.js available, not to mention the huge collection of examples on the three.js website. However, these tutorials and examples introduce three.js piece by piece, using small code snippets. This can be useful but falls short when it comes to creating a real-world, customer-facing application.
In this book, we take a more holistic approach. Here, we demonstrate how to use three.js to create complete, robust, professional-quality applications that follow best practices and simply work across all devices and modern browsers. While doing so, we’ll split the code into small modules, each of which deals with a single aspect of the overall complexity. This means we can show you what a “real” three.js application looks like, while still writing code that is easy to follow.
In this Introduction, we cover everything you need to know before you start. Section One covers everything you need to get a basic 3D scene running in a web browser, including how to create objects, lights, cameras, camera controls, and how to organize and move objects around in your scenes. We’ll end the section by taking a look at how to load complex animated models created in an external program. From Section Two on, we start to cover topics in detail, including materials, textures, geometry, post-processing, 3D audio, the animation system, skeletal animation, morph targets, points and particles, image-based lighting, light probes, color management, asset management, interactivity, and more.
Creating 3D applications that run in a browser falls at the intersection of web development and computer graphics, and by the time you finish this book, you’ll have a deep understanding of both fields. However, here at the very start of the book, we will assume almost zero prior knowledge, and whenever possible, we’ll explain topics and jargon as we come to them. On the rare occasion that introducing a topic would break the flow of a chapter we’ll refer you somewhere else or to another section of this book where you can study it further.
To move objects around in 3D space, we’ll use some concepts from linear algebra, such as vectors and matrices, while 3D space itself is described using a Cartesian coordinate system. However, you might be surprised how little mathematical knowledge you need to use three.js. The library does an amazing job of hiding all the complicated technical details. Until you need them, that is.
If at some point you want to study linear algebra or any other math topic more deeply, Khan Academy is one of the best resources on the web for learning mathematics, and their linear algebra course has everything you need to get through this book.
This book features a custom-built live code editor that you can use to follow along with the code described in the text. This allows us to sidestep the complexities of setting up a web server and concentrate on learning three.js. If you’re viewing this page on a large screen, the editor will open automatically alongside the text, otherwise, click the button on the top left of the navigation bar. Any changes you make to the code will show up right away in the preview window.
Before and After Code Comparison
See the big toggle switch at the top left of the editor? Go ahead and give it a try. Most chapters start with a partially completed example for you to work from, and also let you insta-complete™ the code with a single flick of this toggle. You can switch back and forth between the complete and initial states, and make changes to both separately.
Working on your own Machine
Working on your own computer is referred to as working locally in web dev land. If you prefer to do this rather than using the editor, you can download the files as a zip file using the button. This zip file will contain the files currently displayed. In other words, if the comparison toggle is to the right, you’ll get the completed code, and if it’s to the left, you’ll get the starting code, in both cases along with any changes you’ve made.
If you are working locally, once we come to loading textures and 3D models in 1.5: Transformations and Coordinate Systems and 1.13: Load 3D Models in glTF Format you’ll need to set up a local development server. The reason for this is that web browsers have security restrictions to prevent malicious websites from loading files directly from your computer’s file system. Check out the How to Run Things Locally in the three.js docs for more information on this topic.
Official Documentation and Source Code
You should use this book alongside the official three.js documentation and the official examples, and you will be referred to each of these frequently. Once you’re more familiar with the library, you’ll also find the three.js source code and the source code for the plugins useful in furthering your understanding.