title: How do I submit and use text with a button to upload objects?
body: <p>I'm trying to load obj files using three.js and webGL. Currently I can load one object by directly changing the code, but I want users to be able to submit their own .obj files. </p>
  
  <p>So far, this is the code that I have. I tried using various examples but I can't really grasp how to use it correctly. I think I might have to write a function to update, but would that require redoing everything in init? (By "redo" I pretty much mean copy/paste.) Is there an easier way of doing it?</p>
  
  <p>relevant parts of html file:</p>
  
  <pre><code>&lt;form id="upload" method="get"&gt;
      .obj Upload: &lt;input type="text" size="20" name="objfile" id="objfile"&gt;
      &lt;!-- &lt;input type="button" id="objsubmit" value="Send"&gt; --&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript" src="cubemain.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>cubemain.js:</p>
  
  <pre><code>var scene, camera, renderer;
  var container;
  var objFile;
  
  window.onload=function() {
      init();
      render();
  }
  
  function init() {
  
      // upload
      objFile = document.getElementById("objfile");
  
      // set up scene, camera, renderer
      scene = new THREE.Scene();
  
      var FOV = 70;
      var ASPECT = window.innerWidth/window.innerHeight;
      var NEAR = 1;
      var FAR = 1000;
      camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR);
  
      // move camera back otherwise in same position as cube
      camera.position.z = 5;
  
      var light = new THREE.AmbientLight(0x101030);
      scene.add(light);
  
      var directionalLight = new THREE.DirectionalLight( 0xffeedd );
      directionalLight.position.set( 0, 0, 1 );
      scene.add( directionalLight );
  
      // use OBJLoader
      var loader = new THREE.OBJLoader();
      loader.load(objFile.value + ".obj", function(object) {
          scene.add(object);
      });
  
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(.70*window.innerWidth, .75*window.innerHeight);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColor(0xCC99FF, 1);
  
      var controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  }
  
  function render() {
      requestAnimationFrame(render);
  
      renderer.render(scene, camera);
  }
  </code></pre>