index.html

<html>

  <head>
    <style>
      body{ margin: 0px; }
      html{ overflow: hidden }
      a{ display: block }
    </style>
  </head>

  <body>


    <a href="examples/plain/"> PLAIN </a>
    <a href="examples/fade/"> FADE </a>
    <a href="examples/shimmer/"> SHIMMER </a>
    <a href="examples/slide/"> SLIDE </a>
    <a href="examples/chaos/"> CHAOS </a>
    <!--<script src="../../lib/three.min.js">             </script>
    <script src="../../lib/jquery.min.js">            </script>
    <script src="../../lib/ShaderLoader.js">          </script>

    <script src="../../lib/ScrollControls.js">        </script>
    
    <script src="../../fonts/UbuntuMono.js">          </script>
    <script src="../../TextParticles.js">             </script>

    <script src="../../passage.js">                   </script>

    <script>


      var camera, renderer, scene , controls;
      
      var textParticles;


      var shaders = new ShaderLoader( 'shaders' );

      shaders.shaderSetLoaded = function(){
        init();
        animate();
      }

      shaders.load( 'vs-text' , 'text' , 'vertex'   );
      shaders.load( 'fs-text' , 'text' , 'fragment' );

      function init(){

        var w = window.innerWidth;
        var h = window.innerHeight;

        camera = new THREE.PerspectiveCamera( 65 , w/h , .001 , 4 );
        camera.position.z = 1;
        camera.position.y = -.4;

        controls = new ScrollControls( camera );
        //controls = new THREE.TrackballControls( camera );
        scene = new THREE.Scene();

        var dpr = window.devicePixelRatio || 1;
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( dpr );
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );


        var font = UbuntuMono( '../../fonts/UbuntuMono.png' );

        var vs = shaders.vertexShaders.text;
        var fs = shaders.fragmentShaders.text;


        // Passage comes from seperate file
        textParticles = new TextParticles( passage , font , vs , fs , {
         letterWidth: .02,
         lineLength: 80   
        });
        
        scene.add( textParticles );

        textParticles.position.x = - textParticles.totalWidth / 2;

        controls.minPos     = -textParticles.totalHeight * 1.2;
        controls.maxPos     =  0;
        controls.multiplier =  .000003 * textParticles.totalHeight;
        controls.dampening  = .95;

        window.addEventListener( 'resize', onWindowResize, false );

      }

      
      function animate(){

        requestAnimationFrame( animate );
        controls.update();
        renderer.render( scene , camera );
      }


      function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

    </script>-->

  </body>
</html>