Untitled


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Three.js チュートリアル１</title>
    <script src="/javascripts/Three.js"></script>
    <style>
      body {
        background: #333;
        color: black;
        font-size: 16em;
      }
      #canvas {
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    Paul<br>Kinlan
    <div id=canvas></div>
  </body>
  <script>
    var elem = document.querySelector('#canvas')
      , width = elem.clientWidth
      , height = elem.clientHeight
    var renderer = new THREE.WebGLRenderer({antialias: true});
    var speed = 10, ystep = 500, rstep = 25, frames = 200;
    renderer.setSize(width, height);

    elem.appendChild(renderer.domElement);
    // renderer.setClearColorHex(0xEEEEEE, 1.0);
    renderer.clear();

    var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
    camera.position.y = 1000;
    camera.position.x = 20;
    camera.position.z = 100;
    //camera.position.z = 300;
    camera.lookAt({x:0, y:0, z:-1});
    var scene = new THREE.Scene();


    for( var i = 0; i < frames; i += 1 ) {
      var img = i % 2 === 0 ? "1.jpg" : "2.jpg";
      var texture = new THREE.ImageUtils.loadTexture('/images/' + img);

      var plane = new THREE.Mesh(
        new THREE.PlaneGeometry(250, 150),
        new THREE.MeshBasicMaterial({map: texture})
        // new THREE.MeshBasicMaterial({wireframe: true, color: 0xff0000})
      );
      plane.position.y = -1 * i * ystep;
      plane.position.z = 200 * Math.sin(Math.PI * i * rstep / 360);
      plane.position.x = 300 * Math.cos(Math.PI * i * rstep / 2/ 360);
      scene.add(plane);
    }
    renderer.render(scene, camera);


    var c = 0;
    var timer = setInterval(function(){
      camera.position.y -= (ystep / speed);
      var z_ = Math.sin(Math.PI * c * rstep / speed / 360);
      var x_ = Math.cos(Math.PI * c * rstep / speed  / 2 / 360);

      // camera.position.x = x_ * 300 + Math.random()* 10;
      camera.position.x = x_ * 10 +z_ * 300;
      camera.position.z = 50 + c * x_ + x_ * 200;
      // camera.lookAt({x: 0, y: 0, z:1});
      renderer.render(scene,camera);
      c += 1;

    }, 30);
    setTimeout(function(){
      clearInterval(timer);
      document.querySelector("#canvas").innerHTML = "";
    }, 5000);
  </script>
</html>