Difficulty loading 3DText with FontLoader.js and TextGeometry.js

Hi everyone.

I’m trying to render 3d text following some sample code on youtube

The difference is that he uses JSM module but I just use regular JS in the script of the HTML page

I do this in index.html:

<script src = "three.js"></script>
<script src = "FontLoader.js"></script>
<script src = "TextGeometry.js"></script>

I copied those into the local folder from


The code I use is

const loader = new THREE.FontLoader();
loader.load('Joan_Regular.json', (font) => {
    const textGeo = new THREE.TextGeometry('Hi How are You',
        font: font,
        size: 20,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 5,
        bevelSize: 2,
        bevelOffset: 2,
        bevelSegments: 15

    //var textMaterial = new THREE.MeshPhongMaterial( { color: 0x000000 } );

    var mesh1 = new THREE.Mesh( textGeo, [
        new THREE.MeshPhongMaterial({ color: 0xff0000}),
        new THREE.MeshPhongMaterial({ color: 0xff0000})
    ] );
    mesh1.position.x = 1
    mesh1.position.y = 1
    mesh1.position.z = 1
    scene.add( mesh1 );

No text shows up wherever I turn the camera around… does anyone have any advice?
What’s also interesting is that on github the website doesn’t even load three.js unless I comment out that font loader.
Thanks in advance!

And I tried to use the JSON files also in the three.js examples folder and those didn’t work either. The full code of the project is here

everything else is working when I comment out that text loader part

Thanks again!