All the code for this book can be accessed from GitHub (https://github.com/). GitHub is an online Git-based repository that you can use to store, access, and version source code. There are a couple of ways that you can get the sources for yourself:
Clone the Git repository
Download and extract the archive
In the following two paragraphs, we'll explore these options in a bit more detail.
Git is an open source distributed version control system that I used to create and version all the examples in this book. For this, I used GitHub, a free, online Git repository. You can browse this repository by https://github.com/josdirksen/learning-threejs.
To get all the examples, you can clone this repository using the
git command-line tool. To do this, you first need to download a Git client for your operating system. For most modern operating systems, a client can be downloaded from http://git-scm.com, or you can use the one provided by GitHub itself (for Mac and Windows). After installing Git, you can use this to get a clone of this book's repository. Open a command prompt and go to the directory where you want to download the sources. In that directory, run the following command:
# git clone https://github.com/josdirksen/learning-threejs
This will start downloading all the examples, as shown in the following screenshot:
The learning-three.js directory will now contain all the examples that are used throughout this book.
If you don't want to use Git to download the sources directly from GitHub, you can also download an archive. Open https://github.com/josdirksen/learning-threejs in a browser and click on the Download ZIP button on the right-hand side, as follows:
Extract this to a directory of your choice, and you'll have all the examples available.
Now that you've downloaded or cloned the source code, let's do a quick check to see whether everything is working and make you familiar with the directory structure. The code and examples are organized per chapter. There are two different ways of viewing examples. You can either open the extracted or cloned folder in a browser directly and look at and run a specific example, or you can install a local web server. This first approach will work for most of the basic examples, but when we start loading external resources, such as models or texture images, just opening the HTML file isn't enough. In this case, we need a local web server to make sure the external resources are loaded correctly. In the following section, we explain a couple of different ways you can set up a simple local web server for testing. If you can't set up a local web server but use Chrome or Firefox, we also provide an explanation on how to disable certain security features so that you can even test without a local web server.
Setting up a local web server is very easy depending on what you've already got installed. In here, we list a couple of examples on how to do this. There are many different ways to do this depending on what you've already got installed on your system.
Most Unix/Linux/Mac systems already have Python installed. On those systems, you can very easily start a local web server:
> python -m SimpleHTTPServer Serving HTTP on 0.0.0.0 port 8000 ...
Do this in the directory where you checked out / downloaded the source code.
If you've already done some work with Node.js, there is good chance you've got npm installed. With npm, you have two simple options to set up a quick local web server for testing. The first options uses the http-server module, as follows:
> npm install -g http-server > http-server Starting up http-server, serving ./ on port: 8080 Hit CTRL-C to stop the server
Alternatively, you can also use the simple-http-server option, as follows:
> npm install -g simple-http-server > nserver simple-http-server Now Serving: /Users/jos/git/Physijs at http://localhost:8000/
A disadvantage of this second approach, however, is that it doesn't automatically show directory listings, whereas the first approach does.
If you haven't got Python or npm installed, there is a simple, portable web server, named Mongoose, that you can use. First, download the binaries for your specific platform from https://code.google.com/p/mongoose/downloads/list. If you are using Windows, copy it to the directory containing the examples and double-click on the executable to start a web browser serving the directory it is started in.
For other operating systems, you must also copy the executable to the target directory, but instead of double-clicking on the executable, you have to launch it from the command line. In both cases, a local web server will be started on port 8080. The following screenshot encapsulates the discussion in this paragraph:
By just clicking on a chapter, we can show and access all the examples for that specific chapter. If I discuss an example in this book, I'll refer to the specific name and folder so that you can directly test and play around with the code.
If you use Chrome to run the examples, there is a way to disable some security settings so that you can use Chrome to view the examples without requiring a web server. To do this, you have to start Chrome in the following way:
For Windows, you call the following:
chrome.exe --disable-web-securityOn Linux, do the following:
google-chrome --disable-web-securityAnd on Mac OS, you disable the settings by starting Chrome like this:
open -a Google\ Chrome --args --disable-web-security
When you start Chrome this way, you can access all the examples directly from the local filesystem.
For Firefox users, we need to take a couple of different steps. Open Firefox and, in the URL bar, type about:config. This is what you'll see:
On this screen, click on the I'll be careful, I promise! button. This will show you all the available properties you can use to fine-tune Firefox. In the search box on this screen, type in security.fileuri.strict_origin_policy and change its value to false just as we did in the following screenshot:
At this point, you can also use Firefox to directly run the examples provided in this book.
Now that you've either got a web server installed, or disabled the necessary security settings, it is time to start creating our first Three.js scene.