Please read the standard instructions for all assignments.
This assignment provides practice with setting up and modifying a camera to view a scene from a desired viewpoint. There are two parts. 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.
This pen shows a wireframe barn with a GUI for adjusting several camera parameters: the field of view, eye coordinates, and up coordinates. For this part of the assignment, you should:
I give you the model solution to clarify what I’m looking for. I expect that you will not try to reverse-engineer the solution. I have made it difficult (so you won’t accidentally see the solution), but it would not be impossible. Please don’t try.
This pen shows a scene with a GUI for adjusting several camera parameters: the eye Y and Z coordinates, and the “at” Y coordinate. For this part of the assignment, you should:
Note that the barn in this scene is half the size of the barn in part 1. Here it is 5x5x10, in part 1 it is 10x10x20.
Hint: start from the last view (the closest) and then work backwards. Try to figure out the pattern in the settings, there is one.
Hint 2: the aliasing artifacts (dotted lines appearing on edges) can be useful in figuring out if you are exactly right or not.
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. 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.
You should use
TW.setKeyboardCallback() for both Part 1 and Part 2. This function takes three arguments, like this:
TW.setKeyboardCallback("1", fred, "camera setup 1");
fred, you will omit the parentheses, because you are not invoking
frednow, the system will be invoking it later.
You should set up keyboard callbacks after the canvas exists, which is done by
TW.mainInit(). For more information on the use of keyboard callbacks, see this earlier reading.
Submit the URL to your pen via the dropbox on blackboard. Do not change your code after the deadline.
Grading will be broken down into two parts, basic functionality and style and documentation
|Basic functionality (80%)|
|a good start||50|
|Style and documentation (20%)|
Grading of the basic functionality will be in terms of the following requirements:
This page is based on https://cs.wellesley.edu/~cs307/assignments/hwk3-camera.html. Copyright © Scott D. Anderson. This work is licensed under a Creative Commons License.