three.js ON GITHUB - WHERE THE MAGIC HAPPENS!
Everything officially related to the three.js project is kept in one huge repository on Github. It is maintained by the original creator of three.js, @mrdoob (AKA Ricardo Cabello), along with an army of open-source aficionados.
There’s a lot to see here, and it may seem confusing at first. Luckily we only need to look inside a couple of folders for now, though. Go ahead and open the repo if you want to take a look now, or feel to skip ahead and come back later if you prefer.
Linking to Files in the Repo from Your App
You can directly reference files from the repo using the form https://threejs.org/build/three.js in your app.
Don’t link directly to the file using github.com though, it won’t work!
The build/ Folder
Contained in this folder are just three files, each of which contains the core of three.js, which you’ll refer to by
THREE in your apps. You only ever need to include one of these files.
three.js - this file contains the core
THREEcode, for use in a
<script>tag. This means you can load three.js by putting
<script src="https://threejs.org/build/three.js"></script>in the
<head>section of your HTML document.
- three.min.js. This is the same file but in a compressed format, with all the comments removed and names replaced with short versions. Your webpage will load faster if you use this since the file size is smaller, however, any error messages you get in the browser console will likely be garbled. Generally, you want to use three.js while developing your app, and then switch to three.min.js when you release it.
- three.module.js was added more recently - it’s the same as three.js, but is intended to be used with a module bundling tool such as WebPack or Rollup, or with an up to date browser that supports importing modules directly. Skip this for now if none of that made sense to you - we’ll come back to it later.
The examples/ Folder
We’ll be exploring this folder in Section 11: Extras, since there are a lot of useful goodies contained here, such as:
- source code for the official examples
- plugins in the examples/js folder (also known by the community as examples, confusingly)
fonts for use with the
- models in many different formats
- loaders to help you load models created in other applications
- … and lots more. Everything you need to learn how to use three.js is here - except for this book!
You can view live versions of the examples here. You should definitely make sure that you are familiar with these and whenever you are working to understand a new feature of three.js, check the examples to see if there is one that covers it and go over the corresponding source code.
Everything in this folder is covered by the same MIT license as three.js, which means that you are free to use anything in your own projects, in any way that you like.
The src/ Folder
The uncompiled three.js source files are all contained here, in the src/ folder. While you are learning to use three.js you won’t need to look in here that often, but as you become more proficient you will start to need to know how the actual three.js code is implemented. To make things easier, every docs page has a direct link to the relevant file in the src/ folder.
There are a couple of other folders in addition to the ones mentioned above. We won’t be covering them further in this book, but you may find their contents useful:
- docs/: All the files related to the official documentation and tutorials are here, although you’ll probably find the live version easier to read!
- editor/: The three.js community maintains an editor. If you want to look at the code, here it is, although again the live version will probably be more useful.
- test/: three.js unit tests are kept here. Unless you start developing for three.js you don’t need to concern yourself with these.
- utils/: A collections of utilities such as a simple server. This folder is also mainly for use by people developing three.js.