title: load texture from user upload to geometry in three.js
body: <h2>I'm new to three.js and javascript (coding in general) but I'm having a lot of fun experimenting with the possibilities and have created a few small Three.js scenes with lights, custom geometry from 3D JSON models to develop my skills to be able to tackle my ultimate goal of building a 3D website.</h2>
  
  <p>I'm currently entirely stuck on the issue of allowing a user to upload an image file from an HTML 'input' file tag, and have that image appear on a PlaneGeometry mesh that already exists in the scene with a dummy texture already loaded into the material.</p>
  
  <p>I can have the texture image appear on the plane without issue, and I have the HTML 'input' file button appearing onscreen, I can click it and it will load an image but it's not linked to anything in three.js and that's where I get stuck, I don't understand how to proceed.</p>
  
  <p>I found this <a href="http://jsfiddle.net/uJqbJ/4/" rel="noreferrer">JSFIDDLE EXAMPLE</a> that I can see works but I can't figure out how to use it to add a custom texture to a geometry and material that already exist.</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- three.js container --&gt;
  &lt;input id="userImage" type="file" /&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;script type="x-shader/x-vertex" id="vertexShader"&gt;
      varying vec2 vUv;
  
      void main() {
          vUv = uv;
          gl_Position = vec4(uv * 2. - vec2(1, 1), 0., 1.);
      }
  &lt;/script&gt;
  &lt;script type="x-shader/x-fragment" id="fragmentShader"&gt;
      precision highp float;
  
      varying vec2 vUv;
      uniform sampler2D texture1;
      void main() {
          gl_FragColor = texture2D(texture1, vUv.xy);
      }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/three.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      init()
  
      function init(){
          $("#userImage").change(function () {
              var image = document.createElement( 'img' );
              var texture = new THREE.Texture( image );
              image.onload = function()  {
                  texture.needsUpdate = true;
          };
  
          userImage = $("#userImage")[0];
          if (userImage.files &amp;&amp; userImage.files[0]) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                  image.src = e.target.result;
              };
  
              reader.readAsDataURL(userImage.files[0]);
          }
  
          camera = new THREE.OrthographicCamera();
          renderer = new THREE.WebGLRenderer({
              antialias: false
          });
          renderer.setSize(window.innerWidth, window.innerHeight);
          shader = new THREE.ShaderMaterial({
              vertexShader: document.getElementById('vertexShader').textContent,
              fragmentShader: document.getElementById('fragmentShader').textContent,
              uniforms: {
                  texture1: {
                      type: "t",
                      value: texture
                  }
              }
          });
          scene = new THREE.Scene();
          scene.add(new THREE.Mesh(new THREE.PlaneGeometry(1), shader));
  
          $('#container').append(renderer.domElement);
  
              animate();
  
          function animate() {
              requestAnimationFrame(animate);
  
              renderer.render(scene, camera);
          }
      }); 
      }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <h2>Would anyone mind sharing an example of how they would go about allowing a user uploaded texture to be loaded onto an already existing texture, material and object??</h2>
  
  <p><a href="https://i.stack.imgur.com/kmrff.png" rel="noreferrer">image of current three.js result with HTML loader at the top</a></p>