How to control size and color of textGeometry with dat.gui?

Question

I found out that I could use dat.gui to control size and color of textGeometry besides changing color and size for every other scene through editing .js file. But probably bad architecture of my code, I am not able to control or even add gui folder to the scene. It probably has something to do with FontLoader that I'm using.

I tried placing dat.gui inside and outside my textGeometry creation function, none of them worked. As far as I understood, every time size or color changes it should dispose and remove the created mesh to create a new one with the new color/size parameters (i also update for every each keydown event to create a new mesh so that's my thought).

textGeometry, textMesh, textMaterial etc. are defined in global

function textCreation() {
  const fontLoader = new FontLoader();
  fontLoader.load(
    "node_modules/three/examples/fonts/droid/droid_sans_bold.typeface.json",
    (droidFont) => {
      textGeometry = new TextGeometry(initText, { //initText variable gets updated with each keydown
        size: 5,
        height: 2,
        font: droidFont,
        parameters: {
          size: 5,
          height: 2,
        },
      });
      textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      textMesh = new THREE.Mesh(textGeometry, textMaterial);

      group = new THREE.Group();
      group.add(textMesh);
      scene.add(group);

    }

And here is the dat.gui controller that I tried to place in and out of this function.

let textFolder = gui.addFolder("Text Controls");
textFolder.add(textGeometry, "size", 10, 20).onChange(function () {
textGeometry.setSize(textGeometry.size);
// Probably dispose and remove old mesh from scene and create mesh with these new parameters
});

textFolder.addColor(textGeometry, "color").onChange(function () {
textGeometry.setColor(textGeometry.color);

I couldn't manage to add ANY dat.gui controller without breaking the scene. By the way I'm kinda new to JavaScript and three.JS so further explanations are welcome if there are any.

Mugen87 · Accepted Answer · 2022-12-13T12:37:40.053

textGeometry.setSize(textGeometry.size);

This does not work since there isn't a setSize() method. You have to call dispose() on the existing geometry and then create a new one based on your updated parameters. You then assign the new geometry to your text mesh. So something like:

const params = {
    color: '#ffffff',
    size: 5
};

textFolder.add(params, "size", 10, 20).onChange(function (value) {

    textGeometry.dispose();
    textGeometry = new TextGeometry(initText, {
            size: value,
            height: 2,
            font: droidFont
    });
    textMesh.geometry = textGeometry;

});

The material's color can be changed without creating a new object.

textFolder.addColor(params, 'color').onChange(function (value) {

    textMaterial.color.set(value);

});

Thank you for your clear explanation. I made changes according to your solution and it is working as expected now. — rju7n, Dec 13 '22 at 12:05

How to control size and color of textGeometry with dat.gui?

1 Answers1