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

最新推荐文章于 2025-05-28 11:51:42 发布

十月ooOO

最新推荐文章于 2025-05-28 11:51:42 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # JS # Three.js 文章标签： javascript vue.js json

本文链接：https://blog.csdn.net/KimBing/article/details/121774459

JS 同时被 2 个专栏收录

130 篇文章

订阅专栏

Three.js

1 篇文章

订阅专栏

本文介绍了在Three.js和Vue结合的项目中如何解决字体加载问题。首先，通过在线工具将字体文件转换为.json格式。然后，使用Three.js的FontLoader加载.json字体文件，注意文件应放在public目录下。当出现'Unexpected token in JSON at position 0'错误时，检查字体文件路径是否正确。最后，展示了加载字体并创建TextGeometry的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

在 Vue 中使用 Three.js 载入字体的时候遇到无法识别的问题
在这里插入图片描述

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

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

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

在这里插入图片描述

四、结果

在这里插入图片描述