Currently, I am delving into the realm of three.js to create text geometry, although my expertise in JavaScript is fairly limited.
Initially, I attempted to utilize my custom JSON font, which resulted in the same error encountered when using fonts from the three.js examples. I came across a solution where someone employed the self = this technique.
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
})
);
});
});
The error message I am currently facing is:
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)
It's worth noting that I am utilizing VueJS, and the code in question resides within a separate JavaScript file that exports a class.
As a follow-up question, how would I go about loading a font that I obtained from Google Fonts and converted into .json format?