I'm new in Three JS and I would like to create a 3D text. I followed most of the tuto to create it, but I have an error even if I follow all the steps or copy/past the tuto's code. This is my component :
import * as THREE from "three";
import bumped from "../Bumped.json";
const Text = () => {
const font = new THREE.FontLoader().parse(bumped);
const textOptions = {
font,
size: 5,
height: 1,
};
return (
<mesh>
<textGeometry attach="geometry" args={["three.js", textOptions]} />
<meshStandardMaterial attach="material" />
</mesh>
);
};
export default Text;
My errors : //THREE.FontLoader has been moved to /examples/jsm/loaders/FontLoader.js
//Uncaught TypeError: (intermediate value).parse is not a function
Of course, this component will be inside a Canvas element in the main page. My console Errors : My console Errors
The error means that FontLoader is not part of the core library anymore since r133. You need an additional import to use this loader in your application. Try it with:
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
Notice that you use FontLoader now without the THREE namespace.