In this lab we will begin 3D graphics using WebGL and the Three.js library. I recommend setting up a multiplayer repl as you work on this.
Credit: the code for this lab is originally based on the MeshFaceMaterial.html example in our textbook (Introduction to Computer Graphics by David J. Eck). It has been updated for the current version of Three.js.
Download Three.js
Begin by forking a copy of the lab 6 starter code. Notice that three.min.js is already included for you. The code will not run as written without errors, since there are unfinished pieces left for you to fill in.
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().
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, which is also where the pyramid will be. So we want to pull the camera back far enough that it has a view of the object, but not so far that it will be distant and tiny. The near and far clipping planes should be set so that they include the origin between them, or our object won't be visible. If you're stuck on what values to choose, review the discussion of camera parameters from the video.
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);
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 y-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
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
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 their face orientation.
Finishing Up
You do not have to turn this lab in. When you are satisfied that your pyramid is complete, you can fork a new copy of the code and try creating a shape of your own design. You can also read Homework 6 which will continue the concepts in this lab.