CS460 Fall 2022 Assignment 9
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
CS460 Fall 2022
Assignment 9: Geometry, Materials, and Lighting!
We will load our favorite mesh from a file, try out different materials, and play around with light settings.
Starter code for assignment 9. After pulling from upstream, there is the folder 09 in your fork. If you run a webserver and access the file, you will see a sad single armadillo in the scene.
Part 1 (14 points): The armadillo needs a friend! Please load a second mesh from a file using a THREE.js loader. This could be any mesh you find online in any format THREE.js supports - or you could load the armadillo again. Please modify the positions so that the meshes do not overlap.
Part 2 (15 points): Please configure the second mesh from above with a different material of your choice (not Mesh- ToonMaterial again!).
Part 3 (10 points): Please add two point light sources to the scene.
Part 4 (15 points): The starter code includes the following snippet to control the color and position of the directional light.
var directionalFolder = gui.addFolder('Directional Light'); directionalFolder.addColor(controller, 'color').onChange( function(value) {
directionalLight.color.setHex(value);
});
directionalFolder.add(directionalLight.position, 'x', -100, 100);
directionalFolder.add(directionalLight.position, 'y', -100, 100);
directionalFolder.add(directionalLight.position, 'z', -100, 100); directionalFolder.open();
Please setup dat.GUI to control position and color of the two point lights with similar code.
Part 5 (15 points): Please setup dat.GUI to control the color of both materials.
Part 6 (20 points): Please play around with the lights and try to understand why the toon material seems to work
*sometimes*. What are your observations?
YOUR_OBSERVATIONS
Part 9 (1 points): Please update the screenshot above with your own and then post the github pages url here:
YOUR_GITHUB_PAGES_URL
Part 10 (10 points): Choose a final project—either an existing one from https://cs460.org/assignments/final/ or a new one. Please list the project here and in the link. If working as a team, assemble your team and list the team members below and in the link.
YOUR_FINAL_PROJECT_CHOICE
Bonus (33 points):
Part 1 (11 points): Please add dat.GUI elements that allow to switch the material for the two meshes. Here is an example of a combobox in dat.GUI:
// Choose from accepted values
gui.add(controller, 'material', [ 'toon', 'standard', 'phong' ] ).onChange( function(value) {
if (value == 'phong') {
// TODO
}
});
Part 2 (22 points): Please make adding lights to the scene dynamic: Add dat.GUI buttons to add new directional lights that then also add a dat.GUI folder to the menu that allows to control (color and position), and remove the light.
2022-11-23