CSC 240: Computer Graphics
Homework 6: Walking in 3D
Due: Tuesday, Nov. 8, 11:59pm on Moodle
For the animation part, it will be helpful to start after the lab on Wednesday, but the first steps can be started at any time.
For this assignment, you are welcome to work with a partner if you use proper pair-programming techniques (work on the code only together, on one computer, switching the "driver" every 30 minutes). If you choose this option, turn in your code under ONE partners name, and clearly state the names in the pair as a comment at the top of your code.
1) Pyramid function
Begin with the code from Lab 6 or Lab 7 that creates a pyramid. The first step is to put the creation of this pyramid inside a function. This function will take in three values (cx,cy,cz), which will be the coordinates of the center of the bottom face of the pyramid, and a value for the height (distance from this point to the top point).
function pyramid(cx,cy,cz,height) {...}
This function should add a pyramid to the scene (it does not necessarily need to return anything). You could add an argument for the size of the base of the pyramid, or you could scale the base proportional to the height. You could also add an argument for the color of the pyramid.
2) A world of pyramids
Using your pyramid function, create several pyramids in a loop, using the Math.random() function to determine their positions and size. And example is shown below, and also more information about how to adjust the raw output of the random number generator:
var r = Math.random(); // returns a number in [0,1)
Test our your method to make sure it is working correctly. It's okay if the pyramids overlap.
3) Create the ground
To make this world more realistic, we will create a plane, and then change the y-coordinates of all the pyramids to sit on the plane. In Three.js, there is a built-in function for creating a plane, which works like this:
// arguments are width along the x-axis, then width along y-axis
var geometry = new THREE.PlaneGeometry( 5, 5 );
var material = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide});
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
The important thing to keep in mind is that this plane is created in the xy plane, so it's like a piece of paper laying on the chalk board. To use it here, we will need to rotate it so that it is "flat" on the ground. What angle should we use? Which axis should we rotate it about?
Test out some different camera positions (especially moving the camera "up" a bit) to make sure your plane is working. Then change the y-coordinates of the pyramids to sit on the plane, and make sure that all the pyramids are on the plane. For now, we'll consider a finite plane which will define the world. An example image is shown below, although the boundaries of your plane might not be visible from every camera angle.
4) Walking around
Animation: now for the animation. Using a rendering loop similar to the one below (see Lab 7), move the camera around the scene to simulate a person walking around your world.
function render() {
requestAnimationFrame( render );
// things that change go here
renderer.render(scene, camera);
}
Specifically, use both rotate and translate to make the observer move randomly (generally their y-coordinate/height won't change too much; they'll be moving around the xz plane). It's okay if the observer walks through some pyramids. Think about how to position and move the camera to achieve this random movement effect. This loop should run continuously, although it's up to you whether or not the observer stops and pauses sometimes.
5) Extensions
Please choose one extension below.
- Something besides pyramids.
Instead of walking around pyramids, change your shapes to something else (trees, skyscrapers, etc). Or you could do a combination of objects.
- Something in the sky. Create another function to create something for the sky (clouds, birds, stars, etc). Randomly add these to your scene as well.
- Edge of the world. Right now, it's possible to wander off into an area with no objects, or even off the plane. Modify your code such that the camera/person always stays on the plane.
Submit
Submit your html file and a representative screenshot of your world (if you worked in a pair, only one person needs to submit).