Add files via upload

bostongfx · NandaniMavani · Sep 20, 2022 · Sep 20, 2022 · Sep 20, 2022 · Sep 27, 2022
commit 871846afd0aa3c5e59da30407997788b47f0e209
diff --git a/CS460_Assignment_06.pdf b/CS460_Assignment_06.pdf
diff --git a/board.jpg b/board.jpg
diff --git a/index.html b/index.html
@@ -1,151 +1,131 @@
 <html>
   <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
-
+    <meta charset="UTF-8" />
     <style>
       html, body { 
-        background-color: #000;
+        background-color:#000;
         margin: 0;
         padding: 0;
         height: 100%;
         overflow: hidden !important;  
-      }
-
-      #r1 {
-        width: 50%;
-        height: 100%;
-        float: left;
-      }
 
-      #r2 {
-        width: 50%;
-        height: 100%;
-        float: left;
+        background-image: url(sky.jpg);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
       }
     </style>
 
-    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
-    <script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>
     <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
     <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
-
-
-    <script type="text/javascript">
-
-      var r, c;
+    <script src="https://threejs.org/examples/js/effects/AnaglyphEffect.js" type="text/javascript"></script>
+    <script src="robot.js"></script>
+    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js" type="text/javascript"></script>
+    <script>
+
+      var scene, camera, renderer, ambientLight, light, controls;
+      var floor;
+      var controller = {
+        anaglyph: false
+      };
+      // create robot at x,y,z coordinates
+      var r = new Robot(0, -5, 0);
+      var pixel_coords, vp_coords, vp_coords_near, raycaster, intersects;
       window.onload = function() {
 
-        r = new X.renderer3D();
-        r.container = 'r1'; 
-        r.init();
-
-        c = new X.cube();
-        r.add(c);
-        r.render();
-        r2 = document.getElementById('r2'); 
         scene = new THREE.Scene();
-        camera = new THREE.PerspectiveCamera( 75, r2.clientWidth / r2.clientHeight, 1, 10000 );
-        camera.position.set( 0, 0, 100 );
-
-        renderer = new THREE.WebGLRenderer({antialias: true});
-        renderer.setSize( r2.clientWidth, r2.clientHeight );
-        r2.appendChild( renderer.domElement );
 
-        ambientLight = new THREE.AmbientLight( 0x404040 );
+        var fov = 60;
+        var ratio = window.innerWidth / window.innerHeight;
+        var zNear = 1;
+        var zFar = 10000;
+        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
+        camera.position.set( 0, 0, 500);
+
+        renderer = new THREE.WebGLRenderer({ alpha: true });
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        document.body.appendChild( renderer.domElement );
+
+        ambientLight = new THREE.AmbientLight();
         scene.add( ambientLight );
 
         light = new THREE.DirectionalLight( 0xffffff, 5.0 );
         light.position.set( 10, 100, 10 );
         scene.add( light );
 
-        var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
-        var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
-        cube = new THREE.Mesh( geometry, material );
-
-        scene.add( cube );
+        var floorTexture = new THREE.TextureLoader().load( 'board.jpg' );
+        var floorGeometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+        var floorMaterial = new THREE.MeshBasicMaterial( {
+          map: floorTexture,
+          side: THREE.DoubleSide
+        } );
+        floor = new THREE.Mesh( floorGeometry, floorMaterial );
+        floor.position.y = -100;
+        floor.rotateX(-30);
+        scene.add( floor );
 
-        controls = new THREE.TrackballControls( camera, renderer.domElement );
+        // placing the robot with clickshift ( same as assignment 3)
 
-        animate();
-
-        function addXTK(){
-          c2 = new X.cube();
-          c2.center = [50,50,50];
-          r.add(c2);
-          r.render;
-        }
-
-        function addThreeJS(){
-          geometry = new THREE.BoxBufferGeometry(3, 3, 3);
-          material = new THREE.MeshStandardMaterial({ color: 0xffffff });
-          cube2 = new THREE.Mesh( geometry, material);
-          cube2.position.set(50,50,50);
-          scene.add(cube2);
-        }
-
-        controller = {
-          'add new' : function(){
-            addXTK(); 
-            addThreeJS(); 
-          },
-
-          'threejs_color': 0xffffff,
-
-          'rotateX': function() {
-            c.transform.rotateX(20);
-            cube.rotateX(20); 
-          },
-
-          'rotateY': function() {
-            c.transform.rotateY(20);
-            cube.rotateY(20);
-          },
-
-          'rotateZ': function() {
-            c.transform.rotateZ(20);
-            cube.rotateZ(20);
+        window.onclick = function(e) {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            return false;
           }
-        }
-
+          pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
+          vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
+                                        -( pixel_coords.y / window.innerHeight ) * 2 + 1);
+          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);
+          raycaster = new THREE.Raycaster();
+          raycaster.setFromCamera(vp_coords_near, camera);
+          intersects = raycaster.intersectObject( floor );
+          r.head.position.x = intersects[0].point.x;
+          r.head.position.y = intersects[0].point.y+100; // move robot a bit up 
+          r.head.position.z = intersects[0].point.z;
+        };
 
+        controls = new THREE.TrackballControls( camera, renderer.domElement );
+        r.show(scene);
+        animate();
+
         var gui = new dat.GUI();
-        var cubeGui = gui.addFolder('XTK Cube');
-        cubeGui.add(c, 'visible');
-        cubeGui.add(c, 'opacity', 0, 1);
-        cubeGui.addColor(c, 'color');
-
-        var threejsUI = gui.addFolder('Three.js Cube');
-        threejsUI.add(cube, 'visible');
-        threejsUI.add(cube.material, 'opacity', 0, 1).onChange( function() {
-          cube.material.transparent = true;
-        });       
-        threejsUI.addColor(controller, 'threejs_color').onChange( function() {
-          cube.material.color.set( controller.threejs_color );
-        } );
-        threejsUI.open();
-
-        var both = gui.addFolder('Both Cubes');
-        both.add(controller, 'rotateX');
-        both.add(controller, 'rotateY');
-        both.add(controller, 'rotateZ');
-        both.add(controller, 'add new');
-        both.open();
-      };
+        var rendering = gui.addFolder( "Rendering" );
+        rendering.add( controller, 'anaglyph' );
+        rendering.open();
+
+        //movements and actions 
+        var moving = gui.addFolder( "Movement" );
+        moving.add( r.head.position, "x", -1000, 1000 ).listen();
+        moving.add( r.head.position, "y", -1000, 1000 ).listen();
+        moving.add( r.head.position, "z", -1000, 1000 ).listen();
+        moving.open();
+        var action  = gui.addFolder( " Actions ");
+        action.add( r, 'raise_left_arm');
+        action.add( r, 'lower_left_arm');
+        action.add( r, 'raise_right_arm');
+        action.add( r, 'lower_right_arm');
+        action.add( r, 'kick');
+        action.add( r, 'dance');
+        action.open();
+
+        // anaglyph effect
+        effect = new THREE.AnaglyphEffect( renderer );
+        effect.setSize( window.innerWidth, window.innerHeight );
 
       function animate() {
         requestAnimationFrame( animate );
+        r.onAnimate();
+
         controls.update();
-        renderer.render( scene, camera );
+        if (!controller.anaglyph) {
+          renderer.render( scene, camera );
+        }
+        else {
+          renderer.setClearAlpha(1);
+          effect.render( scene, camera );
+        }
       };
+    };
 
     </script>
-
   </head>
-
-  <body>
-    <div id='r1'></div>
-    <div id='r2'></div>
-  </body>
-
+  <body></body>
 </html>