three.jsのTextGeometryで文字が表示されない

three.jsを使ってWebGLのモデルを作成しています。
TextGeometryを使って3D文字を作成したいのですが、文字が表示されません。
エラーも出ないので、なぜ表示されないのかわからず、困っています。
方法1と方法2、二つの方法で試しましたが、どちらもエラーは出ず、文字も出ません。
ローカル上にサーバーを立ててファイルを開く方法も試しましたが解決しませんでした。
解決方法をご教授いただければ幸いです。

該当のソースコード

HTML
1<html>
2  <head>
3    <meta charset="utf-8" />
4    <script src="https://unpkg.com/three@0.140.2/build/three.min.js"></script>
5    <script type="text/javascript" src="./file/helvetiker_regular.typeface.js"></script>
6    <script type="text/javascript" src="./file/helvetiker_bold.typeface.js"></script>
7    <script type="text/javascript" src="./file/bitstream_vera_sans_mono_roman.typeface.js"></script>
8    <script type="text/javascript" src="./file/TextGeometry.js"></script>
9    <script type="text/javascript" src="./file/FontLoader.js"></script>
10    <script>
11      // ページの読み込み
12      window.addEventListener('DOMContentLoaded', init);
13
14      function init() {
15        // サイズを指定
16        const width = 960;
17        const height = 540;
18        let rot = 0;
19
20        // レンダラーを作成
21        const renderer = new THREE.WebGLRenderer({
22          canvas: document.querySelector('#myCanvas'),
23        });
24        renderer.setSize(width, height);
25
26        // シーンを作成
27        const scene = new THREE.Scene();
28
29        // カメラを作成
30        const camera = new THREE.PerspectiveCamera(45, width / height);
31
32        // 平行光源を作成
33        const directionalLight = new THREE.DirectionalLight(0xffffff);
34        directionalLight.position.set(1, 1, 1);
35        scene.add(directionalLight);
36
37        //方法1
38        // const text_geometry = new THREE.TextGeometry('test', {
39        //             size: 80,
40        //             height: 80,
41        //             weight: 'normal',
42        //             font: 'helvetiker',
43        //             bevelThickness: 9,
44        //             bevelSize: 4,
45        //             bevelSegments: 3,
46        //             bevelEnabled: true,
47        //             curveSegments: 12,
48        //             steps: 1
49        //         });
50
51        // text_geometry.center();
52        // const text_material = new THREE.MeshNormalMaterial();
53        // const text_mesh = new THREE.Mesh(text_geometry, text_material);
54        // // text_mesh.position.set(0, 18, 0);
55        // scene.add(text_mesh);
56
57
58
59        //方法2
60        const fontLoader = new THREE.FontLoader(); 
61
62        fontLoader.load('./helvetiker_bold.typeface.json', (font) => { // typeface.jsを読み込む
63          const textGeometry = new THREE.TextGeometry('test', {
64            font: 'helvetiker',
65            size: 80,
66            height: 80
67          });
68
69          textGeometry.center();
70
71          const textMaterial = new THREE.MeshNormalMaterial();
72          const text = new THREE.Mesh(textGeometry, textMaterial);
73
74          scene.add(text);
75        });
76
77
78        tick();
79        function tick() {
80
81          // レンダリング
82          renderer.render(scene, camera);
83
84          requestAnimationFrame(tick);
85        }
86      }
87    </script>
88  </head>
89  <body>
90    <canvas id="myCanvas"></canvas>
91  </body>
92</html>