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

四、结果

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。