Home Syllabus Calendar Resources

CSC 240: Computer Graphics

Lab 7: Spinning Pyramid

in-class

In this lab we will see how to create an animation loop in WebGL and use transformation functions to move our objects. For this lab, continue working with your random partner from Lab 6. Homework 6 will build on these two labs.

Step 0: Finish Lab 6

If you have not done so already, finish Lab 6 to a point where you can see the pyramid. Use this code as a starting point for Lab 7. You are welcome to use the solution for Lab 6 online, but make sure it works on your machine (change the path to wherever you put three.min.js).

Step 1: Create the rendering loop

First, instead of our usual rendering function, we will use a rendering loop like the one shown below:

function render() {
    requestAnimationFrame( render );

    // things that change go here

    renderer.render(scene, camera);
}

This will create a animation loop that will render the scene over and over again, with changes along the way.

Step 2: Make the pyramid a global variable

Now, so that we can change the position of the pyramid in the rendering loop, make the declaration of the pyramid variable global at the top of your code (with the camera, scene, etc). The initialization of the pyramid should still be where it was before. This will allow us to change attributes of the pyramid inside the rendering loop.

Step 3: Rotate the pyramid

Inside the rendering loop, change the rotation of the pyramid along the x-axis, as shown below:

pyramid.rotation.x += 0.1;

Test this out to see the animation! Now change the "x" to "y", and try it again. Are the results what you expected? Now try "z". Which of these 3 axes have we been rotating around in 2D?

Step 4: Rotate the camera

Instead of rotating the pyramid, we could also rotate the camera (eye) to show a different perspective of the scene. Repeat Step 3 with the camera instead of the pyramid. Make sure the results make sense.

Step 5: Extras

If you finish early, try translating the pyramid or the camera by changing the position.x (or .y or .z) of each object. This can give the effect of the observer (camera) moving closer or further from the scene in different directions. You could also add a plane ("ground") to the scene, using the instructions in Part 3 of HW 6.

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.