Upgradging 3js, Fontloader not a constructor

Questions
,
1

I am upgrading my 3js to the latest.

So I download the latest 3js version from the 3js website.
But when I redirect my 3js code to the new version, I get error:

THREE.FontLoader is not a constructor

I have been googling it, all I can find is:

But my problem is fontloader, in that url he’s talking about fileloader.

It appears I am using the latest dds loaders.
As the fontloader doesn’t seem to have been updated in the past 8 years,
and is still, 269 lines, as is mine.

How do I fix this error?

2

It’s best to reference the official examples to see how upgrading would work in your case, I think the problem is the THREE name space before declaring Font Loader, the latest syntax should look something like this…

import { FontLoader } from 'three/addons/loaders/FontLoader.js

Which you’d then use as
const FL = new FontLoader()

Have a look at the official text geometry example that uses font loader, this should give you a detailed look into a default use case

3

I am really not sure, how to go about fixing this.

Here are the 3js references in my js.

<script src="../threejs/1/build/three.js"></script>
<script src="../threejs/dds_loader/index.js"></script>
<script src="../threejs/api/index.js"></script>

First is the 3js library.
Second is the dds loader.
Third is my own api module, which takes care of talking to 3js for me.

In the api module, I am running the

Three.Fontloader

Where it cannot find the constructor.

So where should I make a change in the code so that it does?

4

i’m not entirely sure about three.js as i use three.module.js but effectively it should be the same as i’ve outlined above… I think you’d need to change your /api/index.js script type to module like so…

<script type="module" src="../threejs/api/index.js"></script>

and then within the index.js file, import FontLoader like so…

import { FontLoader } from '../threejs/examples/jsm/loaders/FontLoader.js'

then you should be able to call a new instance of the class with const FL = new FontLoader()

EDIT: in saying that i just noticed that FontLoader.js has dependencies imported from three so you’ll need to use three.module.js to use it as i’ve suggested, have a look at

i’d recomend using the same setup for importing both three and FontLoader