TORONTO KIDS COMPUTER CLUB | js-04-1
20171
post-template-default,single,single-post,postid-20171,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-04-1

27 Dec js-04-1

<body></body>
<script src="/three.js"></script>
<script src="/controls/FlyControls.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 bodyShape = new THREE.CubeGeometry(30,50,30);
  var cover = new THREE.MeshNormalMaterial('flat');
  var body = new THREE.Mesh(bodyShape, cover);
  //body.add(camera);
  camera.add(body);
  
  body.rotation.set(-Math.PI/2, 0,0);
  body.position.set(0, -200,-500);
   
  var headShape = new THREE.CylinderGeometry(5,21,150, 4);
  var head = new THREE.Mesh(headShape, cover);
  body.add(head);
  head.rotation.set(0,Math.PI/4, 0);
  head.position.set(0,100,0);
  
  var wingShape = new THREE.CylinderGeometry(10,15,100,2);
  var w1 = new THREE.Mesh(wingShape, cover);
  body.add(w1);
  var wendShape = new THREE.CylinderGeometry(3,3,50);
  var wend1 = new THREE.Mesh(wendShape, cover);
  w1.add(wend1);
  wend1.position.set(0,50,-20);
  wend1.rotation.set(Math.PI/2, 0, 0);
  w1.rotation.set(Math.PI/2, 0, Math.PI/3);
  w1.position.set(-58,0,30);
  var w2 = new THREE.Mesh(wingShape, cover);
  body.add(w2);
  var wend2 = new THREE.Mesh(wendShape, cover);
  w2.add(wend2);
  wend2.position.set(0,50,-20);
  wend2.rotation.set(Math.PI/2, 0, 0);
  w2.rotation.set(Math.PI/2, 0, -Math.PI/3);
  w2.position.set(58,0,30);
  
  var w3 = new THREE.Mesh(wingShape, cover);
  body.add(w3);
  var wend3 = new THREE.Mesh(wendShape, cover);
  w3.add(wend3);
  wend3.position.set(0,50,20);
  wend3.rotation.set(Math.PI/2, 0, 0);
  w3.rotation.set(-Math.PI/2, 0, Math.PI/3);
  w3.position.set(-58,0,-30);
  
  var w4 = new THREE.Mesh(wingShape, cover);
  body.add(w4);
  var wend4 = new THREE.Mesh(wendShape, cover);
  w4.add(wend4);
  wend4.position.set(0,50,20);
  wend4.rotation.set(Math.PI/2, 0, 0);
  w4.rotation.set(-Math.PI/2, 0, -Math.PI/3);
  w4.position.set(58,0,-30);
  
  var sunlight = new THREE.DirectionalLight('white', 0.9);
  sunlight.position.set(200,300,0);
  scene.add(sunlight);
  
  
  
  
  function r(max){
    if (max) return max * Math.random();
    return Math.random();
  }
  
  function rColor(){
    return new THREE.Color(r(), r(), r());
  }
  
  function makePlanet(){
    var size = r(50);
    var x = r(40000)-20000;
    var y = r(40000)-20000;
    var z = r(40000)-40000;
    var c = rColor();
    // var c = new THREE.Color(0.6, 0.8, 1);
    var planet = new THREE.Mesh(new THREE.SphereGeometry(size),
                                new THREE.MeshPhongMaterial({color: c}));
    scene.add(planet);
    planet.position.set(x, y, z);
  }
  for (var i=0; i<2000; i++){
    makePlanet();
  }
  
  var controls = new THREE.FlyControls(camera);
  controls.movementSpeed = 1000;
  controls.rollSpeed = 0.4;
  controls.autoForward = true;
  
  var clock = new THREE.Clock();
  function animate(){
    var delta = clock.getDelta();
    controls.update(delta);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  animate();
  
  // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
No Comments

Post A Comment