three.js引用FontLoader()报错Unexpected token ＜ in JSON at position 1

Fighting宁

于 2021-03-25 18:37:55 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/weixin_43794749/article/details/115215533

three.js 专栏收录该内容

3 篇文章

订阅专栏

本文讲述了如何修复在使用three.js FontLoader加载字体时遇到的相对路径问题，通过将引入的font.json文件路径从相对路径改为绝对路径，解决了报错问题。具体步骤包括定位错误、修改URL并演示了正确的代码示例。

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

在这里插入图片描述

使用three.js的FontLoader()时，总是报错，文件也是正常的引入的json文件，但是还是报错。
后来各自百度发现是文件路径的问题，报错时我使用的是相对路径

   const loader = new THREE.FontLoader()
      console.log('loader', loader)
      let url = '../../../public/fonts/FZLanTingHeiS-DB-GB_Regular.json'
      loader.load(url, font => {
        console.log('url', url)
        console.log('font', font)
        // var txtGeo = new THREE.TextGeometry('hello world', {
        //   font: font,
        //   size: 0.8,
        //   height: 0.1,
        //   curveSegments: 12,
        //   bevelEnabled: true,
        //   bevelThickness: 0.1,
        //   bevelSize: 0.05,
        //   bevelSegments: 3
        // })
        // var txtMater = new THREE.MeshBasicMaterial({ color: 0x0000ff })
        // var txtMesh = new THREE.Mesh(txtGeo, txtMater)
        // txtMesh.position.set(-2, 2.3, -0.4)
        // this.scene.add(txtMesh)
      })

解决把引入文件的路径修改一下

  let url = '/fonts/FZLanTingHeiS-DB-GB_Regular.json'