CS 307 Hwk 3: Camera
This assignment provides practice with setting up and modifying a camera
to view a scene from a desired viewpoint. There are two parts involving programming
and a third part with some math exercises. None of the programs should use
TW.setupCamera(); you need to set up your own camera using Three.js.
(A consequence of this is that the mouse doesn't work for either program, because
this was set up by
TW.setupCamera() in past examples.) You will also
implement keyboard callbacks for each of the two programming parts.
Setting up and Modifying a Camera
We've discussed setting up a camera. To modify a camera, you could
delete it from the scene, create a new one, and render using the new
one. Or, you could modify the old one. Modifying just requires one extra
step, calling the
camera.position.set(eyex,eyey,eyez); camera.up.set(upx,upy,upz); camera.fov = fov; camera.lookAt(new THREE.Vector3(atx,aty,atz)); // do this last camera.updateProjectionMatrix(); // then add this line render();
render() function must be defined, as described in the
Part 1, Setups
Here's the goal:
When viewing this page, type any of the keys numbered 1 to 5, and a new
view of the barn will appear. For this part of the assignment, use the wire barn
constructed with the
TW.createWireBarn() function defined in
(this makes the projection easier to see). You should create a barn that
is 10 units wide, 10 units high and 20 units deep, with the reference
point (lower left front corner) at the origin. This is marked in white on
the wire barn.
I want you to try to duplicate my camera shape and location as closely as possible. In other words, try to analyze how things are projecting to see if you can reverse-engineer to set up a similar camera. This will help you when you are trying to achieve a particular look in your own scenes.
I'll make you some guarantees: all my numbers are nice integers, or simple calculations from nice integers. So if you get close, you'll likely be exactly on. I also didn't modify the aspect ratio, and the distance to the near and far planes are such that everything is visible. You only have to worry about the FOVY (field of view in the Y direction) and the arguments to position the camera.
The FOVY may change from scene to scene!
As noted earlier, my program defines the following keyboard callbacks and scenes; yours must too (i.e. you should determine what the camera settings are when you enter each of the integers from 1 to 5, and try to duplicate this as closely as possible in your own code).
- 3 Note, this one is tricky. Look at the definition of the
TW.createWireBarn()function to find out the coordinates of the "shoulders" of the barn.
Plan to use
TW.createWireBarn(10,10,20) to make your barn
and add it to the scene. That's pretty much it for
Note that in the demo above, the text at the top of the page changes as
different keys are typed. The HTML element for this text has an
statement like this:
document.getElementById('slidename').innerHTML = "Slide 1";
Implement this as
hwk3-barnviews.html and place it in your
Part 2, Flythrough
Here's the goal:
The idea is that you'll create N frames of an animation of a plane landing near the barn. I used a field of view of 90 degrees. Here I used N=10, assigned to keys 0-9, but if you find a pattern, you'll see that you can easily generate as many frames as you like.
You should use the following scene as
a starter scene. Feel free to copy
the JS code to a
hwk3.js file; I did in my solution, but this
is not required.
Implement this as
hwk3-flythrough.html in your
Please read the standard instructions for all assignments
You should plan to use
TW.setKeyboardCallback() for both
Part 1 and Part 2. This function takes three arguments, like
TW.setKeyboardCallback("1", fred, "camera setup 1");
- The first argument is a one-character string that defines the key you want to bind.
- The second argument is a function object. The system will invoke
that function when the key is pressed. Remember that if you give the
name of a function, like
fred, you will omit the parentheses, because you are not invoking
frednow, the system will be invoking it later.
- The third argument is the documentation string that is displayed
if the user presses the question mark key (
?) to show the available keyboard callbacks.
- There is an optional fourth argument that is a boolean that indicates whether to set this callback in a master list of shared callbacks, or set it in a local list just for this canvas. The default is false, which is just for this canvas, which is what you'll want for this assignment.
You should set up keyboard callbacks after the canvas exists, which is
TW.mainInit(). For more information on the use of
keyboard callbacks, see this
Please do the problems in this PDF file: math3.pdf
These can be handed in on paper in class or under my office door. If you email it to me as a document, please save it as a PDF with your name both in the filename and in the document.