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 onlyone) of these three files in your project:

• three.js
• three.min.js
• three.module.js

You can view them all on the three.js GitHub repo, which we’ll explore in the next chapter.

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:

1. include them in a script tag in your HTML
2. 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 -->

<script src="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.jsfile 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 * as THREE from '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.

You can download the entire latest release of three.js as a zip file. Once you’ve downloaded it, open it up and look inside the /build folder, you’ll find the three scripts 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:

<script src="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.

Instead, you can use one of these websites:

• cdnjs.com
• www.jsdelivr.com

Approach 3: Install three.js as an NPM package

Note: we’ll assume that you have a basic understanding of how Node.js package management works here. If you don’t, don’t worry about this section for now.

three.js is also available as a package on NPM. This means that if you have Node.js and NPM set up on your computer, then you can start open a command prompt and type:

npm install three --save

Then, you can import three.js from the three.module.js file into your JavaScript file by referring to the threepackage:

import * as THREE from 'three';

Of course, if you prefer to use Yarn as a package manager instead of NPM then you can do that too, instead of the npm install command you’ll use:

yarn add three

And that’s it! With three.js included in your app, you’re ready to get started!