Three.js + DAT GUI to control and 3D Text Geometry


Hey there =^-^=

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 & z to be controlled and the text input box to show up.

I can’t figure out what I’m doing wrong with the text input scratched head so any help would be appreciated =^-^=

here is a link to what i’ve got so far:
here is the code that deals with the 3d text geometry + dat GUI:

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"

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( * 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();

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();

  { 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();

var folder3 = gui.addFolder('size');

{   text.position.x = value;   });
{   text.position.y = value;   });
{   text.position.z = value;   });

if I end up figuring it out I’ll post back here.

Javascript Help

The text variable var theText just represents the text “FEED ME”. When you create a new THREE.TextGeometry and pass in theText I believe that is is actually copying the contents of theText, in a sense, detaching it from the original var theText. Thus, when you go to set theText = newValue in your line1.onChange callback, you successfully set var theText to the new value, but the object representing the geometry (i.e. var text3d) knows nothing about the change.

So, I believe that you can fix this by accessing the text member variable of the text3d instance in your onChange() callback OR create a new THREE.TextGeometry each time (which doesn’t seem very efficient).

That said, any way you go (I believe) you’ll have to update your mesh, add it to your scenegraph, etc.

All of that said … I’ve never used Three.js … so someone like @brannondorsey or @monks might be able to point you in a better direction :smile:


Just a small update – I took a look at the source and I believe that you’ll be best off creating a new function called createText() (or something) then you’ll need to go through the process of creating a new THREE.TextGeometry object. The reason for this is that inside the THREE.TextGeometry the text itself is not stored as a member variable, but is immediately passed to text utilities that create the geometries. Thus THREE.TextGeometry just knows how to make a single Geometry representing a text and various settings, but it does not have the capabilities to dynamically update the internal text. Anyway, creating a function that creates the THREE.TextGeometry, makes the meshes, adds it back to the scenegraph etc will probably be the way to go. :thumbsup:

More here: