I am encountering an issue while attempting to generate text in three.js using a font loader. Despite my efforts, I am facing difficulties in loading the font file. What could be causing this problem?
const loader = new FontLoader();
loader.load(
'http://localhost:8080/src/store/fonts/noto_sans_kr_regular.json',
font => {
const color = 0x006699;
const matLite = new Three.MeshBasicMaterial({
color: color,
transparent: true,
opacity: 0.4,
side: Three.DoubleSide,
});
const message = ' Three.js\nSimple text.';
const shapes = font.generateShapes(message, 100);
const geometry = new Three.MeshBasicMaterial(shapes);
geometry.computeBoundingBox();
const xMid =
-0.5 *
(geometry.boundingBox.max.x - geometry.boundingBox.min.x);
geometry.translate(xMid, 0, 0);
// creating shape (N.B. edge view not visible)
const text = new Three.Mesh(geometry, matLite);
text.position.z = -150;
state.scene.add(text);
},
);
The above snippet showcases my code, and below are various methods that I have attempted to resolve the issue.
loader.load('http://localhost:8080/src/store/fonts/noto_sans_kr_regular.json');
loader.load('http://localhost:8080/@/store/fonts/noto_sans_kr_regular.json');
loader.load('/noto_sans_kr_regular.json');
loader.load('@/store/fonts/noto_sans_kr_regular.json');
loader.load('/src/store/fonts/noto_sans_kr_regular.json');
loader.load('./fonts/noto_sans_kr_regular.json');
This is the error message that is being displayed:
https://i.stack.imgur.com/fuhDu.png
This link leads to the location of the font file:
https://i.stack.imgur.com/xisVN.png
I am unsure if any additional parts of the code are required for troubleshooting purposes. Apologies for any inconvenience caused.