3JS Avatar, Jumping


<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********

  var cover = new THREE.MeshNormalMaterial();
  var body = new THREE.SphereGeometry(100);
  var avatar = new THREE.Mesh(body, cover);
  scene.add(avatar);

  var hand = new THREE.SphereGeometry(50);

  var right_hand = new THREE.Mesh(hand, cover);
  right_hand.position.set(-150, 0, 0);
  avatar.add(right_hand);

  var left_hand = new THREE.Mesh(hand, cover);
  left_hand.position.set(150, 0, 0);
  avatar.add(left_hand);

  var foot = new THREE.SphereGeometry(50);

  var right_foot = new THREE.Mesh(foot, cover);
  right_foot.position.set(-75, -125, 0);
  avatar.add(right_foot);

  var left_foot = new THREE.Mesh(foot, cover);
  left_foot.position.set(75, -125, 0);
  avatar.add(left_foot);

  var headBase = new THREE.SphereGeometry(70);
  var head = new THREE.Mesh(headBase, cover);
  head.position.set(0, 150, 0);
  avatar.add(head);

  // Now, animate what the camera sees on the screen:
  var is_cartwheeling = false;
  var is_flipping = false;
  var is_turning = false;
  function animate() {
    requestAnimationFrame(animate);
    if (is_cartwheeling) {
      avatar.rotation.z = avatar.rotation.z + 0.025;
    }
    if (is_flipping) {
      avatar.rotation.x = avatar.rotation.x + 0.025;
    }
    if (is_turning) {
      avatar.rotation.y = avatar.rotation.y + 0.025;
    }
    renderer.render(scene, camera);
  }
  animate();

  var bounceTime = 0;

  function headBounce() {
    requestAnimationFrame(headBounce);
    head.position.y += 4 * Math.sin(bounceTime);
    bounceTime += 0.25;
  }
  headBounce();

  var jumpTime = 0;

  function jumpingJacks() {
    requestAnimationFrame(jumpingJacks);
    right_hand.position.y += 12 * Math.sin(jumpTime);
    left_hand.position.y += 12 * Math.sin(jumpTime);
    right_foot.position.y -= 6 * Math.sin(jumpTime);
    left_foot.position.y -= 6 * Math.sin(jumpTime);
    jumpTime += 0.25;
   }
   jumpingJacks();

</script>