bostongfx · alvin688 · Sep 12, 2020 · Sep 14, 2020 · Sep 14, 2020 · Sep 14, 2020
diff --git a/.DS_Store b/.DS_Store
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/inClass.html b/02/inClass.html
@@ -0,0 +1,78 @@
+
+Z-Fighting
+
+
+<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;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+      }
+
+      #logo {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    </style>
+
+    <script type="text/javascript" src="http://get.goXTK.com/xtk_edge.js"></script>
+
+    <script type="text/javascript">
+
+    window.onload = function() {
+
+      // this gets called when the site is ready
+
+      // create a new scene and renderer
+      r = new X.renderer3D();
+      r.init();
+
+      // create a cube and add it!
+      c = new X.cube();
+      r.add(c);
+
+      // create another cube and add it!
+      c2 = new X.cube();
+      c2.center = [25, 0, 0]
+      r.add(c2);
+
+
+
+      // set camera's position!
+      r.camera.position = [1000, 0, 0];
+
+      // render everything!
+      r.render();
+      //r.onRender = function() {
+      //	r.camera.rotate([10, 0]);
+      //};
+ 	  cubeRed = false;
+ 	  setInterval(function() {
+ 	  	if(!cubeRed) {
+ 	  		c2.color = [1, 0, 0];
+ 	  		cubeRed = true;
+ 	  	} else {
+ 	  		c2.color = [1, 1, 1];
+ 	  		cubeRed = false;
+ 	  	}}, 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/02/index.html b/02/index.html
@@ -0,0 +1,136 @@
+<html>
+	<head>
+		<title>CS460 Assignment 02 </title>
+		<style>
+			body {
+				background-color: black;
+				color: white; /* font color */
+				font-family: sans-serif;
+			}
+			#logo {
+				position: absolute;
+				right: 10px; /*10px from the right side */
+				top: 10px; /*10 px from top*/
+			}
+		</style>
+		<!-- add xtk framework -->
+		<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+		<script type="text/javascript">
+			window.onload = function() {
+				// console.log('loads once the whole website including all libraries is erady')
+
+				//new renderer (the var keyword makes it private,
+				// removing it makes it public
+				var r = new X.renderer3D();
+				r.init();
+
+				var count = 0
+				var dex = 0
+				var eyes = []
+				// loop to create many cubes as a 2D
+				for (var i=0; i<7; i++) {
+					for (var j=0; j<6; j++) {
+						c = new X.cube();
+						c.lengthX = 7;
+						c.lengthY = 7;
+						c.lengthZ = 7;
+						c.center = [i*9, 0, j*9 + count];
+						//fox eyes
+						if ((j == 3 && (i == 1 || i == 5)) || (j == 4 && (i == 2 || i == 4))) {
+							c.color = [1, 1, 1];
+							eyes[dex] = c;
+							dex += 1;
+						}
+						// fox nose
+						else if (i == 3 && j == 1) {
+							c.color = [1, 0, 0];
+						}
+						// fox skin
+						else {
+							c.color = [0.6, 0.3, 0.1];
+						}
+						r.add(c);
+					}
+					if (i < 2) {
+						count -= 9;
+					}
+					if (i > 3) {
+						count += 9;
+					}
+				}
+				r.render();
+
+		eyesClosed = false;
+		setInterval(function() {
+			for (i = 0; i < eyes.length; i++) {
+				eyes[i].color = [1, 1, 1];
+			}
+			//eyesClosed = true;
+		}, 700);
+
+		setInterval(function() {
+			for (i = 0; i < eyes.length; i++) {
+				eyes[i].color = [0.5, 0.2, 0.1];
+			}
+			//eyesClosed = false;
+		}, 900);
+
+				/*
+				//create a cube
+				var c = new X.cube();
+
+				//change color property of the cube
+				c.color = [0, 1, 0]; //R G B
+
+				//adjust size in x direction
+				c.lengthX = 50;
+
+				//adjust center of the object on coordinate plane
+				c.center = [0, 0, 0];
+
+				//add to the scene
+				r.add(c);
+
+				//example make new cube and add to scene
+				var c2 = new X.cube();
+				c2.color = [1, 0, 0];
+				r.add(c2);
+
+				//start rendering
+				r.render();
+				*/
+			};
+		</script>
+		<!-- inline javascript in html -->
+		<!-- from class prior to hw1 -->
+		<!--
+		<script type='text/javascript'>
+			window.onload = function() {
+				var mytext = 'hello students!';
+				var mynumber = 8;
+				var myfloat = 3.1415;
+				var myboolean = true;
+				<!-- automatic cast mynumber to a string from int --
+				console.log(mytext + mynumber);
+				<!-- does not cast --
+				console.log(mytext, mynumber, myfloat);
+				<!-- Try these in console:
+					parseInt(mynumber)
+					typeof "myboolean"
+				-->
+				<!-- This is produce an error because output is not defined yet, unless if you load the page first as a function, as done above. --
+				document.getElementById('output').
+					innerHTML = 'hello';
+			}
+		</script>
+		-->
+
+	</head>
+
+	<body>
+		<h1>CS460 Assignment 2</h1>
+		<img id='logo' src='gfx/cs460.png'style='
+			height:60px'>
+		<div id= 'output'></div>
+	</body>
+<html>
diff --git a/03/.DS_Store b/03/.DS_Store
diff --git a/03/CS460_Assignment_03__Copy_.pdf b/03/CS460_Assignment_03__Copy_.pdf
diff --git a/03/ClassIndex.html b/03/ClassIndex.html
@@ -0,0 +1,116 @@
+<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() {
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+        camera.position.set( 0, 0, 100 );
+
+ 		//antialias:true makes the edges of your objects smoother
+        renderer = new THREE.WebGLRenderer( {antialias: true} );
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        document.body.appendChild( renderer.domElement );
+
+        //
+        // let's listen to clicks on the canvas
+        // This is how you create functions that execute on clicks
+        renderer.domElement.onclick = function(e) {
+        	pixel_coords = new THREE.Vector2(e.clientX, e.clientY); // screen space
+
+        	vp_coords = new THREE.Vector2(
+        		( pixel_coords.x / window.innerWidth ) * 2 - 1, // x
+        			- (pixel_coords.y / window.innerHeight ) * 2 + 1 ); // y
+        	console.log('screen space', pixel_coords);
+        	console.log('vp space', vp_coords);
+
+        	vp_coords_3d_near = new THREE.Vector3(vp_coords.x, 
+        								  vp_coords.y,
+        								  0); // for zNear
+
+        	// raycaster, creates the ray to get your depth
+        	// we are not 3D until we have this
+        	raycaster = new THREE.Raycaster();
+        	raycaster.setFromCamera(vp_coords_3d_near, camera);
+
+        	intersects = raycaster.intersectObject( invisible_plane );
+
+        	//intersects[0] is the first object the ray hits, otherwise, with just intersects, 
+        	//you would get a list of all things the ray shoots through.
+        	console.log('3d', intersects[0].point );
+        	console.log('3d', vp_coords_3d_near);
+
+        	// create example object
+            geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+            material = new THREE.MeshStandardMaterial({ color: 0xffffff });
+            cube = new THREE.Mesh( geometry, material );
+
+            cube.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
+
+            scene.add( cube );
+
+        };
+
+
+
+
+
+
+        ambientLight = new THREE.AmbientLight( 0x404040 );
+        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 );        
+
+
+ 	    // setup invisible plane for picking
+		geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
+		material = new THREE.MeshBasicMaterial( {
+  		// visible: false
+		});
+		invisible_plane = new THREE.Mesh( geometry, material );
+
+		scene.add( invisible_plane );
+
+
+
+
+        controls = new THREE.TrackballControls( camera, renderer.domElement );
+
+        animate();
+
+      };
+
+      function animate() {
+
+        requestAnimationFrame( animate );
+
+        controls.update();
+        renderer.render( scene, camera );
+
+      };
+    </script>
+  </head>
+  <body></body>
+</html>