diff --git a/05/index.html b/05/index.html index c3aebfac..8ee77f4c 100644 --- a/05/index.html +++ b/05/index.html @@ -32,9 +32,7 @@ let pane; let stats; - // - // SETTINGS and HELPER for TWEAKPANE - // + window['SCENE'] = { 'anaglyph': false, 'poly': null, @@ -66,20 +64,20 @@ rotationQuaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI); // 180 degrees around Y axis window.onload = function() { - // Scene setup + // Scene scene = new THREE.Scene(); - // Setup Tweakpane + // tweakpane pane = new Pane(); var sceneui = pane.addFolder({ title: 'Scene', expanded: true }); - // Add scene controls + // scene controls sceneui.addBinding(window.SCENE, 'anaglyph'); - // Lights setup + // lights const ambientLight = new THREE.AmbientLight(0x404040, 1.0); // soft white light scene.add(ambientLight); @@ -87,7 +85,7 @@ directionalLight.position.set(5, 5, 5); scene.add(directionalLight); - // Add light controls + // light controls sceneui.addBinding(directionalLight.position, 'x', {min:-100, max:100, label:'Light X'}); sceneui.addBinding(directionalLight.position, 'y', {min:-100, max:100, label:'Light Y'}); sceneui.addBinding(directionalLight.position, 'z', {min:-100, max:100, label:'Light Z'}); @@ -96,28 +94,27 @@ sceneui.addBinding(ambientLight.color, 'g', {min:0, max:1, label:'Ambient G'}); sceneui.addBinding(ambientLight.color, 'b', {min:0, max:1, label:'Ambient B'}); - // Camera setup + // camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 10, 20); camera.lookAt(0, 0, 0); - // Renderer setup + // renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); - // Setup controls + // controls controls = new OrbitControls(camera, renderer.domElement); - // Anaglyph effect setup + // anaglyph effect = new AnaglyphEffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); - // Setup Stats.js widget stats = new Stats(); document.body.appendChild(stats.domElement); - // Load unedited PolyCam model + // unedited PolyCam model loader = new GLTFLoader(); loader.load('poly.glb', function(gltf) { scene.add(gltf.scene); @@ -127,31 +124,26 @@ poly.scale.y = 10; poly.scale.z = 10; - // Reset rotation with identity quaternion poly.quaternion.w = 1; poly.quaternion.x = 0; poly.quaternion.y = 0; poly.quaternion.z = 0; - // Store the poly mesh in our helper window.SCENE.poly = poly; - // Add PolyCam Mesh controls var polyui = pane.addFolder({ title: 'PolyCam Mesh', expanded: true }); - // Add wireframe toggle polyui.addBinding(window.SCENE.poly.material, 'wireframe'); - // Add rotation button polyui.addButton({title:'rotate!'}).on('click', () => { window.SCENE.do_rotate_poly(); }); }); - // Load edited Blender model + // edited Blender model loader.load('carAssignment5.glb', function(gltf) { scene.add(gltf.scene); @@ -160,48 +152,38 @@ blender.scale.y = 10; blender.scale.z = 10; - // Reset rotation with identity quaternion blender.quaternion.w = 1; blender.quaternion.x = 0; blender.quaternion.y = 0; blender.quaternion.z = 0; - // Store the blender mesh in our helper window.SCENE.blender = blender; - // Create and setup normal helper var helper = new VertexNormalsHelper(blender, 0.1, 'blue'); helper.visible = false; scene.add(helper); window.SCENE.blender_helper = helper; - // Add Blender Mesh controls var blenderui = pane.addFolder({ title: 'Blender Mesh', expanded: true }); - - // Add normal helper toggle + blenderui.addBinding(helper, 'visible', {label:'Show normals!'}); - - // Add material change button + blenderui.addButton({title:'Change Material!'}).on('click', () => { window.SCENE.change_material(); }); - // Add rotation button blenderui.addButton({title:'rotate!'}).on('click', () => { window.SCENE.do_rotate_blender(); }); - // Move it to the right blender.translateX(10); }); - - // Handle window resizing + window.addEventListener('resize', onWindowResize, false); - - // Start animation loop + animate(); }; @@ -215,11 +197,9 @@ function animate() { requestAnimationFrame(animate); controls.update(); - - // Update stats + stats.update(); - - // Handle poly mesh rotation + if (window.SCENE.poly) { if (window.SCENE.rotate_poly) { window.SCENE.poly.quaternion.slerp(rotationQuaternion, 0.01); @@ -228,14 +208,12 @@ } } - // Handle blender mesh rotation if (window.SCENE.blender) { if (window.SCENE.rotate_blender) { window.SCENE.blender.quaternion.slerp(rotationQuaternion, 0.01); } else { window.SCENE.blender.quaternion.slerp(identityQuaternion, 0.01); } - // Update normal helper if it exists if (window.SCENE.blender_helper) { window.SCENE.blender_helper.update(); }