THREE.FontLoader() doesn't work in Three JS

Question

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

Schwinn

Answer 1

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.

Artieartifact

thank you very much ! now the error left – Schwinn

Maybe you should replace 'jsm' to 'js' in the path if you use require syntax – Thatch