Making dynamic text with Three.js and dat.gui

Question

I want to make a dynamic render of user inputted text using three.js and dat.gui, so far i've made this to render out the text:

var displayGui = function(){
  var gui = new dat.GUI();
  var parameters = {
    message:"sample",
    spinVelocity: 0
  }
  //Adds Text controls
  var myText = gui.add(parameters, 'message').name('Text');
  myText.onChange(function () {
      //adds text
      var loader = new THREE.FontLoader();
      loader.load('fonts/OpenSansBold.json', function(font) {
          console.log(myText);
          var textGeo = new THREE.TextGeometry(myText, {
              font: font,
              size: 200,
              height: 50,
              curveSegments: 12,
              position: 3,
              bevelThickness: 2,
              bevelSize: 5,
              bevelEnabled: true,
          });

          var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });

          var mesh = new THREE.Mesh(textGeo, textMaterial);
          mesh.position.set(100, 100, 100);
          scene.add(mesh);
      });
  });
  gui.add(parameters, 'spinVelocity').name('Spin');
  gui.open();

  };

However, as you can see on here, it just renders out a big red 3D text that says [object Object] , i have suspected that this may be because var myText is an object and not a string, so i tried to String(myText) however, it did not change much and it still did not work.

Is this not working because the text is not a string or is this because three.js is not recognizing the text inputted by the user on the dat.gui interface?

Have a look at the official example about events [here](https://workshop.chromeexperiments.com/examples/gui/#7--Events). — prisoner849, May 13 '18 at 18:33

score 2 · Answer 1 · answered May 13 '18 at 19:41

You should not be trying to load the font each time your dat.gui fires. Your code has a horrible performance problem, and it's likely that you would run out of memory after fiddling with the gui for a while.

My understanding is that this code creates a new instance of geometry each time you change the value in the gui, and never disposes of them. You're filling up your gpu with copies of this mesh.

Specific to your question, you're using datgui wrong:

console.log(myText); //logs the intance of a gui object (a JS object with methods and such)

change to:

console.log(parameters.message);

To fix the reloading issue, cache your font

var myFont
loader.load('fonts/OpenSansBold.json', function(font) {
   myFont = font
   //your gui is not ready until the font comes so, for example you could instantiate it here
   gui.add(...).onChange(function(){..})
})

score 1 · Answer 2 · edited May 13 '18 at 19:43

1

Change line

myText.onChange(function () {

to

myText.onChange(function (value) {

Then value will contain the new value of the input.

edited May 13 '18 at 19:43

pailhead

5,162
2
25
46

answered May 13 '18 at 18:29

Kevin Renaers

93
1
6

Can you please fix the formatting of your code? Also, have you tested this? – pailhead May 13 '18 at 19:34
First of all, how can I fix the formatting as it's just an indication to fix one line in the example code? And yes, I have tried it like this and it works. Also I can refer to the comment of @prisoner849 which links to an example that uses the value variable the same way as I suggest. – Kevin Renaers May 13 '18 at 19:39
The problem specifically here (although i didn't test) is that it takes some time to parse the font each time, while you are typing, it may be an old value in there. Referencing the `parameters` object seems to be more in-line with the pattern in the examples. – pailhead May 13 '18 at 19:45
Since you attach the listener to the `myText` variable (which contains the text), wouldn't it be much more straight forward to use the value that will be the new content of the `myText` input as it's the value you would like to show? – Kevin Renaers May 13 '18 at 19:50
I think that this is a better approach, but i must admit that i'm a bit confused as to which value would end up being used the way OP posted the code. – pailhead May 13 '18 at 19:56
Indeed, and at the moment the OP also discards the changes to the `spinVelocity`. So when those changes are also important, the `parameters` variable will probable be better to attach the listener to. Nevertheless, it will also be better to cache the font as you suggested. – Kevin Renaers May 13 '18 at 20:14

Making dynamic text with Three.js and dat.gui

2 Answers2