title: Why doesn't FileReader pass file to loader.load() used by three.js scene?
body: <p>I'm trying to use FileReader to pass a client side ASCII file to loader.load() but it looks like the file never gets there. The file does appear in the 3D scene if I use <code>loader.load('server path to test_file.stl')</code> instead of <code>loader.load(fileObject)</code>. </p>
  
  <p>I included an alert() function to display the file's ASCII text and that tells me the JavaScript is grabbing and processing the file and there is no Chrome security barrier but apparently I'm not properly passing the file to <code>loader.load()</code>. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      body        {
              background-color:#fea47c;
                  }
  
      div         { 
              position:relative;
              left:200px;           
              top:0px;
              background-color: #eeeeee;
              border:1px solid black;             
              width:550px;
              height:550px;
                  }
  
      canvas      {
              width:550px;
              height:550px;
                  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"&gt;&lt;/script&gt;      
  &lt;script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"&gt;&lt;/script&gt; 
  
  &lt;input type="file" id="pickfile"&gt;&lt;/input&gt;
  
  &lt;script&gt; 
  
     document.getElementById('pickfile').addEventListener('change', readFile, false);
  
      function readFile (evt) 
                  {
      var fileObject = evt.target.files[0];    
      var reader = new FileReader();
      reader.onload = function() {alert(this.result)};    // verifies ASCII file contents were grabbed
      reader.readAsText(fileObject)
                  }
  
          var container, camera, scene, renderer, controls;
  
          init();
          animate();
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              var width = container.clientWidth;
              var height = container.clientHeight;
  
              camera = new THREE.PerspectiveCamera( 35, width / height, .1 , 10000);
  
              camera.position.set( 0, 0, 600);
  
              scene = new THREE.Scene();
  
              controls = new THREE.TrackballControls( camera , container); 
              controls.addEventListener( 'change', render );
  
              // object
  
              var loader = new THREE.STLLoader();
              loader.addEventListener( 'load', function ( event ) {
  
                  var geometry = event.content;
  
                  var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );
  
                  var mesh = new THREE.Mesh( geometry, material );
  
                  scene.add( mesh );
  
              } );
  
              loader.load(fileObject);
  
              // lights
  
              scene.add( new THREE.AmbientLight( 0x222222 ) );
  
              var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
              directionalLight.position = camera.position;
              scene.add( directionalLight );
  
              // renderer
  
              renderer = new THREE.WebGLRenderer( { antialias: true } );
              renderer.setSize( width , height );
              container.appendChild( renderer.domElement );
  
              window.addEventListener( 'resize', onWindowResize, false );
  
  
          }
  
          function addLight( x, y, z, color, intensity ) {
  
              var directionalLight = new THREE.DirectionalLight( color, intensity );
              directionalLight.position.set( x, y, z )
              scene.add( directionalLight );
  
          }
  
         function onWindowResize() {   
  
              camera.aspect = width / height;
              camera.updateProjectionMatrix();
  
              renderer.setSize( width, height );
          }
  
          function animate() {
  
              requestAnimationFrame( animate );
              controls.update();
              render();
  
          }
  
         function render() {
  
             camera.lookAt( scene.position );
             renderer.render( scene, camera );
  
         }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>