GET READY TO DISCOVER three.js! 

Hello and welcome to Discover three.js!

This book will teach you everything that you need to know to be able to create stunning 3D web applications using three.js, in no time at all. Together, we’ll work through a series of small apps and cases studies until we’ve reached a solid understanding of how to create amazing 3D applications using the three.js WebGL framework.

If you want to know how to leverage the power of your graphics card to create websites that really stand out - whether it be for product displays, data visualization, music videos, advertising, gaming, or anything else - there is no other library today that combines the power, breadth of features, amazing community and ease of use that three.js does.

Using WebGL means that you have access to far more power than is possible using traditional HTML and CSS. Of course, this power does come at the cost of increased complexity, and that’s where three.js comes in. The three.js library does an amazing job of hiding the complexity of WebGL while still providing access to the raw power of your graphics card, making the task of displaying complex animated 3D scenes that run right in your web browser a breeze.

If you need some inspiration to get started, have a look at the threejs.org frontpage which features a regularly updated collection of cutting-edge work from around the web. Virtual Art Sessions and Paperplanes.world are a couple of personal favorites - and of course, while three.js specializes in 3D, it’s equally good at 2D, as this lovelyShort Trip by Alexander Perrin demonstrates.

Of course, there’s always some people who will abuse the power that they have been given…

You should use this book alongside the official documentation and you’ll be referred there regularly. Also, the best resources for understanding what three.js is capable of, once you are a little familiar with the library, are theofficial examples, and the three.js source code. Go through the examples and get to know the source code in depth, you won’t regret it.

Over the rest of this introduction, we’ll cover everything that you need to know in order to get a three.js app up an running, including a couple of basic tutorials on HTML, CSS, and JavaScript in case you are new to web development.

Section One is a complete standalone three.js tutorial series which will introduce to all the basic concepts you need to know to get a 3D scene running in your browsers, such as how to create objects, lights, and cameras and how to apply simple materials and textures to our creations, as well as how to work with the Scene, how toGroup objects, how to set up our canvas to resize automatically if the browser window size changes, and how to set up camera controls. We’ll even do some basic animation, and we’ll end the section by taking a look at how to load complex animated models created in a separate modeling program.

Moving on, in Section Two, we’ll dive deep into the world of JavaScript and create a fully fledged professional quality application that we can reuse in any situation to create production-ready three.js apps of any size. In this section, we’ll switch to using modern JavaScript techniques such as modules, classes and async/await, and we’ll show you how to bundle your modular JavaScript using popular bundling tools such as Parcel, Rollup, and WebPack and how to compile your JavaScript using Babel so that it will work in older browsers. Finally, we’ll create boilerplate applications that you can use as starting points for popular front end frameworks such as React, Vue, and Angular.

From Section Three onwards, we’ll get deep into the working of three.js, and explore all the wonderful ways this amazing framework allows us to create beautiful 3D scenes, including physically correct materials and lighting, skeletal animation, morph targets, sprites, particle systems, a full animation mixing desk, audio, and much, much more!

Are you ready? Let’s get started!

Let’s get started!

PreviousNext