Add files via upload

bostongfx · NaveenMuthusamy94 · Sep 12, 2022 · Sep 12, 2022 · Sep 12, 2022 · Sep 20, 2022
commit 2fe9e32b9eadda0faf4e51e2330d269606b74645
diff --git a/06/board.jpg b/06/board.jpg
diff --git a/06/index.html b/06/index.html
@@ -1,88 +1,137 @@
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <style>
-      html, body { 
-        background-color:#000;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        overflow: hidden !important;  
-
-        background-image: url(sky.jpg);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-      }
-    </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 src="https://threejs.org/examples/js/effects/AnaglyphEffect.js" type="text/javascript"></script>
-
-
-    <script>
-
-      var scene, camera, renderer, ambientLight, light, controls;
-      var floor;
-
-      window.onload = function() {
-
-        scene = new THREE.Scene();
-
-        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 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 );
-
-
-        // ROBOT GOES HERE!
-
-
-
-        animate();
-
-
-      };
-
-      function animate() {
-
-        requestAnimationFrame( animate );
-
-        // TODO
-
-        controls.update();
-        renderer.render( scene, camera );
-
-      };
-
-    </script>
-  </head>
-  <body></body>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      html,
+      body {
+        background-color: #000;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+
+        background-image: url(sky.jpg);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    </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
+      src="https://threejs.org/examples/js/effects/AnaglyphEffect.js"
+      type="text/javascript"
+    ></script>
+    <script
+      src="https://unpkg.com/[email protected]/build/dat.gui.min.js"
+      type="text/javascript"
+    ></script>
+
+    <script src="robot.js"></script>
+
+    <script>
+      var scene, camera, renderer, ambientLight, light, controls;
+      var floor, r;
+
+      window.onload = function () {
+        scene = new THREE.Scene();
+
+        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, 300);
+
+        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 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);
+        // controls = new THREE.TrackballControls(camera, renderer.domElement);
+
+        // ROBOT GOES HERE!
+        r = new Robot(0, -55, 0); // any position works
+        r.show(scene);
+
+        //Anaglyph effect
+        effect = new THREE.AnaglyphEffect(renderer);
+        effect.setSize(window.innerWidth, window.innerHeight);
+
+        controller = {
+          anaglyph: false,
+          "raise left arm": function () {
+            r.raise_left_arm();
+          },
+          "lower left arm": function () {
+            r.lower_left_arm();
+          },
+          kick: function () {
+            r.kick();
+          },
+          dance: function () {
+            r.dance();
+          },
+        };
+        var gui = new dat.GUI();
+        var rendering = gui.addFolder("Rendering");
+        rendering.add(controller, "anaglyph");
+        rendering.open();
+
+        var moving = gui.addFolder("Movement");
+        moving.add(r.head.position, "x", -1000, 1000);
+        moving.add(r.head.position, "y", -1000, 1000);
+        moving.add(r.head.position, "z", -1000, 1000);
+        moving.add(controller, "raise left arm");
+        moving.add(controller, "lower left arm");
+        moving.add(controller, "kick");
+        moving.add(controller, "dance");
+        moving.open();
+
+        animate();
+      };
+
+      function animate() {
+        requestAnimationFrame(animate);
+
+        // TODO
+        r.onAnimate();
+
+        controls.update();
+
+        if (controller.anaglyph) {
+          renderer.setClearAlpha(1);
+          effect.render(scene, camera);
+        } else {
+          renderer.setClearAlpha(0);
+          renderer.render(scene, camera);
+        }
+      }
+    </script>
+  </head>
+  <body></body>
 </html>
diff --git a/06/robot.js b/06/robot.js
@@ -0,0 +1,215 @@
+class Robot{
+
+	constructor (x, y, z) {
+
+		// Body
+
+		this.head = new THREE.Bone();
+		this.neck = new THREE.Bone();
+		this.torso = new THREE.Bone();
+
+		this.head.position.set( x, y, z );
+
+		this.neck.position.y = -10;
+		this.torso.position.y = -30;
+
+		this.head.add(this.neck);
+		this.neck.add(this.torso);
+
+		// Arms
+
+		// Left
+		this.leftUpperArm = new THREE.Bone();
+		this.leftLowerArm = new THREE.Bone();
+		this.leftHand = new THREE.Bone();
+
+		this.leftUpperArm.position.y = -5;
+		this.leftUpperArm.position.x = 5;
+
+		this.leftLowerArm.position.y = -15;
+		this.leftLowerArm.position.x = 5;
+
+		this.leftHand.position.y = -5;
+		this.leftHand.position.x = 5;
+
+		this.neck.add(this.leftUpperArm);
+		this.leftUpperArm.add(this.leftLowerArm);
+		this.leftLowerArm.add(this.leftHand);
+
+		// Right
+		this.rightUpperArm = new THREE.Bone();
+		this.rightLowerArm = new THREE.Bone();
+		this.rightHand = new THREE.Bone();
+
+		this.rightUpperArm.position.y = -5;
+		this.rightUpperArm.position.x = -5;
+
+		this.rightLowerArm.position.y = -15;
+		this.rightLowerArm.position.x = -5;
+
+		this.rightHand.position.y = -5;
+		this.rightHand.position.x = -5;
+
+		this.neck.add(this.rightUpperArm);
+		this.rightUpperArm.add(this.rightLowerArm);
+		this.rightLowerArm.add(this.rightHand);
+
+		// Legs
+
+		// Left
+		this.leftUpperLeg = new THREE.Bone();
+		this.leftLowerLeg = new THREE.Bone();
+		this.leftFoot = new THREE.Bone();
+
+		this.leftUpperLeg.position.y = -5;
+		this.leftUpperLeg.position.x = 5;
+
+		this.leftLowerLeg.position.y = -15;
+		this.leftLowerLeg.position.x = 5;
+
+		this.leftFoot.position.y = -5;
+		this.leftFoot.position.x = 5;
+
+		this.torso.add(this.leftUpperLeg);
+		this.leftUpperLeg.add(this.leftLowerLeg);
+		this.leftLowerLeg.add(this.leftFoot);
+
+		// Right
+		this.rightUpperLeg = new THREE.Bone();
+		this.rightLowerLeg = new THREE.Bone();
+		this.rightFoot = new THREE.Bone();
+
+		this.rightUpperLeg.position.y = -5;
+		this.rightUpperLeg.position.x = -5;
+
+		this.rightLowerLeg.position.y = -15;
+		this.rightLowerLeg.position.x = -5;
+
+		this.rightFoot.position.y = -5;
+		this.rightFoot.position.x = -5;
+
+		this.torso.add(this.rightUpperLeg);
+		this.rightUpperLeg.add(this.rightLowerLeg);
+		this.rightLowerLeg.add(this.rightFoot);
+
+	}
+
+	show(scene) {
+		var rGroup = new THREE.Group();
+		rGroup.add( this.head );
+		var helper = new THREE.SkeletonHelper( rGroup );
+		helper.material.linewidth = 3; // make the skeleton thick
+		scene.add(rGroup);
+		scene.add(helper);
+	}
+
+	raise_left_arm() {
+		this.movement = 'raise left arm';
+	}
+
+	lower_left_arm() {
+		this.movement = 'lower left arm';
+	}
+
+	kick() {
+		this.movement = 'kick';
+	}
+
+	dance() {
+
+		this.movement = 'dance';
+
+	}
+
+	onAnimate() {
+
+		var T, x, y, z, w, quat;
+
+		const parts = [this.leftUpperArm, this.rightUpperArm, this.rightUpperLeg, 
+					 this.leftUpperLeg, this.head];
+
+		var part = null;
+
+		if (this.movement == 'raise left arm') {
+
+			T = Math.PI;
+			x = Math.sin(T/2);
+			y = 0;
+			z = 0;
+			w = Math.cos(T/2);
+			quat = new THREE.Quaternion(x, y, z, w);
+
+			this.leftUpperArm.quaternion.slerp(quat, 0.05);
+
+		} 
+		else if (this.movement == 'lower left arm') {
+
+			quat = new THREE.Quaternion(0, 0, 0, 1);
+			this.leftUpperArm.quaternion.slerp(quat, 0.05);
+
+		} 
+		else if (this.movement == 'kick') {
+
+			if (this.rightUpperLeg.quaternion.x >= 0.69) {
+
+				this.movement = 'kicked';
+
+			}
+			else {
+
+				T = Math.PI/2;
+				x = Math.sin(T/2);
+				y = 0;
+				z = 0;
+				w = Math.cos(T/2);
+				quat = new THREE.Quaternion(x, y, z, w);
+
+				this.rightUpperLeg.quaternion.slerp(quat, 0.05);
+
+			}
+
+		}
+		else if (this.movement == 'kicked') {
+
+			quat = new THREE.Quaternion(0, 0, 0, 1);
+			this.rightUpperLeg.quaternion.slerp(quat, 0.05);
+
+		}
+		else if (this.movement == 'dance') {
+
+			var idx = Math.floor(Math.random()*parts.length);
+
+			part = parts[idx];
+
+			if (part.quaternion.w <= 0.90) {
+
+				this.movement = 'danced';
+
+			}
+			else {
+
+				T = Math.PI/2;
+				x = Math.sin(T/2);
+				y = 0;
+				z = 0;
+				w = Math.cos(T/2);
+				quat = new THREE.Quaternion(x, y, z, w);
+
+				part.quaternion.slerp(quat, 0.05);
+			}
+
+		}
+		else if (this.movement == 'danced') {
+
+			quat = new THREE.Quaternion(0, 0, 0, 1);
+			this.leftUpperArm.quaternion.slerp(quat, 0.05);
+			this.rightUpperArm.quaternion.slerp(quat, 0.05);
+			this.rightUpperLeg.quaternion.slerp(quat, 0.05);
+			this.leftUpperLeg.quaternion.slerp(quat, 0.05);
+			this.head.quaternion.slerp(quat, 0.05);
+
+		}
+
+	}
+
+}
diff --git a/06/sky.jpg b/06/sky.jpg