cookchar

3JS Avatar, Jumping

Oct 3rd, 2017
87
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <body></body>
  3. <script src="http://gamingJS.com/Three.js"></script>
  4. <script src="http://gamingJS.com/ChromeFixes.js"></script>
  5. <script>
  6.   // This is where stuff in our game will happen:
  7.   var scene = new THREE.Scene();
  8.  
  9.   // This is what sees the stuff:
  10.   var aspect_ratio = window.innerWidth / window.innerHeight;
  11.   var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  12.   camera.position.z = 500;
  13.   scene.add(camera);
  14.  
  15.   // This will draw what the camera sees onto the screen:
  16.   var renderer = new THREE.CanvasRenderer();
  17.   renderer.setSize(window.innerWidth, window.innerHeight);
  18.   document.body.appendChild(renderer.domElement);
  19.  
  20.   // ******** START CODING ON THE NEXT LINE ********
  21.  
  22.   var cover = new THREE.MeshNormalMaterial();
  23.   var body = new THREE.SphereGeometry(100);
  24.   var avatar = new THREE.Mesh(body, cover);
  25.   scene.add(avatar);
  26.  
  27.   var hand = new THREE.SphereGeometry(50);
  28.  
  29.   var right_hand = new THREE.Mesh(hand, cover);
  30.   right_hand.position.set(-150, 0, 0);
  31.   avatar.add(right_hand);
  32.  
  33.   var left_hand = new THREE.Mesh(hand, cover);
  34.   left_hand.position.set(150, 0, 0);
  35.   avatar.add(left_hand);
  36.  
  37.   var foot = new THREE.SphereGeometry(50);
  38.  
  39.   var right_foot = new THREE.Mesh(foot, cover);
  40.   right_foot.position.set(-75, -125, 0);
  41.   avatar.add(right_foot);
  42.  
  43.   var left_foot = new THREE.Mesh(foot, cover);
  44.   left_foot.position.set(75, -125, 0);
  45.   avatar.add(left_foot);
  46.  
  47.   var headBase = new THREE.SphereGeometry(70);
  48.   var head = new THREE.Mesh(headBase, cover);
  49.   head.position.set(0, 150, 0);
  50.   avatar.add(head);
  51.  
  52.   // Now, animate what the camera sees on the screen:
  53.   var is_cartwheeling = false;
  54.   var is_flipping = false;
  55.   var is_turning = false;
  56.   function animate() {
  57.     requestAnimationFrame(animate);
  58.     if (is_cartwheeling) {
  59.       avatar.rotation.z = avatar.rotation.z + 0.025;
  60.     }
  61.     if (is_flipping) {
  62.       avatar.rotation.x = avatar.rotation.x + 0.025;
  63.     }
  64.     if (is_turning) {
  65.       avatar.rotation.y = avatar.rotation.y + 0.025;
  66.     }
  67.     renderer.render(scene, camera);
  68.   }
  69.   animate();
  70.  
  71.   var bounceTime = 0;
  72.  
  73.   function headBounce() {
  74.     requestAnimationFrame(headBounce);
  75.     head.position.y += 4 * Math.sin(bounceTime);
  76.     bounceTime += 0.25;
  77.   }
  78.   headBounce();
  79.  
  80.   var jumpTime = 0;
  81.  
  82.   function jumpingJacks() {
  83.     requestAnimationFrame(jumpingJacks);
  84.     right_hand.position.y += 12 * Math.sin(jumpTime);
  85.     left_hand.position.y += 12 * Math.sin(jumpTime);
  86.     right_foot.position.y -= 6 * Math.sin(jumpTime);
  87.     left_foot.position.y -= 6 * Math.sin(jumpTime);
  88.     jumpTime += 0.25;
  89.    }
  90.    jumpingJacks();
  91.  
  92. </script>
RAW Paste Data