CSC 240: Computer Graphics

Lab 6: Pyramid in WebGL

in-class

In this lab we will begin 3D graphics using WebGL and the Three.js library. For this lab, use pair programming with your random partner (i.e. use one person's computer, then email the code to the other person afterward).

Credit: the code for this lab is based on the MeshFaceMaterial.html example in our textbook (Introduction to Computer Graphics by David J. Eck).

Step 0: Download Three.js

First, download the "minified" version of Three.js, available from Three.js github (scroll down to the "Usage section" and click on "minified library", then save this file to somewhere reasonable within your CSC240 folder). Then download lab6.html and make sure the relative path to this library is correct.

Investigate the structure of this code. What three JavaScript functions are written? This will be a typical setup in WebGL. Which variables are defined as globals? Two of these variables are initialized in the init() function. Which ones? scene is also initialized at the beginning of createWorld().

Step 1: Set up the Camera

The first thing we will do is set up the camera, using the structure of the code below. Also look up the camera documentation by searching for PerspectiveCamera at the Three.js documentation. Use this documentation frequently throughout the rest of this course. 

camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = z_pos;
Decide on the values for fov, aspect, near, far, and z_pos. The fov means "field of view", and this is an angle in degrees. The aspect is the aspect ratio (i.e. width/height). Use canvas.width and canvas.height to set this value. The near and far values are the z-coordinates of the clipping frustum (they are positive, but denote negative z-values). By default, the camera is at the origin. Usually we want to pull it back a bit so it's not so close to our scene (which is often centered around the origin).

Step 2: Set up the Lights

Now we will set up lighting. We will talk about lighting later, but for now we will simply use the code below as is to light our scene. Without lighting, nothing will be visible! 

// dim light shining from above
scene.add( new THREE.DirectionalLight( 0xffffff, 0.4 ) );

// a light to shine in the direction the camera faces
var viewpointLight = new THREE.DirectionalLight( 0xffffff, 0.8 );  
viewpointLight.position.set(0,0,1);  // shines down the z-axis
scene.add(viewpointLight);

Step 3: Vertices of the Pyramid

Now we will actually create a 3D object. Here we will create a pyramid, with a square base and triangular sides. Let the base be a 2x2 square centered at the origin, in the xz plane. Define these four vertices. Then define the top vertex to be on the z-axis at the point y=1. An example of how to create a 3D point is shown below: 


var point = new THREE.Vector3(1, 1, -1); // vertex in 3D

Step 4: Faces of the Pyramid

After defining the vertices of the pyramid, we can use them to build up the faces. Each face is actually a triangle, so the bottom of the pyramid will be made up of two faces. For each face, use the indices of the vertices to define it. Also make sure that the order of the vertices will cause the face normal to point outwards (use the right-hand rule). An example is shown below: 

var face = new THREE.Face3(0, 1, 2); // triangular face with vertices 0,1, and 2

Step 5: View the Pyramid!

The next part of the code sets up a color for each face of the pyramid, using "matte" materials instead of "shiny" materials. We will talk more about materials and texture mapping later on. Finally, create the pyramid, using both the geometry and the materials, and add it to the scene: 

var pyramid = new THREE.Mesh( pyramidGeom, pyramidFaceMaterial );
//pyramid.rotation.set(theta_x,theta_y,theta_z);    
scene.add(pyramid);
Test our your code to view the pyramid. What do you see? It probably doesn't look 3D. Try rotating about the x-axis first by uncommenting the rotation line (in radians). What does this look like? Also add a rotation about the y-axis, and then the z-axis. Try to view the pyramid from every angle to make sure it looks right. If you are missing some faces, double check the face orientation.

Finish Up

You do not have to turn this lab in, but make sure both you and your pair programming partner have a copy by the end of the lab. Homework 6 will continue the concepts in this lab.