HOW TO INCLUDE three.js IN YOUR PROJECTS
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:
- include them in a script tag in your HTML
What’s the Difference Between these Files?
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.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.
// 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:
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:
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.
npm install three --save
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!