THREE.FontLoaderが動かなく、フォントを読み込めない

前提・実現したいこと

three.jsで3Dの文字を表示したい
そのために、フォントを読み込ませたいがエラーが出てしまう

発生している問題・エラーメッセージ

Uncaught TypeError: THREE.FontLoader is not a constructor
    at init (index.html:43)

該当のソースコード

javascript
1var fontLoader = new THREE.FontLoader(); //43行目
2        fontLoader.load('fonts/helvetiker_regular.typeface.js', function(font){
3            init();
4        });

試したこと

サイトで調べたりしたが欲しい情報が出なく試せていません

補足情報（FW/ツールのバージョンなど）

three.jsのバージョンはr78です。

<!DOCTYPE html> <html> <head> <title>3d world</title>  <script type="text/javascript" src="libs/three.js"></script>

<script type="text.javascript" src="fonts/helvetiker_regular.typeface.js"></script>
<style>
    body {
        /* ページ全体を使用するためにmarginを0に設定して
        overflowをhiddenに設定する */
        margin: 0;
        overflow: hidden;
    }
</style>

</head> <body>  <div id="WebGL-output"> </div>  <script type="text/javascript"> // すべての読み込みが終わってからThree.js関連の処理を実行します function init() { // Three.js関係の処理を以下に追加します var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xeeeeee)); renderer.setSize(window.innerWidth, window.innerHeight); camera.position.set(100,300,600); camera.lookAt(new THREE.Vector3(400, 0, -300)); var fontLoader = new THREE.FontLoader(); fontLoader.load('fonts/helvetiker_regular.typeface.js', function(font){ init(); }); var options = { size: 90, height: 90, weight: 'normal', font: font, bevelThickness: 9, bevelSize: 4, bevelSegments: 3, bevelEnabled: true, curveSgments: 12, steps: 1 }; var text1 = createMesh(new THREE.TextGeometry("Learning", options)); text1.position.z = -100; text1.position.y = 100; scene.add(text1); var text2 = createMesh(new THREE.TextGeometry("Three.js", options)); scene.add(text2); document.getElementById("WebGL-output").appendChild(renderer.domElement); renderer.render(scene, camera); } window.onload = init; </script> </body> </html>

kuma_kuma_

2020/10/07 14:50

> THREE.FontLoaderはコンストラクターではありませんまず'fonts/helvetiker_regular.typeface.js'はダウンロードしてありますか？またパスは '../fonts/helvetiker_regular.typeface.js' './fonts/helvetiker_regular.typeface.js' とかではありませんか？

sugimoto

2020/10/08 09:39

ダウンロードされてます。パスも問題ありません。

kuma_kuma_

2020/10/08 09:49

そうしたら別のファイルで試されては？

sugimoto

2020/10/08 10:23

別のファイルもダメでした。

kuma_kuma_

2020/10/08 10:47

というか、43行目だとthree.js自体読めていないのでは？ちゃんと「window.onload」とかの後に処理している？

sugimoto

2020/10/08 11:09

three.jsは読み込めています。 window.onloadが分からないので,上記にソースコード記入します。

kuma_kuma_

2020/10/08 11:21

ソース見ました。これ色んなサイトから持ってきたの混ぜ合わせたでしょう... ベースは https://yoheikoga.github.io/2017/07/19/threejs-textgeometry-simple-sample/ かな？ちなみにここの書き方間違っているからね(動くけどさ) 始めに覚える方法ではないよ...あまりに混ざっているのでこれじゃ動かすようにできない... どうしよっか...

sugimoto

2020/10/08 11:40

参考にしたのは「初めてのthree.js」という、本です。もう少し、自分でサイトなど調べて無理だったら諦めて、違う感じで作りますね。ありがとうございます。

sugimoto

2020/10/08 11:44

回答に気づいてなかった。ソースコード参考にさせて頂きます。

kuma_kuma_

2020/10/08 12:13

本の場合情報が古い可能性があります。ご注意ください。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者様
これは質問に合った内容と違います。
あくまで「文字を3D表示させるサンプル」とお考えください。
(まずは動かないと始まらない)
元はThree.jsでTextGeometryのシンプルなサンプル
ですが読み込みやらscriptの実行タイミングがめちゃくちゃだったので整えました。
あと簡単な範囲でコメントも追加しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5	<title>TextGeometry three.js</title>
6	<script src="./js/three.min.js"></script>
7	<script src="./js/OrbitControls.js"></script>
8	<style>
9		html, body 
10		{ 
11			margin: 0; 
12			padding: 0; 
13			overflow: hidden; 
14			font-family: Monospace;
15		} 
16	</style>
17	<script>
18	// すべての読み込みが終わってからThree.js関連の処理を実行します
19	function init() {
20		var scene = new THREE.Scene();
21		var aspect = window.innerWidth / window.innerHeight;
22		var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
23		var renderer = new THREE.WebGLRenderer();
24		var controls = new THREE.OrbitControls(camera);
25		var axis = new THREE.AxisHelper(1000);
26		var light = new THREE.DirectionalLight(0xb4e7f2, 1.5);
27		light.position.set(1,1,1);
28		light.target.position.set(0,0,0);
29		scene.add(axis);
30		scene.add(light);
31		scene.add(light.target);
32		renderer.setSize(window.innerWidth, window.innerHeight);	// 描写範囲
33		document.body.appendChild(renderer.domElement);
34		camera.position.set(50, 50, 200);
35		var loader = new THREE.FontLoader();
36		// フォント情報を読み込み
37		loader.load('./fonts/helvetiker_regular.typeface.js', function(font){
38			// どの様な文字を書くか設定
39			var textGeometry = new THREE.TextGeometry("Hello Three.js!", {
40				font: font,
41				size: 20,
42				height: 5,
43				curveSegments: 12
44			});
45			// 材質の設定
46			var materials = [
47				new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
48				new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
49			];
50			// 文字列メッシュの作成
51			var textMesh = new THREE.Mesh(textGeometry, materials);
52			// 画面に文字列メッシュを追加
53			scene.add(textMesh);
54		});
55		// 描写処理の指定
56		var render = function () {
57			requestAnimationFrame(render);
58			controls.update();
59			renderer.setClearColor(0xaabbcc, 1.0);
60			renderer.render(scene, camera);
61		};
62		// 画面に描写
63		render();
64	}
65	</script>
66
67</head>
68<body onload="init();">
69</body>
70</html>