daily pastebin goal
67%
SHARE
TWEET

Untitled

a guest Oct 17th, 2018 100 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>Three.js チュートリアル1</title>
  7.     <script src="/javascripts/Three.js"></script>
  8.     <style>
  9.       body {
  10.         background: #333;
  11.         color: black;
  12.         font-size: 16em;
  13.       }
  14.       #canvas {
  15.         position: absolute;
  16.         left: 0; top: 0; right: 0; bottom: 0;
  17.         border: 1px solid gray;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     Paul<br>Kinlan
  23.     <div id=canvas></div>
  24.   </body>
  25.   <script>
  26.     var elem = document.querySelector('#canvas')
  27.       , width = elem.clientWidth
  28.       , height = elem.clientHeight
  29.     var renderer = new THREE.WebGLRenderer({antialias: true});
  30.     var speed = 10, ystep = 500, rstep = 25, frames = 200;
  31.     renderer.setSize(width, height);
  32.  
  33.     elem.appendChild(renderer.domElement);
  34.     // renderer.setClearColorHex(0xEEEEEE, 1.0);
  35.     renderer.clear();
  36.  
  37.     var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
  38.     camera.position.y = 1000;
  39.     camera.position.x = 20;
  40.     camera.position.z = 100;
  41.     //camera.position.z = 300;
  42.     camera.lookAt({x:0, y:0, z:-1});
  43.     var scene = new THREE.Scene();
  44.  
  45.  
  46.     for( var i = 0; i < frames; i += 1 ) {
  47.       var img = i % 2 === 0 ? "1.jpg" : "2.jpg";
  48.       var texture = new THREE.ImageUtils.loadTexture('/images/' + img);
  49.  
  50.       var plane = new THREE.Mesh(
  51.         new THREE.PlaneGeometry(250, 150),
  52.         new THREE.MeshBasicMaterial({map: texture})
  53.         // new THREE.MeshBasicMaterial({wireframe: true, color: 0xff0000})
  54.       );
  55.       plane.position.y = -1 * i * ystep;
  56.       plane.position.z = 200 * Math.sin(Math.PI * i * rstep / 360);
  57.       plane.position.x = 300 * Math.cos(Math.PI * i * rstep / 2/ 360);
  58.       scene.add(plane);
  59.     }
  60.     renderer.render(scene, camera);
  61.  
  62.  
  63.     var c = 0;
  64.     var timer = setInterval(function(){
  65.       camera.position.y -= (ystep / speed);
  66.       var z_ = Math.sin(Math.PI * c * rstep / speed / 360);
  67.       var x_ = Math.cos(Math.PI * c * rstep / speed  / 2 / 360);
  68.  
  69.       // camera.position.x = x_ * 300 + Math.random()* 10;
  70.       camera.position.x = x_ * 10 +z_ * 300;
  71.       camera.position.z = 50 + c * x_ + x_ * 200;
  72.       // camera.lookAt({x: 0, y: 0, z:1});
  73.       renderer.render(scene,camera);
  74.       c += 1;
  75.  
  76.     }, 30);
  77.     setTimeout(function(){
  78.       clearInterval(timer);
  79.       document.querySelector("#canvas").innerHTML = "";
  80.     }, 5000);
  81.   </script>
  82. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top