Workbook 6, Page 4: Primitive Objects and Basic Transformations

Workbook 6, Page 4: Primitive Objects and Basic Transformations

Box 1: Objects

Objects in THREE are subclasses of Object3D. This same base class is used for all the things we put into the world: lights, camera, the actual "things" we see.

The nice part of this is that all objects get the same common functionality.

The main kind of "thing" we'll put in the world is a Mesh. A Mesh basically is a collection of triangles (in the form of a Geometry object).

To make a Mesh, we first need to create a Geometry object, and then we can create a Mesh by pairing it with a Material. THREE has many different kinds of Geometry objects built in (such as Boxes, Circles, Cones, Spheres, ...). Look at the Documentation for the list. We can also make our own Geometry by defining the triangles in the correct way. We'll do that later in the class.

Box 2: Transformations

Objects in 3D have associated transformations as part of the Object3D class. You can read about it here.

Each object has its own transformation. The transformation is between the coordinate system of the parent object (so everything is relative). If we place the object in the world, (by adding it to the Scene), the transformation is relative to the world coordinate system.

Each object has a matrix inside of it that stores its transformation. We can access that matrix. However, we usually don't change the matrix directly: the matrix is computed as needed from the 3 transformations applied to the object: Translate, Scale, and Rotate.

One slightly confusing thing: objects have both "transformation" functions (that apply transformations to the current transformation) as well as the ability to set the position and/or rotation to a particular value. If you use a translate command, the position gets updated - and the way it is updated is affected by the current rotation. Or, you can just set the position to a particular value.

In this example (see box2 in 4-Objects.js), the purple cube is first rotated by 45 degrees, and then its position is set (to have X=2). The position given is the position the object gets. The red cube is also rotated 45 degree, and then undergoes a translateX which causes it to be moved by 2 units along the X axis. But since the X axis was rotated, the motion is along this direction. The translateX (and its counterparts) all translate in the current coordinate system of the object.

The ability to either set positions and orientations or apply translations and rotations gives a lot of flexibility. Sometimes its easier to describe how you want the object to move, other times its easier to specify where you want it to be.

Box 3: Loading Objects

If we want an object that isn't built in, THREE gives us the ability to load it from a file.

A common file format for 3D models (as collections of triangles) is the obj file format. The THREE loader is part of their "examples" - we include it in the parts of THREE we provide for class, but the documentation isn't very complete.

The trick with loading an object is that it may take time. So when we start the loader, we also provide a function that gets called when loading is finished. This function needs to set the object up (put it into the scene, position and scale it, ...). Here's an example (see box3):

The relevant code:

    let loader = new T.OBJLoader();
    loader.load('OBJ/astronaut.obj', function(astronaut)
            // note that we have to render 
            renderer.render(scene, camera);

Notice that this code creates a loader, and then asks the loader to load the file OBJ/Astronaut.obj. In this call it passes another (anonymous) function that will be called when loading is complete. This function is passed the loaded object. Note how the function positions the object (setting its position), scales it, and places it into the scene. We didn't have to rotate the object since it was already oriented the right way. Also, notice that we have to do the render to draw the object after the object is loaded.

Box: Exercise 4: Stacking Boxes

In the 4-Objects-ex.js file, there is a scene that has 5 boxes. Change the positions of the boxes so they are a stack (with the smaller boxes on top of the bigger boxes). Pay attention to both the initial sizes of the boxes and their scaling. The result should be a stack of 5 boxes on top of the ground (each box on top of the next larger box).

Now that we have objects, let's discuss the cameras and lights on Page 5.