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.


Here is the code that produced the program above:

As you can see, it’s very short. The TW.cameraSetup() 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 generic THREE.Geometry object, which is a collection of vertices and faces. Two attributes defined for every THREE.Geometry object are arrays named vertices and faces. The vertices array stores THREE.Vector3 objects that each hold the (x,y,z) coordinates for a single vertex. Each call to the push() method adds a new vertex onto the end of the array. You can think of the indices of the array as the numerical labels of the vertices. The faces array stores THREE.Face3 objects that represent a triangle built from three vertices, using the corresponding indices of the vertices array to specify which vertices to use. Each call to the push() method adds a new face onto the end of the faces array.

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, each face is defined from the front, and we use the convention that the front of each face corresponds to 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 faces that contain the vertex. These can also be used in lighting computations.

The last two lines of this function, one of which is commented out, compute these sets of vectors.


Source (C) Scott D. Anderson. This work is licensed under a Creative Commons BY-NC-SA License