5

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

ti3uxx
  • 53
  • 1
  • 4

1 Answers1

14

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.

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Mugen87
  • 28,829
  • 4
  • 27
  • 50