Barn Demo

This file has the minimal code to create a working Three.js application, using the TW object to set up the camera for us. Because the canvas does not take the entire window, there is space for some ordinary HTML like this.

Code

Here is the code that produced the program above:

As you can see, it's very short. The TW.camera() function does the work of setting up a useful default camera for you, so that you can look at your scene from all sides. All you have to do is give it a general idea of where your scene is, using the {} object with properties like minx.

Barn Code

Now, we need to understand the barn, at least a little. Here is the code for TW.createBarn():

The code creates a THREE.Geometry object, which is a collection vertices and faces. Each face is a triangle built from three of the vertices, specifying the vertex just as index into the list of vertices.

Each face, of course, has two sides, just like a coin. One of these is the front and the other is the back. The (default) technical definition of the front is the side where the vertices are in counter-clockwise order. Here, face is defined from the front, and the front is the outside of the barn.

Each face also has an associated vector that is perpendicular to the face, which mathematicians and computer graphics people call the normal vector. We'll learn that these are crucial in lighting computations.

Each vertex also has an associated vector which is the average of the normal vectors of all the incident faces. These can also be used in lighting computations.

The last two lines of this function compute these sets of vectors.