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

Questions
1

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

https://github.com/mrdoob/three.js/blob/ec597f68a76f78640309a7d41041bcc03babdee0/build/three.js
https://github.com/mrdoob/three.js/blob/ec597f68a76f78640309a7d41041bcc03babdee0/examples/js/loaders/FontLoader.js
https://github.com/mrdoob/three.js/blob/ec597f68a76f78640309a7d41041bcc03babdee0/examples/js/geometries/TextGeometry.js

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

https://carljalal.github.io/5_webgltest/
everything else is working when I comment out that text loader part

Thanks again!