Unable to use fontLoader or textGeometry

Questions
,
1

I am trying to create some 3d text but I get the following error:

Uncaught (in promise) SyntaxError: Unexpected string in JSON at position 2
    at JSON.parse (<anonymous>)
    at Object.onLoad (FontLoader.js:34:17)
    at three.module.js:39650:38

My code looks something like this:

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'

const fontLoader = new FontLoader()

fontLoader.load(
    '/helvetiker_bold.typeface.json',
    (font) => {
        const textGeometry = new TextGeometry('Font Loaded', {
            font: font,
        })
    }
)

I thought this was due to the parsing were JavaScript turns JSON into an object, so I decided to import the font directly and use it with textGeometry changing my code to:

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import font from './fonts/helvetiker_bold.typeface.json'

const textGeometry = new TextGeometry('Font Loaded', {
    font: JSON.parse(JSON.stringify(font)),
})

This gave me a new error that said:

Uncaught TypeError: font.generateShapes is not a function
    at new TextGeometry (TextGeometry.js:34:24)
    at Object.6yeCB.three (index.js:8:22)
    at newRequire (index.b59b4001.js:71:24)
    at index.b59b4001.js:122:5
    at index.b59b4001.js:145:3

I have no idea why this is happening or what I can do to fix it, I’ve tried multiple fonts and many different file nesting structures but the problem seems that the font itself isn’t compatible, which is weird considering most of the fonts I used are from the three.js fonts file.

Some things to note:

  • I have the latest three.js version
  • I am using parcel as a development server but I don’t think it’s the issue

Please help : (

2

Take a look at step 11 of the BeginnerExample from the collection. Maybe you will find the error.

1 Like
4

I gotta start by saying that I love the idea and what you did         : D

You answer didn’t necessarily solve my problem, but when I used an external font you included I realized that the problem was with parcel’s parsing of JSON files

Thank you either way, I will reply to myself with the answer just in case someone faces the same issue

5

If anyone faces the same problem in the future, it’s because of parcel’s JSON parsing and it’s inability to use static files for the time being

Here’s the best fix I found GitHub - elwin013/parcel-reporter-static-files-copy: ParcelJS v2 plugin to copy static files

6

Still not working… Please HELP :no_mouth:

7

@pravesh_arya Try using this method to access the fonts.

import HelvetikerFont from "three/examples/fonts/helvetiker_regular.typeface.json";

import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";

/****Rest of your code*********/
const loader = new FontLoader();
const font = loader.parse(HelvetikerFont);

const geometry = new TextGeometry("Hello three.js!", {
  font: font,
  size: 0.5,
  height: 0.2,
  curveSegments: 12,
  bevelEnabled: true,
  bevelThickness: 0.03,
  bevelSize: 0.02,
  bevelOffset: 0,
  bevelSegments: 5,
});

const material = new THREE.MeshBasicMaterial();

const text = new THREE.Mesh(geometry, material);
scene.add(text);
1 Like