Is there a way to convert a downloaded Google font from TTF to JSON in order to use it with ThreeJS FontLoader / TextGeometry?
import LatoFont from '../assets/fonts/lato-bold.json'
const loader = new FontLoader();
const font = loader.parse(LatoFont);
loader.load(font, font => {
const textGeo = new TextGeometry("Krypton", {
font: font,
size: 200,
height: 50,
curveSegments: 12,
bevelEnabled: false,
bevelThickness: 0.5,
bevelSize: 0.3,
bevelOffset: 0,
bevelSegments: 5,
})
const materials = [
new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: true }), // front
new THREE.MeshPhongMaterial({ color: 0x00ff00 }) // side
]
const textMesh = new THREE.Mesh(textGeo, materials);
textGeo.computeBoundingBox();
const centerOffset = - 0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
textMesh.position.x = centerOffset;
textMesh.position.y = 100;
textMesh.position.z = 0;
textMesh.rotation.x = 0;
textMesh.rotation.y = Math.PI * 2;
group.add(textMesh);
})
After using an online converter, I encountered this error:
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
UPDATE:
Even after updating my Vite config to include the static directory, I am still facing font loading issues when building the library and using it in another project.
const path = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'lib/main.ts'),
name: 'logo-threejs',
fileName: (format) => `logo-threejs.${format}.js`
}
},
publicDir: './static',
assetsInclude: ['**/*.typeface.json'],
});
Project Structure: