Learning Three.js

or WebGL for Dummies

Three.js Installation

Three.js is a 3D library in javascript. According to mrdoob, its author, three.js is

The aim of the project is to create a lightweight 3D engine with a very low level of
complexity — in other words, for dummies. The engine can render using canvas, svg and WebGL.

mrdoob tree.js Author

Step 1: get the source

The source are available here. Use the following command

how to get the source - example.sh
git clone https://github.com/mrdoob/three.js.git

It will provide the whole source on your local disk. You are done, just point a web server on it, and go in /examples.

Step 2: Description of the folder structure

  • /utils it is a bunch of utilities (see here). You can find the script to build the releases (concatenate the files, minify them, all that).
  • /build It is an administrative directory where the build release is stored. Not really important for a user, it is more for a developper of the library itself.
  • /src It is the library code in itself. We will study that in more details later. Meanwhile dont hesitate to go look: it is rather small and clean.
  • /examples It is a list of all the examples. They kinda are the documentation of three.js, try them. They are the meat, if you like something, just do view-source:
    • some of them are for <canvas> rendering, most of them are for WebGL. Three.js is able to render 3D scene on canvas, Dom, SVG and obviously WebGL (with various level of support). See here for details.
    • Some are focused on geometry i.e. the shape of the objects. See here , here and here
    • Some are focused on the material i.e. kindof the colors and the texture of the objects. See here, here and here.
    • Others are focused on light, there are different type of light sources. See here, here and here
    • Some are focused on collisions. See here, here and here.

Point a web server on three.js source tree and go in /examples to try them. It is fun!