CODEWITHSUNDEEP
three.js
jkjaikrishna
jkjaikrishna

Reputation: 96

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

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?

Upvotes: 7

Views: 5591

Answers (1)

Hitesh Sahu
Hitesh Sahu

Reputation: 45062

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;
  };

Upvotes: 6

Related Questions