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?

What exactly is in that font file your code tries to load?

Pointy
– Pointy

2018-12-28 14:51:56 +00:00
Commented Dec 28, 2018 at 14:51 — Pointy
– Pointy, Commented Dec 28, 2018 at 14:51

rgarregrah · Accepted Answer · 2018-12-28 15:42:52Z

6

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

answered Dec 28, 2018 at 15:42

rgarregrah

1015 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Squirrl Over a year ago

For me it was public. Same idea

Collectives™ on Stack Overflow

Uncaught SyntaxError Three.js FontLoader

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related