KensakuKOMATSU/gist:2880524

## gistfile1.html

<!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>

	<!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>