webpack和threejs配合使用的一些小问题

webpack-threejs-FontLoader

在webpack的项目中使用threejs，new THREE.FontLoader()这个threejs的字体类，有一个方法load，正常的写法是：

loader.load( 'font/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
  font = response;
  refreshText();
});

可以看出，load这个方法是在js运行时执行的，这时候要载入的json文件的路径就是一个问题。
目前有2种方法可以解决。

方法一

配置public文件夹，可以使用copy-webpack-plugin这个插件，之后的字体加载路径就是public下font字体的路径了。

方法二

利用import将json文件加载，加载后的是一个json对象，再将这个json对象转换成blob对象，再利用URL.createObjectURL(blob)生成一个url的内存。

import ziti from './assets/font/optimer_bold.typeface.json';
const loader = new THREE.FontLoader();
  const blob = new Blob([JSON.stringify(ziti)], {
    type: 'application/json'
  })
  loader.load(URL.createObjectURL(blob), function ( response ) {
    font = response;
    refreshText();
  } );