bostongfx · MadMax2121 · Sep 10, 2024 · Sep 17, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/01/azarian_screenshot.png b/01/azarian_screenshot.png
diff --git a/01/bonus/GLTF2Loader.js b/01/bonus/GLTF2Loader.js
diff --git a/01/bonus/birdsA_parrot.gltf b/01/bonus/birdsA_parrot.gltf
diff --git a/01/bonus/quadruped_bear.gltf b/01/bonus/quadruped_bear.gltf
diff --git a/01/bonus/quadruped_horse.gltf b/01/bonus/quadruped_horse.gltf
diff --git a/01/bonus/three.js b/01/bonus/three.js
diff --git a/01/bonus/viewer.html b/01/bonus/viewer.html
@@ -0,0 +1,104 @@
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>ROME GLTF</title>
+		<style>
+			body {
+				margin: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<script src="three.js"></script>
+		<script src="GLTF2Loader.js"></script>
+		<script>
+			var renderer = new THREE.WebGLRenderer();
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.animate( render );
+			document.body.appendChild( renderer.domElement );
+
+			var scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xdddddd );
+
+			var light = new THREE.DirectionalLight( 0xffffff, 1.25 );
+			light.position.set( 1, 1, 1 );
+			scene.add( light );
+
+			var light = new THREE.HemisphereLight();
+			scene.add( light );
+
+			var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight );
+
+			var mixer, sphere;
+
+			var loader = new THREE.GLTF2Loader();
+			loader.load( location.search.substr( 1 ), function ( gltf ) {
+
+				// TODO Implement Double side in exporter
+
+				gltf.scene.traverse( function ( child ) {
+
+					if ( 'material' in child ) {
+
+						child.material.side = THREE.DoubleSide;
+
+					}
+
+				} );
+
+				sphere = new THREE.Box3()
+					.expandByObject( gltf.scene )
+					.getBoundingSphere();
+
+				//
+
+				var animations = gltf.animations;
+
+				if ( animations && animations.length ) {
+
+					mixer = new THREE.AnimationMixer( gltf.scene );
+
+					for ( var i = 0; i < animations.length; i ++ ) {
+
+						var animation = animations[ i ];
+						mixer.clipAction( animation ).play();
+
+					}
+
+				}
+
+				scene.add( gltf.scene );
+
+			} );
+
+			//
+
+			var prevTime = performance.now() / 1000;
+
+			function render() {
+
+				var time = performance.now() / 1000;
+
+				if ( sphere ) {
+
+					camera.position.set( Math.cos( time ), 1.5, Math.sin( time ) ).multiplyScalar( sphere.radius );
+					camera.lookAt( sphere.center );
+
+				}
+
+				if ( mixer ) {
+
+					mixer.update( time - prevTime );
+
+				}
+
+				renderer.render( scene, camera );
+
+				prevTime = time;
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/01/index.html b/01/index.html
@@ -12,11 +12,11 @@
 
       .demo {
         margin: auto;
-        width:50%;
+        width: 50%;
       }
 
       #screenshot {
-        float:left;
+        float: left;
         margin-right: 20px;
         margin-bottom: 20px;
         max-width: 300px;
@@ -37,35 +37,45 @@
         width: 100%;
       }
 
+      #viewer {
+        width: 200px;
+        height: 200px;
+      }
     </style>
   </head>
   <body>
-
-    <img id='cube' src='https://cs460.org/gfx/cube.png'>
+    <img id="cube" src="https://cs460.org/gfx/cube.png" />
 
     <h1>RO.ME "3 DREAMS OF BLACK"</h1>
 
-    <div class='demo'>
-
-      <!-- TODO: REPLACE WITH A SCREENSHOT OF RO.ME -->
-      <img id='screenshot' src='https://placehold.co/300x300'>
-      <p id='description'>
-      <!-- TODO: FILL IN YOUR DESCRIPTION -->
-      RO.ME is a very cool webgl demo!
-      </p>
-      <p id='technology'>
-      Technology: TODO! <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
+    <div class="demo">
+      <img id="screenshot" src="rome_screenshot.png" />
+      <p id="description">
+        When I first launched RO.ME, i was stunned by the beatufuly transitions between videos and actual interactable code . I experiences three
+        different stages of the dream. The first part was in the city, where I could move rows of colorful animals across the city and the buildings.
+        Then there was a transition to a movie-like cutscene. I was then transformed into a field where i could move a herd of black bison around the
+        field with the power of my cursor. Finally, the final "dream" includes me exploring the desert using flying birds. I was in the first person
+        point of view, and the only way I could travel across the desert was to use my cursor to fly the birds in a certain direction. Since the demo
+        was created in 2011, I believe this is a very revolutional website because it uses WEBGL to render the components using your machine's gpu.
+        This has a great impact on what future websites will look like, because this gives people creativity to make their websites look more flashy
+        and interactive.
       </p>
