javascript - 如何加载 Three.js 文本几何形状的字体

Question

我正在尝试创建一个 Three.js 文本几何图形(抱歉，我对 Javascript 很陌生)。

我尝试使用自己的 JSON 字体，但这给出了与使用 Three.js 在其示例中使用的字体相同的错误。我看到有人做了 self = this 事情。

this.pageTitles = [];
const self = this;
const loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_bold.typeface.json', (font) => {

    self.pages.forEach((page) => {

        self.pageTitles.push(
            new THREE.TextGeometry( page, {
                font: font,
                    size: 80,
                    height: 1,
                    curveSegments: 12,
                    bevelEnabled: false
             })
        );

    });


});

我收到此错误:

Uncaught SyntaxError: Unexpected string in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.eval [as onLoad] (three.module.js?5a89:40134)
    at XMLHttpRequest.eval (three.module.js?5a89:34850)

请注意，我使用的是 VueJS，并且此代码位于导出类的单独 js 文件中。

另外，如何加载从 google fonts 下载并转换为 .json 格式的字体？

Answer 1

VueJs 无法解析不是来自 dist 文件夹的路径。将helvetiker_bold.typeface.json放入dist文件夹中。

const loader = new THREE.FontLoader();
loader.load( '/helvetiker_bold.typeface.json', (font) => {
   ...//do whatever you want
});