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.