title: Getting User input with javascript while using three.js?
body: <p>I am working off of this three.js example (<a href="http://threejs.org/examples/#webgl_interactive_cubes" rel="nofollow">http://threejs.org/examples/#webgl_interactive_cubes</a>) and am trying to find a way for the user to add boxes with specified X, Y, &amp; Z positions.</p>
  
  <p>I could do this with a javascript prompt</p>
  
  <pre><code>var boxes = prompt("X Position", 500); // 500 = Default position
  </code></pre>
  
  <p>However, I want to make it possible for the user to enter multiple fields (E.g. x, y, z positions; size of box, etc.), so I want to add input boxes. The only way I know how to do this is to use html/css/javascript with something like this - </p>
  
  <pre><code>&lt;!-- CSS formating of Input Boxes --&gt; 
  &lt;style type = "text/css"&gt;
           #x_pos {
              position: absolute;
              bottom: 120px;
              left: 10px;
              width: 130px;
              background-color: #3c4543;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              border: 2px solid #000000;
              font-family: Futura; 
          }
          ... Repeat for #y_pos &amp; #z_pos
  &lt;/style&gt;
  
  &lt;!-- Adding a div for each Input Box --&gt;
  &lt;div id="x_pos"&gt;
      &lt;input type="text" id="xpos"&gt;
  &lt;/div&gt;
  ... Repeat for #y_pos &amp; #z_pos
  
  &lt;h1&gt;Add Node here...&lt;/h1&gt;
  
  &lt;!--Allowing user to add input to the Input Box and saving that value as the x, y, &amp; z positions --&gt;
  &lt;script text="text/javascript"&gt;
  
  var xPosition;
  $(document).ready(function(){            
      $('#xpos').val('Longitude');
      $("#xpos").change(function(){
          xPosition = $('#xpos').val();
      })
      ... Repeat for #ypos &amp; #zpos
  });
  </code></pre>
  
  <p>However, while I can get the Header and input box to appear, they have absolutely no functionality. I can't type anything in the text boxes and I can't add .click(function () ...) functionality to the h1 text. It's almost like all html and javascript functionality I am used to has been disabled by the rest of the three.js code. My final goal will be to have .click call a function that I can have the divs I defined above appear underneath the h1 "Add Node here..." like this (<a href="http://jsfiddle.net/zsfE3/9/" rel="nofollow">http://jsfiddle.net/zsfE3/9/</a>).</p>
  
  <p>Can anyone explain to me what is going on here and how I might be able to fix it? Or does anyone have a better way to do this? Thanks guys for any help!</p>