TORONTO KIDS COMPUTER CLUB

28 Dec js-05

Posted at 20:37h in code by admin 0 Comments
0 Likes
<body></body>
<script src="/three.js"></script>
<script>
  // The "scene" is where stuff in our game will happen:
  var scene = new THREE.Scene();
  var flat = {flatShading: true};
  var light = new THREE.AmbientLight('white', 0.8);
  scene.add(light);

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

  // The "renderer" draws what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var banana = new THREE.Mesh(new THREE.CubeGeometry(100,150,60), 
                              new THREE.MeshNormalMaterial(flat));
  scene.add(banana);
  banana.add(camera);
  camera.position.y = 150;
  
  var head = new THREE.Mesh(new THREE.CubeGeometry(120,100,120), 
                              new THREE.MeshNormalMaterial(flat));
  banana.add(head);
  head.position.set(0,125,0);
  
  // left arm
  var leftShoulder = new THREE.Object3D();
  leftShoulder.position.set(-75, 65, 0);
  banana.add(leftShoulder);
  
  var leftArm = new THREE.Mesh(new THREE.CubeGeometry(50,150,50), 
                              new THREE.MeshNormalMaterial(flat));
  
  leftShoulder.add(leftArm);
  leftArm.position.set(0,-65,0);
  
  // right arm
  var rightShoulder = new THREE.Object3D();
  rightShoulder.position.set(75, 65, 0);
  banana.add(rightShoulder);
  
  var rightArm = new THREE.Mesh(new THREE.CubeGeometry(50,150,50), 
                              new THREE.MeshNormalMaterial(flat));
  rightShoulder.add(rightArm);
  rightArm.position.set(0,-65,0);
  
  
  
  // left leg
  var leftHip = new THREE.Object3D();
  leftHip.position.set(-25, -85, 0);
  banana.add(leftHip);
  
  var leftLeg = new THREE.Mesh(new THREE.CubeGeometry(50,150,50), 
                              new THREE.MeshNormalMaterial(flat));
  leftHip.add(leftLeg);
  leftLeg.position.set(0,-65,0);
  
  // right leg
  var rightHip = new THREE.Object3D();
  rightHip.position.set(25, -85, 0);
  banana.add(rightHip);
  
  var rightLeg= new THREE.Mesh(new THREE.CubeGeometry(50,150,50), 
                              new THREE.MeshNormalMaterial(flat));
  rightHip.add(rightLeg); 
  rightLeg.position.set(0,-65,0);
  
  var sunlight = new THREE.DirectionalLight('white', 0.9);
  sunlight.position.set(200, 300, 0);
  sunlight.castShadow = true;
  scene.add(sunlight);
  
  // create trees
  function makeTreeAt(x, z){
    var trunk = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 200),
                               new THREE.MeshPhongMaterial({color: 'sienna'}));
    scene.add(trunk);
    trunk.position.x = x;
    trunk.position.y = -125;
    trunk.position.z = z;
    
    var tt1 = new THREE.Mesh(new THREE.CylinderGeometry(40, 80, 100),
                               new THREE.MeshPhongMaterial({color: 'forestgreen'}));
    trunk.add(tt1);
    tt1.position.y = 75;
    
    var tt2 = new THREE.Mesh(new THREE.CylinderGeometry(20, 60, 100),
                               new THREE.MeshPhongMaterial({color: 'forestgreen'}));
    trunk.add(tt2);
    tt2.position.y = 175;
    
    var tt3 = new THREE.Mesh(new THREE.CylinderGeometry(1, 40, 100),
                               new THREE.MeshPhongMaterial({color: 'forestgreen'}));
    trunk.add(tt3);
    tt3.position.y = 275;
  }
  
  makeTreeAt(500, -200);
  makeTreeAt(500, 0);
  makeTreeAt(-500, 0);
  makeTreeAt(-400, -300);
  
  document.addEventListener('keydown', sendKeyDown);
  var isSpin = false;
  var isJump = false;
  var isInAir = false;
  var change_y = 0;
  
  function sendKeyDown(event){
    var code = event.code;
    if (code == 'ArrowLeft') banana.position.x -= 5;
    if (code == 'ArrowRight') banana.position.x += 5;
    if (code == 'ArrowDown') banana.position.z += 5;
    if (code == 'ArrowUp') banana.position.z -= 5;
    
    if (code == 'KeyS') isSpin = !isSpin;
    if (code == 'Space') isJump = true;
  }
  
  
  function jump(){
    if (isJump == true && isInAir == false){
      change_y = 60;
      isJump = false;
      isInAir = true;
    }
    if (isInAir == true){
      if (change_y > -60){
        banana.position.y += change_y;
        change_y -= 4;
      }
      else{
        isInAir = false;
        banana.position.y = 0;
      }
    }
  }
  
  var clock = new THREE.Clock();
  
  function animate(){
    requestAnimationFrame(animate);
    
    if (isSpin == true){
      banana.rotation.y = banana.rotation.y + 0.05;
      leftShoulder.rotation.x = leftShoulder.rotation.x + 0.01;
      rightShoulder.rotation.x = rightShoulder.rotation.x - 10;
      head.rotation.y = head.rotation.y + 5;
    }
    
    //var t = clock.getElapsedTime();
    jump();
    
    renderer.render(scene, camera);
  }
  
  animate();
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
js-05

28 Dec js-05

No Comments

Post A Comment

Contact Us:
