Font load failed

const loader = new FontLoader()
      loader.load('fonts/font.json', font => {
        const material = new MeshBasicMaterial({ color: 'green' })
        const geometry = new TextGeometry('0', {
          font: font,
          size: 10,
          height: 5,
          curveSegments: 12,
          bevelEnabled: true,
          bevelThickness: 10,
          bevelSize: 8,
          bevelSegments: 5
        const text = new Mesh(geometry, material)
      }, undefined, error => {

just liek this, why?

How does it look like if you reduce the bevel values 10 times?

bevelThickness: 1.0,
bevelSize: 0.8,
bevelSegments: 0.5

Graphics disappeared from the interface,

There might be many reasons that cause such result. The most probable are:

  • there is something wrong with the font in the JSON file – you can try another font to see whether this is the problem
  • the character is drawn behind the grid
  • the camera looks at the text from strange positon and this makes the character unrecognizable
  • the near/far planes of the camera frustum cut off the object

In any case, when the bevel is too much, this significantly exaggerate the text, makes it much larger and unrecognizable. So it might be better to work with non-bevel text and when it is OK, then add bevel.

Would it be possible to recreate the problem in CodePen, jsFiddle, CodeSandBox? Otherwise it is hard to guess anything.

thanks,i will have a try

Try the following changes:

  • line 62: change 1001
  • line 125: change 400.1
  • line 127: change truefalse



thank you vuery much

1 Like