一、问题描述

在Vue项目中引用three.js的Fontloader().load()出不来字，代码如下，遇到如下报错：

 const textloader = new THREE.FontLoader();
 textloader.load( "./FZCuHeiSongS-B-GB_Regular.json", function ( font ) {
       ...
        } );

二、问题原因

  当我们在引用图片（纹理）的时候（new THREE.TextureLoader）并没有遇到这个问题，如果你同样遇到了问题，尝试用require解决, 像这样:<br />`let theEndTexture = loader.load(require('./scalepoint.png' ))`  <br />这样能成功引入是因为webpack处理了它。<br />      而现在我们要引入的json字体对象，是从我们客户端这边被载入的，我们不应该像平常一样引入，而是应该站在浏览器地址栏的角度去引入，所以我们可以通过看能不能在地址栏看到这个文件来判断有没有引用成功。像是这样[http://localhost:8080/src/assets/basic.obj](http://localhost:8080/src/assets/basic.obj)，如果看到了这个obj，那就可以引用成功。<br />网上有很多相关问题的描述，很多人说这是Vue cli的问题，并不是three.js的问题，而且很多都没研究出个结果，可以看看如下链接<br />[https://stackoverflow.com/questions/57266283/how-to-load-fonts-for-three-js-text-geometry](https://stackoverflow.com/questions/57266283/how-to-load-fonts-for-three-js-text-geometry)<br />[https://github.com/mrdoob/three.js/issues/19043](https://github.com/mrdoob/three.js/issues/19043)

三、解决方案

const textloader = new THREE.FontLoader();
textloader.load( "/static/FZCuHeiSongS-B-GB_Regular.json", function ( font ) {
       ...
        } );

因为/src目录是无法被获取的，所以像之前那样写成”./FZCuHeiSongS-B-GB_Regular.json”是不行的，放在static目录，就可以被浏览器读到，所有写成”/static/FZCuHeiSongS-B-GB_Regular.json”就能解决问题。

参考链接：
https://discourse.threejs.org/t/uncaught-error-three-objloader-unexpected-line-doctype-html/8604/9