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 的回调方法内部完成之后的一些操作

// fontnew 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)// 添加到 scenethis.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

四、结果

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

  1. js Uncaught SyntaxError: Unexpected token , in JSON at position xxx at JSON.parse问题解决

    问题描述: Uncaught SyntaxError: Unexpected token , in JSON at position 4100 at JSON.parse JSON.Parse()方法 ...

  2. 解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX

    第一种情况修改下面这个位置 第二种情况修改 如果还是不行就把模式改成hash

  3. 微信小程序 Unexpected token in JSON at position 0 设置二维码,并且使用js中JSON.parse()函数将二维码返回的值转化为json格式

    代码报错: Unexpected token in JSON at position 0 使用二维码生成器, JSON.parse()函数 1.可以随便在网上找一个生成二维码的网站 本人用的是这个 二 ...

  4. chunk-vendors.fcca6113.js:1 Uncaught SyntaxError: Unexpected token ‘<‘

    由于配置了 问题三.因为前端是使用的vue,结果在加载资源的时候碰到浏览器报错:Uncaught SyntaxError: Unexpected token < 具体现象是js文件夹下的所有js ...

  5. js常见报错之Unexpected token in JSON at position

    js常见报错之Unexpected token ] in JSON at position 结合他人出错总结,出现这个报错提示,根本原因只有一个json解析异常,所以json的返回数据注意检查其返回内 ...

  6. 【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token ...

    使用shiro搭建项目过程中,总是出现登录页面 登录第一次有效果,登陆第二次出现302状态码,第三次又有效果,第四次又没有效果的局面. 因此,采用ajax提交页面登录的用户名和密码,但是在引用js的过 ...

  7. Vue Uncaught SyntaxError: Unexpected token ‘<‘ 路由问题

    最近在部署vue项目是遇到,Uncaught SyntaxError: Unexpected token '<' 路由问题,项目能够正常访问,但是每次刷新之后,会显示空白页面.最后经过分析,是路 ...

  8. Uncaught SyntaxError: Unexpected token ‘<‘ (at chunk-vendors.js:1:1) app.js:1 Uncaught SyntaxError:

    系统部署完成后,控制套报错: Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.js:1:1) app.js:1 Unca ...

  9. chunk-vendors.7142f8da.js:1 Uncaught SyntaxError: Unexpected token ‘<‘

    这是我vue 打包后 用 serve -s dist 预览发现的 原因  在vue.config.js 中所配置的参数问题 publicPath: process.env.NODE_ENV === ' ...

最新文章

  1. [笔记]在ubuntu下使用conky
  2. [批处理]使用Log.io监控日志变化
  3. 承载网络开启后显示无法连接到Internet,已解决
  4. 微信内测新功能:公众号们脖子一凉...
  5. WIZnet 在 Embedded World 2013展会中的展示
  6. DataGrid显示字段过长用...代替
  7. 基于mAppWidget实现手绘地图--索引DEMO
  8. TASKCTL4.1安装选项详解
  9. JavaFX桌面应用开发-Scene(场景)
  10. 项目总结:快餐店POS收银系统
  11. 我的Windows实用软件清单
  12. 【BZOJ3470】Freda’s Walk
  13. 重磅!人工智能会取代科学家? 道翰天琼认知智能机器人API接口平台为您揭秘-1。
  14. 【力扣】695岛屿的最大面积
  15. linux 查看 磁盘iops,linux – 磁盘IOPS和sar tps之间的关系
  16. 李沐动手学深度学习V2-图像增广和代码实现
  17. 互联网行业应届待遇十一档2014
  18. 街景房屋号码 (SVHN) 数据集
  19. 如何用波士顿矩阵法来分析产品的生命周期?
  20. erp5开源制造业erp服装行业解决方案

热门文章

  1. 学习软件工程导论的心得体会
  2. ifconfig查看网络丢包
  3. laravel连接mysql连接数过多_Laravel 使用Voyager导致多个数据库连接总是返回默认连接?...
  4. 文件新旧判断和字符串判断
  5. 大数据背后的神秘公式:贝叶斯公式
  6. 【IT运维小知识】安全组是什么意思?
  7. Linux下常用的工具软件
  8. 局域网里如何访问wifi路由器下的设备?
  9. Linux 下实现虚拟专用网(PPTP)
  10. linux恶意代码检查软件,Yara:恶意软件检测神器