Loading and Working with Textures, and Preparing Textures for Use in Your Scenes9.1

Adding Realism with Environment Maps9.2

MeshStandardMaterial and the Metal/Rough Workflow9.3

MeshPhongMaterial and the Specular Workflow9.4

Bump, Normal, and Displacement Maps9.5

Two Ways of Approaching Transparency9.6

Emissive, Light, and Ambient Occlusion Maps9.7

Understanding Geometry10

Basic Geometry Concepts: Vertices, Normals and UVs10.1

Creating A Custom Geometry10.2

Points, Particles Systems, and Sprites11

Particle Systems11.1

Introducing Sprites11.2

Lines, Shapes, and Text12

Throwing Shapes: Recreating the 2D Canvas API in 3D 12.1

Text in 3D: The FontLoader and TextBufferGeometry12.2

Rendering Your Scenes with WebGL13

The WebGLRenderer in Depth13.1

Rendering Offscreen to a WebGLRendererTarget13.2

Animating Your Scenes14

Unraveling the Animation System14.1

Introducing Morph Targets14.2

Bones, Skinning, and Skeletal Animation14.3

Post-Processing, Shaders, and Effects15

Adding Post-Processing To A Scene15.1

Anti-Aliasing A Post-Processed Scene15.2

A Big List of all the Post Effects (currently) Available in three.js15.3

Sound in a 3-Dimensional World16

The WebAudio API16.1

Positional Sound16.1

References and Resources

HOW TO INCLUDE three.js IN YOUR PROJECTS

There are quite a few different ways to include three.js in your JavaScript application, some of them simple, some of them a little more complex, however, they all boil down to one simple idea: you need to include one (and only one) of these three files in your project:

Each of these files a version of the three.js core, meaning that once you’ve included one of them in your application, you are all ready to get started in creating beautiful 3D scenes.

There are two main ways to include these files in your project:

include them in a script tag in your HTML

import them directly into your JavaScript files. We’ll explore how to do in Section Two

What’s the Difference Between these Files?

The three.js file is intended to be included in a <script> tag in your index.html file, like so:

<!-- index.html --><scriptsrc="path/to/three.js"></script>

Note that the path above is relative to your HTML file - so if index.html is in C:/My_Websites, then the three.js file would have to be in C:/My_Websites/path/to for the above to work.

The three.min.js file is identical to three.js except that it has been compressed and had all the helpful commentary stripped out, to make it faster to download over the internet. The idea is that you’ll use the three.js file while you’re developing your application, and then switch to three.min.js once you uploaded it onto a website so that it will run as fast as possible.

The final file, three.module.js, has the core of three.js as a JavaScript Module, meaning that you can import it directly into your JavaScript file using:

// app.js
import*asTHREEfrom'three.module.js';

Approach 1: Download Them All!

The simplest thing do is just download the entire three.js project onto your computer and use the files from there.

Approach 2: Link to the files from a CDN

Alternatively, you can link the files from a CDN (Content Delivery Network), which is a remote site dedicated to hosting files so that you can use them in a website.

In fact, you can even use the threejs.org site as a CDN! You can link the three.js file using this link: https://threejs.org/build/three.js, and include it in your HTML like this:

<scriptsrc="https://threejs.org/build/three.js"></script>

However, this will always load the latest version of three.js. That’s fine for testing and experimenting, but don’t use this for production apps as they will probably stop working after a couple of months as new versions get released.