bostongfx · Mushaddict · Sep 7, 2019 · Sep 9, 2019 · Sep 16, 2019 · Sep 23, 2019
diff --git a/01/CS460_Assignment_01__Copy_.pdf b/01/CS460_Assignment_01__Copy_.pdf
diff --git a/02/CS460_Assignment_02__Copy_.pdf b/02/CS460_Assignment_02__Copy_.pdf
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,102 @@
+<!-- <!DOCTYPE html> -->
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>CS460 Assignment 2</title>
+    <style>
+      body {
+        background-color: black;
+        color: white; /* font color */
+        font-family: sans-serif;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+      }
+
+      #logo {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    </style>
+    <!-- everything comes from goXTK.com -->
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+
+  <script type = "text/javascript">
+
+    window.onload = function(){
+
+      //create and initialize a 3D render
+      r = new X.renderer3D();
+      r.init();
+
+      //create a 9X9 pixels
+      for (var i = 0; i < 9; i++){
+        for (var j = 0; j < 9; j++){
+
+          //create a new cube
+          var cube = new X.cube();
+          cube.center = [i * 3, j * 3, 1];
+          cube.lengthX = cube.lengthY = cube.lengthZ = 2;
+
+          //set colors;
+          cube.color = [0, 1, 0];
+          if((i == 0 && j == 0) ||
+          (i == 0 && j == 1) || 
+          (i == 0 && j == 2) ||
+          (i == 0 && j == 3) ||
+          (i == 0 && j == 5) ||
+          (i == 0 && j == 6) ||
+          (i == 0 && j == 7) ||
+          (i == 0 && j == 8) ||
+          (i == 1 && j == 0) ||
+          (i == 1 && j == 1) ||
+          (i == 1 && j == 2) ||
+          (i == 1 && j == 6) ||
+          (i == 1 && j == 7) ||
+          (i == 1 && j == 8) ||
+          (i == 2 && j == 0) ||
+          (i == 2 && j == 1) ||
+          (i == 2 && j == 2) ||
+          (i == 2 && j == 6) ||
+          (i == 2 && j == 7) ||
+          (i == 2 && j == 8) ||
+          (i == 3 && j == 0) ||
+          (i == 3 && j == 8) ||
+          (i == 4 && j == 0) ||
+          (i == 4 && j == 8) ||
+          (i == 7 && j == 0) ||
+          (i == 7 && j == 1) ||
+          (i == 7 && j == 2) ||
+          (i == 7 && j == 6) ||
+          (i == 7 && j == 7) ||
+          (i == 7 && j == 8) ||
+          (i == 8 && j == 0) ||
+          (i == 8 && j == 1) ||
+          (i == 8 && j == 2) ||
+          (i == 8 && j == 6) ||
+          (i == 8 && j == 7) ||
+          (i == 8 && j == 8) ){
+            cube.color = [0, 0, 0];
+          }
+
+          //add it 
+          r.add(cube);
+
+          // r.onRender = function(){
+          //   r.camera.rotate([1, 1]);
+          // }
+        }
+      }
+      r.render(); 
+
+    }
+
+  </script>
+  </head>
+  <body>
+    <h1>CS460 Assignment 2</h1>
+    <div id="logo"><img style="height:60px" src="gfx/cs460.png"></div>
+  </body>
+</html>
diff --git a/02/try.html b/02/try.html
@@ -0,0 +1,118 @@
+<!-- <!DOCTYPE html> -->
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>CS460 Assignment 2</title>
+    <style>
+      body {
+        background-color: black;
+        color: white; /* font color */
+        font-family: sans-serif;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+      }
+
+      #logo {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    </style>
+    <!-- everything comes from goXTK.com -->
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+
+  <script type = "text/javascript">
+
+      var items = [[0, 0, 0, 0, 1, 0, 0, 0, 0],
+                   [0, 0, 0, 1, 1, 1, 0, 0, 0], 
+                   [0, 0, 0, 1, 1, 1, 0, 0, 0], 
+                   [0, 1, 1, 1, 1, 1, 1, 1, 0],
+                   [0, 1, 1, 1, 1, 1, 1, 1, 0], 
+                   [1, 1, 1, 1, 1, 1, 1, 1, 1], 
+                   [1, 1, 1, 1, 1, 1, 1, 1, 1],
+                   [0, 0, 0, 1, 1, 1, 0, 0, 0],
+                   [0, 0, 0, 1, 1, 1, 0, 0, 0]];
+    window.onload = function(){
+
+      //create and initialize a 3D render
+      r = new X.renderer3D();
+      r.init();
+
+      var i = 0;
+      var j = 0;
+      for (i; i < items.length; i++) {
+          for (j = 0; j < items[0].length; j++){
+
+            cube = new X.cube();
+            cube.center = [i * 3, j * 3, 1];
+            cube.color = [1, 1, 1];
+            cube.lengthX = cube.lengthY = cube.lengthZ = 2;
+
+            if(items[i][j] == 0){
+                cube.color = [0, 0, 0];
+            }
+            if(items[i][j] == 1){
+                cube.color = [0, 1, 0];
+            }
+
+            r.add(cube);
+
+            //set camera further away
+            r.camera.position[0, 0, 1000];
+
+            r.render();
+          }
+      }
+    //   r.add(cube);
+    //   r.render();
+    setInterval(function(){
+
+        items[0][4] = 2;
+        items[2][3] = 2;
+        items[2][5] = 2;
+        items[4][1] = 2;
+        items[4][4] = 2;
+        items[4][7] = 2;
+        items[6][2] = 2;
+        items[6][4] = 2;
+        items[6][6] = 2;
+
+        for (i = 0; i < items.length; i++){
+            for (j = 0; j < items[0].length; j++){
+                cube = new X.cube();
+                cube.center = [i * 3, j * 3, 1];
+                cube.color = [1, 1, 1];
+                cube.lengthX = cube.lengthY = cube.lengthZ = 2;
+
+                if(items[i][j] == 0){
+                    cube.color = [0, 0, 0];
+                }
+                if(items[i][j] == 1){
+                    cube.color = [0, 1, 0];
+                }
+                if(items[i][j] == 2){
+                    cube.color = [1, 0, 0];
+                }
+
+                r.add(cube);
+
+                //set camera further away
+                r.camera.position[0, 0, 1000];
+
+                r.render();
+            }
+        }
+
+    }, 1000);
+
+    }
+
+  </script>
+  </head>
+  <body>
+    <h1>CS460 Assignment 2</h1>
+    <div id="logo"><img style="height:60px" src="gfx/cs460.png"></div>
+  </body>
+</html>
diff --git a/03/CS460_Assignment_03__Copy_.pdf b/03/CS460_Assignment_03__Copy_.pdf
diff --git a/03/class.html b/03/class.html
@@ -0,0 +1,73 @@
+<html>
+  <head>
+    <style>
+      html, body { 
+        background-color:#000;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;  
+      }
+    </style>
+    <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>
+      window.onload = function() {
+
+
+		// Three.js code goes here
+        scene = new THREE.Scene();
+
+        fov = 75;
+        ratio = window.innerWidth / window.innerHeight;
+        zNear = 1;
+        zFar = 10000;
+
+        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
+        camera.position.set(0, 0, 100);
+
+        renderer = new THREE.WebGLRenderer();
+        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);
+
+        //now we add the cube
+        geometry = new THREE.BoxBufferGeometry(20, 20, 20);
+        material = new THREE.MeshStandardMaterial({color: 0xffffff});
+        cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+
+        controls = new THREE.TrackballControls(camera);
+
+        animate();
+
+
+        function animate(){
+
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        };
+
+      };
+
+      function animate() {
+
+        requestAnimationFrame( animate );
+
+		// and here...
+
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/03/geometry.html b/03/geometry.html
@@ -0,0 +1,92 @@
+<html>
+  <head>
+      <meta charset="utf-8" />
+    <style>
+      html, body { 
+        background-color:#000;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;  
+      }
+    </style>
+    <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>
+      window.onload = function() {
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+        camera.position.set( 0, 0, 100 );
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        document.body.appendChild( renderer.domElement );
+
+        renderer.domElement.onclick = function( e ){
+
+          if(!e.keyShift){
+          e.preventDefault();
+          return false;
+        }
+
+            // console.log(e);
+            pixel_coords = new THREE.Vector2(e.clientX, e.clientY);
+            console.log(pixel_coords);
+
+            vp_coords = new THREE.Vector2((pixel_coords.x/window.innerWidth) * 2 -1,        //X
+            -(pixel_coords.y/window.innerHeight) * 2 + 1);                                  //Y
+            console.log('Viewport coords', vp_coords);
+
+            vp_coords_near = new THREE.Vector3(vp_coords.x, vp_coords.y, 0);
+            console.log(vp_coords_near);
+
+            raycaster = new THREE.Raycaster();
+            raycaster.setFromCamera(vp_coords_near, camera);
+            intersects = raycaster.intersectObject(invisible_plane);
+            first_intersection = intersects[0];
+            console.log(first_intersection);
+
+            //move the cube to new 3d position
+            //cube.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        };
+
+        ambientLight = new THREE.AmbientLight();
+        scene.add( ambientLight );
+
+        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
+        light.position.set( 10, 100, 10 );
+        scene.add( light );
+
+        geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+        material = new THREE.MeshStandardMaterial({ color: 0xffffff });
+        cube = new THREE.Mesh( geometry, material );
+        scene.add(cube);
+
+        geometry = new THREE.PlaneBufferGeometry(10000, 10000);
+        material = new THREE.MeshStandardMaterial({
+          visible: false
+        });
+        invisible_plane = new THREE.Mesh(geometry, material);
+
+        scene.add(invisible_plane);
+
+        controls = new THREE.TrackballControls( camera );
+
+        animate();
+
+      };
+
+      function animate() {
+
+        requestAnimationFrame( animate );
+
+        controls.update();
+        renderer.render( scene, camera );
+
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/03/gfx/WechatIMG6.png b/03/gfx/WechatIMG6.png