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`

.

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