Getting Started: Here’s Where the Real Fun Begins!

Welcome to Discover three.js!

This book is a complete introductory tutorial series designed to get you up to speed with three.js quickly while also giving you a thorough grounding in the technical language and concepts you’ll need to go deeper in your own explorations of three.js and computer graphics.

Like all great artists, we’ll start with a blank <canvas>, and over the following chapters, we’ll gradually add to it until we’ve created a small but powerful three.js application featuring lights, textures, materials, and camera controls. In the last couple of chapters of this section, we’ll show you how to load 3D models like the birds in the scene above and even use how to use the three.js animation system.

We’ll introduce lots of new concepts, theory, and jargon in this section, but don’t worry if it’s a lot to take in. Our goal here is to quickly introduce a whole new world of information to you, then we’ll come back to everything in later sections. Here, we’ll introduce concepts with just enough detail to allow you to start thinking about them and using them, without sacrificing any technical accuracy. Once you’re comfortable with the basics, later chapters in the book will fill in the missing details.

You’ll find this especially important if you’re coming to three.js from a background as a web developer, or even if you’re starting your entire software development career here. Working with three.js means working at the intersection of computer graphics and web development, and no matter what your background is, you’re likely to come across at least a few concepts that are new to you. Displaying 3D graphics in the browser ties together a lot of different fields. We’ll need to use HTML, CSS, JavaScript, a little bit of math, lots of computer graphics, and, of course, the three.js API. Thankfully three.js does an amazing job of hiding all this complexity from you until you need it. To keep things clean, technical details of JavaScript and the browser API have been relegated to the appendices so we can focus on three.js and computer graphics in the main text. Whenever we encounter a new feature JavaScript or browser feature we’ll direct you to the relevant section in the appendix.

Let’s dive straight in. Soon you’ll be using crazy sounding things like quaternions, transformation matrices, and buffer geometries with barely a second glance.