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