Font load failed

Questions
,
1 
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)
        this.scene.add(text)
        this.renderer.render(this.scene, this.camera)
      }, undefined, error => {
        this.$msg.error(`字体加载失败，请刷新后重试,${error}`)
      })

截屏2023-04-07 13.15.24
截屏2023-04-07 13.15.24936×630 2.13 KB

just liek this, why?

2

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

bevelThickness: 1.0,
bevelSize: 0.8,
bevelSegments: 0.5
3

Graphics disappeared from the interface,

4

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.

5

thanks,i will have a try

6
7

Try the following changes:

  • line 62: change 100 → 1
  • line 125: change 40 → 0.1
  • line 127: change true → false

Result:

image

8

thank you vuery much

1 Like