How to dynamically change the text of a textGeometry in threeJS?

Question

I tried this:

var fontLoader = new THREE.FontLoader();

        fontLoader.load("/assets/fonts/helvetiker_bold.typeface.json",function(font){ 

            var  text2D = new THREE.TextGeometry(newText.textContent, {
                    size: 200,
                    height: 2,
                    curveSegments: 3,
                    font: font
            });
            var color = new THREE.Color( newText.color );
            var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
            var  text = new THREE.Mesh(text2D , textMaterial);
            text.name = "2D Text 1";

            //Add the text to current scene
            current_scene.add(text);

            //set the elemnt as active element
            activeElement = current_scene.getObjectByName(text.name);
            console.log('activeElement:',activeElement);

        });

        function textData(changedValue){
            activeElement.geometry.parameters.text = changedValue;
        }

But I didn't get any change.Is this the correct method?Or need any updates in Matrix parameter?

Answer 1

You will need to remove and then add new text mesh.

It have a huge performance penalty but unfortunately this the way it is for now.

    //------------Add Text Geometry----------

    //Group to hold mesh
    group = new THREE.Group();
    this.scene.add(group);

   //add clock mesh
    startTime = new Date();
    earthClockMesh = this.getTextMesh(startTime.toLocaleString(), textMaterial);
    group.add(earthClockMesh);


      //------------Update Text  Mesh----------

      //remove old mesh
      group.remove(earthClockMesh);

      //add new mesh
      earthClockMesh = this.getTextMesh(
        new Date(timeNow).toLocaleString(),
        textMaterial
      );
      group.add(earthClockMesh);

Function to create new meshes

getTextMesh = (text, material) => {
    //Number
    var textgeometry = new TextBufferGeometry(
      text,
      Object.assign(
        {},
        {
          font: helvatiker,
          bevelEnabled: false,
          curveSegments: 8,
          bevelThickness: 1,
          bevelSize: 0,
          height: 0.7,
          size: 5
        }
      )
    );
    let numberMesh = new THREE.Mesh(textgeometry, material);
    // wireframe
    var geo = new THREE.EdgesGeometry(numberMesh.geometry); // or WireframeGeometry

    var wireframe = new THREE.LineSegments(geo, wireFrameMaterial);
    numberMesh.add(wireframe);

    // Translate to Center
    return numberMesh;
  };