Book Image

Learning Three.js: The JavaScript 3D Library for WebGL

By : Jos Dirksen
Book Image

Learning Three.js: The JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

<p>Three.js is a JavaScript 3D library that offers a wide range of features for creating and displaying stunning 3D computer graphics on a web browser in an intuitive manner using JavaScript without having to deal with the complexity of a WebGL low-level API. Even though WebGL makes it possible to create 3D graphics in the browser without having to use plugins, programming WebGL, however, is hard and complex. This book shows you how Three.js allows you to be independent of browser plugins.</p> <p>If you are an experienced web designer who wants to set the tone for an immersive design environment in your applications then this book is for you.<br /><br />"Learning Three.js: The JavaScript 3D Library for WebGL" is a practical, example-rich book that will help you to master all the features of Three.js. With this book, you’ll learn how to create and animate gorgeous looking 3D scenes directly in your browser utilizing the full potential of WebGL and modern browsers without having to learn WebGL.<br /><br />"Learning Three.js: The JavaScript 3D Library for WebGL" starts by going over the basic concepts and building blocks used in Three.js. From there on, it will expand on these subjects using extensive examples and code samples. This will allow you to learn everything you need to know about Three.js in an easy and interactive manner.</p> <p>Besides the basic concepts, this book will show you how you can create realistic looking 3D objects using materials and textures as well as how to load them from externally created models. You’ll learn how to easily control the camera using the Three.js build-in camera controls so you can fly or walk around the 3D scene you have created. You will also learn how to use morph and bones-based animation and how to add physics to your scene.</p> <p>After reading Learning Three.js: The JavaScript 3D Library for WebGL and playing around with the extensive set of examples, you’ll know everything that is required to create 3D animating graphics using Three.js that run in any browser.</p>
Table of Contents (20 chapters)
Learning Three.js: The JavaScript 3D Library for WebGL
Credits
About the Author
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
8
Creating and Loading Advanced Meshes and Geometries
Index

Getting the source code


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 you can get the sources for yourself:

  • Clone the Git-based repository

  • Download and extract the archive

In the following sections, we'll explore these options in more detail.

Using Git to clone the repository

Git is an open source distributed Version Control System that I have used to create and version all the examples in this book. For this I've used GitHub, a free, online Git-based repository. You can browse this repository by following this link: 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 directory learning-three.js will now contain all the examples that are used throughout this book.

Downloading and extracting the archive

If you don't want to use Git to download the sources directly from GitHub, you can also download an archive. Go to the URL https://github.com/josdirksen/learning-threejs and click on the download link as shown in the following screenshot:

Extract this to a directory of your choice, and you'll have all the examples available.

Testing the examples

Now that you've downloaded or cloned the source code, let's do a quick check to see if 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 the examples. You can either open the extracted or cloned directory in a browser directly and run a specific example, or you can install a local web server. The 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 that the external resources are loaded correctly. In the following section, we will discuss a couple of different ways you can set up a simple local web server for testing.

Setting up a local web server is very easy, depending on what you've already got installed. We will list a couple of examples on how to do this.

Python-based approach should work on most Unix/Mac systems

Most Unix/Linux/Mac systems already have Python installed in them. 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 have checked out/downloaded the source code.

NPM-based approach if you've got Node.js installed

If you've already done some work with Node.js, there is a good chance that you've got NPM installed. With NPM you've got two simple options to set up a quick local web server for testing. The first one uses the HTTP Server module:

 > 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:

> 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 the directory listings, whereas the first approach does.

Portable version of Mongoose for Mac/Windows

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 the following URL: https://code.google.com/p/mongoose/downloads/list. On the Windows platform, copy the downloaded file to the directory containing the examples and double-click on it to start a web browser showing the contents of 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.

By just clicking on a chapter, we can show and access all the examples for that 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.

At this point you should have an editor installed and have access to all the sources. Now it is time to start creating our first Three.js scene.