Advertisement
harraps

Three.js test

Apr 17th, 2015
207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>My first Three.js app</title>
  4.         <style>
  5.             body { margin: 0; }
  6.             canvas { width: 100%; height: 100% }
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <script src="../javascripts/three.min.js"></script>
  11.         <script>
  12.            
  13.             var scene = new THREE.Scene();
  14.             var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  15.             var renderer = new THREE.WebGLRenderer();
  16.             renderer.setSize( window.innerWidth, window.innerHeight );
  17.             document.body.appendChild( renderer.domElement );
  18.            
  19.             var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  20.             var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
  21.             var cube = new THREE.Mesh( geometry, material );
  22.             scene.add( cube );
  23.             camera.position.z = 5;
  24.            
  25.             var color = new THREE.Color( 1, 0, 0 );
  26.             var colorCurrent = "r";
  27.             var colorLerp = 0;
  28.            
  29.             function render() {
  30.                 requestAnimationFrame( render );
  31.                
  32.                 if( colorLerp >= 0.03 && colorCurrent == "r" ){
  33.                     color = new THREE.Color( 0, 1, 0 );
  34.                     colorCurrent = "g";
  35.                     colorLerp = 0;
  36.                 }else if( colorLerp >= 0.03 && colorCurrent == "g" ){
  37.                     color = new THREE.Color( 0, 0, 1 );
  38.                     colorCurrent = "b";
  39.                     colorLerp = 0;
  40.                 }else if( colorLerp >= 0.03 && colorCurrent == "b" ){
  41.                     color = new THREE.Color( 1, 0, 0 );
  42.                     colorCurrent = "r";
  43.                     colorLerp = 0;
  44.                 }
  45.                
  46.                 cube.material.color.lerp( color, colorLerp );
  47.                
  48.                 colorLerp += 0.0001;
  49.                
  50.                 cube.rotation.x += 0.01;
  51.                 cube.rotation.y += 0.01;
  52.                 cube.rotation.z += 0.01;
  53.                
  54.                 renderer.render( scene, camera );
  55.             }
  56.             render();
  57.            
  58.         </script>
  59.     </body>
  60. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement