TORONTO KIDS COMPUTER CLUB | js-02
20159
post-template-default,single,single-post,postid-20159,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-02

21 Dec js-02

<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 ********
  var banana = new THREE.Mesh(new THREE.CubeGeometry(100,150,60), 
                              new THREE.MeshNormalMaterial(flat));
  scene.add(banana);
  
  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);
  
  document.addEventListener('keydown', sendKeyDown);
  
  function animate(){
    requestAnimationFrame(animate);
    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;
    renderer.render(scene, camera);
  }
  
  //animate();
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
No Comments

Sorry, the comment form is closed at this time.