How to get smooth shading on TextGeometry, please 🙏

Questions
,
22

Thanks a lot for everything !
Yeah I think it’s because the params are too “small” it’s messing up the geo. :thinking:

23

Here is the final result btw : Under Construction | Evry_Paris-Saclay - iGEM 2022
(Original idea from Ilithya)

24

Its depend of size geometry. 1=Meters or 1=kilometers.

25

I guess the easiest solution would be to just keep the same settings as in the example from the Three.js manual I linked above, and then simply set the object’s scale appropriately, e.g. (disregard my custom font JSON path):

  const normalMaterial = new THREE.MeshNormalMaterial();
  const loader = new FontLoader();
  loader.load("http://localhost:8080/helvetiker_regular.typeface.json", function(font)
  {
    const textGeometry = new TextGeometry('Under Construction !' + '\nEstimated delivery :' + '\nSoon™',
    {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
    });
    const textMesh = new THREE.Mesh(textGeometry, normalMaterial);
    textGeometry.center();
    textGeometry.computeBoundingBox();
    scene.add(textMesh);
    const stextMesh = new THREE.Mesh(textMesh.geometry.clone(), new THREE.MeshNormalMaterial());
    stextMesh.geometry = BufferGeometryUtils.mergeVertices(stextMesh.geometry, 1);
    stextMesh.geometry.computeVertexNormals();
    stextMesh.position.set(10, 10, 10);
    stextMesh.scale.setScalar(1 / 160);
    scene.add(stextMesh);
  });

That way, there’s no need to guess what value is needed for the tolerance parameter (I tried in vain to figure that out, but it’s pointless in this case). I set the scale to 1 / 160 because of the ratio between font sizes, i.e. 80 / 0.5 = 160, but you can adjust it to suit your needs, considering that fonts don’t size up on a per pixel basis. Same for positioning.

P.S. The stextMesh name comes from “smooth text mesh”, in case anyone is curious. :laughing:

1 Like
26

Thanks so much to you and everyone for all your help, you guys rock !! :heart_eyes:

27

thank youuuuu

1 Like
28

For the record, if one looks closely, there are still some places where vertices are not properly joined / merged. If that’s the case, just lower the tolerance parameter in the mergeVertices() function from 1 to, say, 0.5 or similar, to “close the gaps” in the letters’ geometries.

While a great idea and having a nice effect - credit to @Chaser_Code for it - I would personally still choose “subdividing” geometry by increasing the number of segments. It’s heavier on the CPU but it’s “built in” and doesn’t need further adjustments.