Three.js Vue 如何加载字体，和遇到问题解决： 中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0_threejs text3d 字体 不显示 vue3

Three.js Vue 中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0

一、转换字体文件到 json

要想在 three.js 中使用字体文件，需要将其转换为 .json 文件，再用 Three.FileLoader() 加载
官方提到的转换工具如下：

在线字体转换工具https://gero3.github.io/facetype.js/

如我转换后的字体文件

二、使用 FontLoader 载入字体文件

在 FontLoader 的回调方法内部完成之后的一些操作

  // font
  new Three.FontLoader().load('/font/LLPixel_Regular.json', font => {
      const textGeometry = new Three.TextGeometry('Three.js', {
          font: font,
          size: 10, // 字体大小
          height: 4, // 字体厚度
          curveSegments: 20,
          bevelEnabled: false,
          bevelThickness: 1,
          bevelSize: 0,
          bevelOffset: 0,
          bevelSegments: 15
      })
      const textMetiral = new Three.MeshBasicMaterial({
          color: 0x0090ff
      })
      this.text = new Three.Mesh(textGeometry, textMetiral)
      this.text.position.set(0,0,50)
      // 添加到 scene
      this.scene.add( this.text )
      this.render() // 添加完成后渲染一下画面
  }, xhr=>{}, err=>{console.log(err)})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、字体载入时遇到的错误

在 Vue 中 使用 Three.js 载入字体的时候遇到无法识别的问题

其本质是没有找到对应的 .json 文件路径
这里不应该放到 src 目录，应该放到 public 目录下

  new Three.FontLoader().load('/font/LLPixel_Regular.json', font => {})
1

对应的是 /public/font/LLPixel_Regular.json

四、结果