javascript - 如何为Three.js文本几何加载字体

我正在尝试创建一个three.js文本几何体（很抱歉，我对Java语言非常陌生）。

我尝试使用自己的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字体下载并转换为.json格式的字体？

最佳答案

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

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

关于javascript - 如何为Three.js文本几何加载字体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57266283/