TORONTO KIDS COMPUTER CLUB | js-07-1
20190
post-template-default,single,single-post,postid-20190,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-7.6.2,wpb-js-composer js-comp-ver-6.8.0,vc_responsive

js-07-1

30 Dec js-07-1

<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 = 500;
  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 ********
  // light
  var sunlight = new THREE.DirectionalLight('white', 0.9);
  sunlight.position.set(200, 300, 0);
  scene.add(sunlight);
  
  //dino body
  var dino = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  dino.rotation.set(0, -Math.PI/2, 0);
  scene.add(dino);
  
  //dino neck
  var neck = new THREE.Mesh(new THREE.CubeGeometry(60, 50, 50),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  neck.position.set(0, 75, -25);
  dino.add(neck);

  //dino head
  var head = new THREE.Mesh(new THREE.CubeGeometry(80, 60, 60),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  head.position.set(0, 95, -35);
  dino.add(head);
  
  //dino lower jaw
  var lowerJaw = new THREE.Mesh(new THREE.CubeGeometry(80, 10, 40),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  lowerJaw.position.set(0, 70, -85);
  dino.add(lowerJaw);
  
  //dino upper jaw
  var upperJaw = new THREE.Mesh(new THREE.CubeGeometry(80, 30, 40),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  upperJaw.position.set(0, 110, -85);
  dino.add(upperJaw);
  
  //dino butt
  var butt = new THREE.Mesh(new THREE.CubeGeometry(80, 60, 80),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  butt.position.set(0, -30, 50);
  dino.add(butt);
  
  //dino upper tail
  var upperTail = new THREE.Mesh(new THREE.CubeGeometry(40, 30, 60),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  upperTail.position.set(0, -30, 120);
  dino.add(upperTail);
  
  //dino lower tail
  var lowerTail = new THREE.Mesh(new THREE.CubeGeometry(20, 20, 30),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  lowerTail.position.set(0, -10, 155);
  dino.add(lowerTail);
  
  
  //dino left leg
  var leftHip = new THREE.Object3D();
  leftHip.position.set(-35, -30, -20);
  dino.add(leftHip);
  
  var leftLeg = new THREE.Mesh(new THREE.CubeGeometry(40, 100, 40),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  leftLeg.position.set(0, -40, 0);
  leftHip.add(leftLeg);
  
  
  //dino right leg
  var rightHip = new THREE.Object3D();
  rightHip.position.set(35, -30, -20);
  dino.add(rightHip);
  
  var rightLeg = new THREE.Mesh(new THREE.CubeGeometry(40, 100, 40),
                            new THREE.MeshPhongMaterial({color:'orange'}));
  rightLeg.position.set(0, -40, 0);
  rightHip.add(rightLeg);
  
  var hip1;
  var hip2;
  var hip3;
  var hip4;
  function makePigAt(x, z){
    var pig = new THREE.Object3D();
    scene.add(pig);
    pig.position.set(x, -65, z);
    
    var body = new THREE.Mesh(new THREE.SphereGeometry(50),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    body.applyMatrix( new THREE.Matrix4().makeScale( 1.5, 1, 1 ) );
    pig.add(body);
    var nose = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 20),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    pig.add(nose);
    nose.position.set(-75, -10, 0);
    nose.rotation.set(0, 0, Math.PI/2);
    var lEye = new THREE.Mesh(new THREE.SphereGeometry(5),
                             new THREE.MeshPhongMaterial({color: 'black'}));
    pig.add(lEye);
    lEye.position.set(-60, 10, 20);
    var rEye = new THREE.Mesh(new THREE.SphereGeometry(5),
                             new THREE.MeshPhongMaterial({color: 'black'}));
    pig.add(rEye);
    rEye.position.set(-60, 10, -20);
    
    var lEar = new THREE.Mesh(new THREE.CylinderGeometry(1, 20 ,35, 3),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    pig.add(lEar);
    lEar.position.set(-40, 35, 35);
    lEar.rotation.set(Math.PI/4, -Math.PI/6, 0);
    var rEar = new THREE.Mesh(new THREE.CylinderGeometry(1, 20 ,35, 3),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    pig.add(rEar);
    rEar.position.set(-40, 35, -35);
    rEar.rotation.set(-Math.PI/4, -Math.PI/6, 0);
    
    hip1 = new THREE.Object3D();
    pig.add(hip1);
    hip1.position.set(-40, -20, 25);
    var leg1 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    hip1.add(leg1);
    leg1.position.set(0, -20, 0);
    
    hip2 = new THREE.Object3D();
    pig.add(hip2);
    hip2.position.set(-40, -20, -25);
    var leg2 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    hip2.add(leg2);
    leg2.position.set(0, -20, 0);
    
    hip3 = new THREE.Object3D();
    pig.add(hip3);
    hip3.position.set(40, -20, -25);
    var leg3 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    hip3.add(leg3);
    leg3.position.set(0, -20, 0);
    
    hip4 = new THREE.Object3D();
    pig.add(hip4);
    hip4.position.set(40, -20, 25);
    var leg4 = new THREE.Mesh(new THREE.CylinderGeometry(10, 5 ,40),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    hip4.add(leg4);
    leg4.position.set(0, -20, 0);
    
    var tail = new THREE.Mesh(new THREE.CylinderGeometry(6, 2, 20),
                             new THREE.MeshPhongMaterial({color: 'pink'}));
    pig.add(tail);
    tail.position.set(75, -10, 0);
    tail.rotation.set(0, 0, Math.PI/3);
    
    return pig;
  }
  var pig = makePigAt(800, 0);
  
  // 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 = -25;
    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;
    return trunk;
  }
  var tree = makeTreeAt(500, 0);
  
  // set up camera
  camera.position.z = 1000;
  camera.position.x = -0;
  camera.position.y = -0;
  camera.lookAt(dino.position);
  
  // define global variables
  var isMovingForward = false;
  var isJump = false;
  var changeY = 0;
  var degree = 0;
  var speed = 50;
  var degreePig = 0;
  var speedPig = 50;
  
  
  // add keyboard respond
  document.addEventListener('keydown', sentKeyDown); 
  function sentKeyDown(event){
    var code = event.code;
    if (code == 'KeyW') isMovingForward = true;
    if (code == 'Space') isJump = true;
  }
  
  document.addEventListener('keyup', sentKeyUp); 
  function sentKeyUp(event){
    var code = event.code;
    if (code == 'KeyW') isMovingForward = false;
  }
  
  function walk(){
    if (!isMovingForward) return;
    tree.position.x -= speed;
    if (tree.position.x < -1000) tree.position.x = 2000;
    dino.rotation.x = Math.sin(degree/2)*0.1;
    leftHip.rotation.x = -Math.sin(degree/2);
    rightHip.rotation.x = Math.sin(degree/2);
    degree ++;
  }
  
  function walkpig(){
    if (!isMovingForward) pig.position.x -= speedPig/10;
    else 
    tree.position.x -= speed;
    if (tree.position.x < -1000) tree.position.x = 2000;
    dino.rotation.x = Math.sin(degree/2)*0.1;
    leftHip.rotation.x = -Math.sin(degree/2);
    rightHip.rotation.x = Math.sin(degree/2);
    degree ++;
  }
  
  function jump(){
    if (isJump == true && dino.position.y == 0){
      changeY = 60;
      isJump = false;
    }
    dino.position.y += changeY;
    
    if (dino.position.y > 0){
      changeY -= 4;
    }
    else{
      dino.position.y = 0;
      isJump = false;
    }
  }
  
  function animate(){
    requestAnimationFrame(animate);
    walk();
    jump();
    renderer.render(scene, camera);
  }
  animate();
  
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
No Comments

Post A Comment