Assignment 8

bostongfx · Nov 17, 2019 · 574e716 · 574e716
1 parent ec7faf2
commit 574e716
Show file tree

Hide file tree

Showing 7 changed files with 576 additions and 0 deletions.
diff --git a/07/index.html b/07/index.html
@@ -70,6 +70,14 @@
               allRobots[i].dance();
               animate();
             }
+
+          }
+
+          walk: function() {
+            for (var i = 0; i < allRobots.length; i++) {
+              allRobots[i].walk();
+              animate();
+            }
           }
 
 
@@ -87,6 +95,7 @@
         moving.add( r, "lower_left_arm" );
         moving.add( r, "kick" );
         moving.add( r, "dance" );
+        moving.add( controller, 'walk')
         moving.open();
         controls = new THREE.TrackballControls( camera, renderer.domElement );
         animate();

diff --git a/07/robot.js b/07/robot.js
@@ -175,6 +175,10 @@ Robot.prototype.dance = function() {
   this.movement = 'dance';
 
 };
+
+Robot.prototype.walk = function() {
+  this.movement = 'walk';
+}
 
 Robot.prototype.onAnimate = function() {
 
@@ -269,6 +273,30 @@ Robot.prototype.onAnimate = function() {
       }.bind(this), 500);
 
     }
+
+    else if (this.movement == 'walk') {
+      if (this.right_upperleg.quaternion.w < 0.93) {
+        this.movement = 'walk2';
+      }
+
+
+      var T = -Math.PI/4;
+      this.left_upperleg.quaternion.slerp(new THREE.Quaternion(Math.sin(T/2), 
+        0, 0, Math.cos(T/2)), 0.5); // 45 degree along x axis
+
+      this.right_upperleg.quaternion.slerp(new THREE.Quaternion(0,0,0,1), 0.5); // identity
+    }
+
+    else if (this.movement == 'walk2') {
+      if (this.left_upperleg.quaternion.w < 0.93) {
+        this.movement = 'walk2';
+      }
+      var T = -Math.PI/4;
+      this.right_upperleg.quaternion.slerp(new THREE.Quaternion(Math.sin(T/2), 
+        0, 0, Math.cos(T/2)), 0.5); // 45 degree along x axis
+
+      this.left_upperleg.quaternion.slerp(new THREE.Quaternion(0,0,0,1), 0.5); // identity
+    }
 
   }
 

diff --git a/08/helper.js b/08/helper.js
@@ -0,0 +1,83 @@
+HELPER = {};
+
+/**
+ * This method returns [geometry, material, bones] to create a skeleton mesh
+ * based on a cylinder.
+ *
+ * @param howmany: Number of bones.
+ * @param howwide: Radius of the cylinder.
+ * @param color: Color of the cylinder.
+ */
+HELPER.cylinderSkeletonMesh = function(howmany, howwide, color) {
+
+  var segmentheight = 10; // just a temporary value but it needs to match for geometry and bones
+  var height = segmentheight * howmany;
+
+  //
+  // inspired by https://threejs.org/docs/scenes/bones-browser.html
+  //
+
+  // step1: geometry
+  var geometry = new THREE.CylinderBufferGeometry(
+    howwide, // radiusTop
+    howwide, // radiusBottom
+    height, // height
+    8, // radiusSegments
+    howmany * 3, // heightSegments
+    true // openEnded
+  );
+
+  var position = geometry.attributes.position;
+
+  var vertex = new THREE.Vector3();
+
+  var skinIndices = [];
+  var skinWeights = [];
+
+  for ( var i = 0; i < position.count; i ++ ) {
+
+    vertex.fromBufferAttribute( position, i );
+
+    var y = ( vertex.y + height / 2 );
+
+    var skinIndex = Math.floor( y / segmentheight );
+    var skinWeight = ( y % segmentheight ) / segmentheight;
+
+    skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
+    skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
+
+  }
+
+  geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
+  geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+
+  // step 2: setup material
+  var material = new THREE.MeshStandardMaterial( {
+    skinning: true, // IMPORTANT!
+    color: color,
+    side: THREE.DoubleSide,
+    flatShading: true
+  } );
+
+  // step 3: setup bones
+  var bones = [];
+
+  // we always need a dummy parent bone as the anchor point
+  var parentbone = new THREE.Bone();
+  // parentbone.position.y = -height / 2; // weeeeird
+  bones.push(parentbone);
+
+  for (var i=0; i< howmany; i++) {
+
+    var currentbone = new THREE.Bone();
+    currentbone.position.y = segmentheight;
+
+    parentbone.add(currentbone);
+    bones.push(currentbone); // add the bone
+    parentbone = currentbone;
+
+  }
+
+  return [geometry, material, bones];
+
+};
diff --git a/08/index.html b/08/index.html
@@ -0,0 +1,145 @@
+<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://threejs.org/examples/js/libs/dat.gui.min.js" type="text/javascript"></script>
+
+    <script src="helper.js"></script>
+    <script src="robot.js" type="text/javascript"></script>
+
+    <script>
+      var allRobots = [];
+      var scene, camera, renderer, effect, 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 );
+
+        effect = new THREE.AnaglyphEffect( renderer );
+        effect.setSize( window.innerWidth, window.innerHeight );
+        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( 'marble.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 );
+
+        r = new Robot(0, -30, 0);
+        allRobots.push(r);  // add created robot into array
+        r.show(scene);
+
+
+        controller = {
+          anaglyph: false,
+
+          makeAllDance: function() {
+            for (var i = 0; i < allRobots.length; i++) {
+              allRobots[i].dance();
+              animate();
+            }
+
+          },
+
+          walk: function() {
+            for (var i = 0; i < allRobots.length; i++) {
+              allRobots[i].walk();
+              animate();
+            }
+
+          }
+
+
+        }
+        var gui = new dat.GUI();
+        var rendering = gui.addFolder( "Rendering" );
+        rendering.add( controller, 'anaglyph' );
+        rendering.add( controller, 'makeAllDance');
+        rendering.open();
+        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.add( r, "raise_left_arm" );
+        moving.add( r, "lower_left_arm" );
+        moving.add( r, "kick" );
+        moving.add( r, "dance" );
+        moving.add( controller, 'walk')
+        moving.open();
+        controls = new THREE.TrackballControls( camera, renderer.domElement );
+        animate();
+      };
+      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);
+          if (intersects.length > 0) {  //  PART 2 -- CREATING NEW ROBOT ON CLICK
+            newRobot = new Robot(intersects[0].point.x, 
+                                  intersects[0].point.y + 60,
+                                  intersects[0].point.z);
+            newRobot.show(scene);
+            allRobots.push(newRobot);            
+          }
+      };
+      function animate() {
+        requestAnimationFrame( animate );
+
+        for (var i = 0; i < allRobots.length; i++) {
+          allRobots[i].onAnimate(); // PART 3 -- ANIMATE ALL ROBOTS USING ARRAY
+        }
+
+        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/08/marble.jpg b/08/marble.jpg