Uncaught SyntaxError Three.js FontLoader

Question

I tried to create 3D text with FontLoader in Three.js, but I got an error.

I use Three.js r99.

  const loader = new THREE.FontLoader();

  //https://github.com/mrdoob/three.js/tree/dev/examples/fonts
  loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
    const textGeometry = new THREE.TextGeometry("Hello!", {
      font: font,
      size: 20,
      height: 5,
      curveSegments: 12
    });
    const material = new THREE.MeshNormalMaterial();
    const textMesh = new THREE.Mesh(textGeometry, material);
    scene.add(textMesh);
  });

The output of the Chrome developer tool is as follows.

THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.onLoad (three.module.js:39064)
    at XMLHttpRequest.<anonymous> (three.module.js:33974)

And VM 5770(?) seems to point to the contents of index.html. "T" seems to be T of

<meta charset = "UTF-8" />.

I don't know what happened. Any ideas?

Answer 1

I solved this. The cause was Parcel, not Three.js. Copying the json file to the dist directory worked perfectly.