title: Dat GUI + Three.js to get user inputted text to create the 3d text geometry that is updated in real time
body: <p>I'm trying to use Dat GUI + Three.js to get user inputted text to create the 3d text geometry that is updated in real time. So far I have been able to get the positions x, y &amp; z to be controlled and the text input box to show up.</p>
  
  <p>I can't figure out what I'm doing wrong with the text input so any help would be appreciated </p>
  
  <p>here is a link to what i've got so far: <a href="http://nuevil.com/index3.html" rel="nofollow">http://nuevil.com/index3.html</a> here is the code that deals with the 3d text geometry + dat GUI:</p>
  
  <pre><code>var theText = "FEED ME";
  var hash = document.location.hash.substr( 1 );
    if ( hash.length !== 0 ) { theText = hash; }
  
    var text3d = new THREE.TextGeometry( theText, {
      size: 80,
      height: 80,
      curveSegments: 2,
      font: "helvetiker",
      weight: "bold"
    });
    text3d.computeBoundingBox();
  
    var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
  
    var textMaterial = new THREE.MeshNormalMaterial;
    text = new THREE.Mesh( text3d, textMaterial );
    text.position.x = centerOffset;
    text.position.y = 0;
    text.position.z = 0;
    // text.position.z = Math.tan( Date.now() * 2 ) * 20;
    text.rotation.x = 0;
    text.rotation.y = Math.PI * 2;
    parent = new THREE.Object3D();
    parent.add( text );
    scene.add( parent );
  
    var axes = new THREE.AxisHelper();
    scene.add(axes);
  
  
    gui = new dat.GUI();
  
    parameters = 
    {
      x: 0, y: 30, z: 0,
      color: "#ff0000", // color (change "#" to "0x")
      theText: "",
      opacity: 1, 
      visible: true,
      material: "Phong",
      reset: function() { resetText() }
    };
  
    var folder1 = gui.addFolder('text');
    var line1 = folder1.add( parameters, 'theText');
    // var line2 = folder1.add( text, '').step(1).listen();
    // var line3 = folder1.add( text, '' ).step(1).listen();
    // folder1.open();
  
    line1.onChange(function(newValue)
      { theText = newValue});
  
    var folder2 = gui.addFolder('position');
    var textX = folder2.add( parameters, 'x' ).min(-400).max(200).step(1).listen();
    var textY = folder2.add( parameters, 'y' ).min(0).max(100).step(1).listen();
    var textZ = folder2.add( parameters, 'z' ).min(-200).max(200).step(1).listen();
    // folder2.open();
  
    var folder3 = gui.addFolder('size');
  
    textX.onChange(function(value) 
    {   text.position.x = value;   });
    textY.onChange(function(value) 
    {   text.position.y = value;   });
    textZ.onChange(function(value) 
    {   text.position.z = value;   });
  </code></pre>