-      <p id='comparison'>
-      Comparison: TODO! <!-- TODO: FILL IN THE COMPARISON -->
+      <p id="technology">Technology: WEBGL, 2D Graphics, video, 3D graphics, Javascript, HTML 5</p>
+      <p id="comparison">
+        <img id="screenshot" src="azarian_screenshot.png" />
+        Comparison: Another story that can be compared to RO.ME is called The Azarian Journey. Link <a href="https://le-voyage-azarien.art/">here</a>.
+        This story goes around a couple of trees where the French narrator describes his experiences with nature and talks about the atmosphere of forests.
+        This is relatable to the RO.ME experience because here you can use your cursor to move the camera around the tree, and see different angles that you
+        would not have seen before. It also has nature sounds in the background to immerse you more into the enviroment.
       </p>
 
-
-      <div id='bonus'>
-        <!-- TODO: BONUS TASK GOES HERE -->
+      <div id="bonus">
+      <h1>BONUS CONTENT:</h1>
+      <p>github repo used: <a href="https://github.com/mrdoob/rome-gltf">REPO</a></p>
+      <iframe id="viewer" src="bonus/viewer.html?birdsA_parrot.gltf"></iframe>
+			<iframe id="viewer" src="bonus/viewer.html?quadruped_bear.gltf"></iframe>
+			<iframe id="viewer" src="bonus/viewer.html?quadruped_horse.gltf"></iframe>
       </div>
-
     </div>
-
   </body>
 </html>
diff --git a/01/rome_screenshot.png b/01/rome_screenshot.png
diff --git a/02/index.html b/02/index.html
@@ -1,16 +1,113 @@
 <html>
   <head>
     <title>CS460.org Assignment 2</title>
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+    <script type="text/javascript" src="loader.js"></script>
+
     <style>
       body {
-        background-color:#000;
+        background-color: #000;
         margin: 0;
         padding: 0;
         height: 100%;
-        overflow: hidden !important; 
+        overflow: hidden !important;
       }
     </style>
+
+    <script>
+      window.onload = function () {
+        stack = []; // creates stack of recently added cubes
+        let rotating = false; // boolean whether the object is rotating
+        r = new X.renderer3D();
+
+        r.init();
+
+        c = new X.cube();
+        c.color = [1, 1, 1]; // r g b
+
+        r.add(c);
+
+        r.render();
+
+        const CUBE_SIDELENGTH = 20;
+        const GAP = 2;
+
+        window.onkeypress = function (e) {
+          if (e.code == "KeyD") { // Left
+            c.transform.translateX(-CUBE_SIDELENGTH - GAP);
+          }
+          else if (e.code == "KeyA") { // Right
+            c.transform.translateX(CUBE_SIDELENGTH + GAP);
+          }
+          else if (e.code == "KeyE") { // Forward
+            c.transform.translateY(CUBE_SIDELENGTH + GAP);
+          }
+          else if (e.code == "KeyQ") { // Backward
+            c.transform.translateY(-CUBE_SIDELENGTH - GAP);
+          }
+          else if (e.code == "KeyW") { // Forward
+            c.transform.translateZ(CUBE_SIDELENGTH + GAP);
+          }
+          else if (e.code == "KeyS") { // Backward
+            c.transform.translateZ(-CUBE_SIDELENGTH - GAP);
+          }
+          else if (e.code == "Digit1") { // 1: White
+            c.color = [1,1,1];
+          }
+          else if (e.code == "Digit2") { // 2: Red
+            c.color = [1, 0, 0];
+          }
+          else if (e.code == "Digit3") { // 3: Green
+            c.color = [0,1,0];
+          }
+          else if (e.code == "Digit4") { // 4: Yellow
+            c.color = [0, 0, 1];
+          }
+          else if (e.code == "Digit5") { // 5: Yellow
+            c.color = [1, 1, 0];
+          }
+          else if (e.code == "Digit6") { // 6: Pink
+            c.color = [1, 0, 1];
+          }
+          else if (e.code == "Digit7") { // 7: Cyan
+            c.color = [0,1,1];
+          }
+          else if (e.code == "Digit0") { // 0: Black
+            c.color = [0,0,0];
+          }
+          else if (e.code == "Space") { // Add new cube
+            new_cube = new X.cube();
+            new_cube.color = c.color;
+            new_cube.transform.matrix = new Float32Array(c.transform.matrix);
+            new_cube.lengthX = new_cube.lengthY = new_cube.lengthZ = CUBE_SIDELENGTH;
+            stack.push(new_cube);
+            r.add(new_cube);
+          }
+          else if (e.code == "KeyO") { // Save scene
+            download();
+          }
+          else if (e.code == "KeyL") {
+            upload("scene.json"); // Upload from the scene.json file
+          }
+          else if (e.code == "KeyN") { //Deletes the previous cube added, pops the latest cube out of the stack
+            if (stack.length > 0) {
+              cube = stack.pop();
+              r.remove(cube);
+            }
+          }
+          else if (e.code == "KeyB") {
+            rotating = !rotating; // switches the rotating on or off
+          }
+        };
+
+        r.onRender = function() {
+          if (rotating) {
+            // Spin the camera in X direction by 1 degree
+            r.camera.rotate([1, 0]);
+          }
+        }
+      };
+    </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
diff --git a/02/loader.js b/02/loader.js
@@ -33,6 +33,7 @@ function download() {
 function upload(scene) {
 
   var req = new XMLHttpRequest();
+  const CUBE_SIDELENGTH = 20;
   req.responseType = 'json';
   req.open('GET', scene, true);
   req.onload  = function() {

diff --git a/02/scene.json b/02/scene.json