ひよっこ blog

ゲーム制作について、作ったものや思ったことをつらつら書いていく予定

THREE.TextGeometry が呼び出せない!

最近three.jsを始めているのだが、文字を表示しようとして丸1日潰れるという心が折れる状態に陥った。

 

初心者ゆえに、

 

Uncaught ReferenceError: _typeface_js is not defined

とか

Uncaught TypeError: THREE.TextGeometry is not a function

 

とかエラーで表示されても意味が分からず、悲しみに打ちひしがれており、検索しても検索しても、英文だったり、無名関数とか即時関数とか良くわからない事ばかり表示され、苦しかった。

 

■結局原因は

原因は呼び出す.jsが足りていなかっただけ……

<script src="three.min.js"></script>

<script src="fonts/helvetiker_regular.typeface.js"></script>

上記2つだけでTHREE.TextGeometryが使えると思っていたが、

どうも、下記2つも必要だった様子。

<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>

 

できるだけミニマムな物だけ呼び出し、その都度必要な.js追加していこうと思っていたら、.jsが足りていないかどうかはエラー文では意外と分からず、知識の足りなさを実感しました……が、自力で解決できて良かった!!

 

■グダグダなソースコード

配置とか最悪ですが、とりあえず文字は出てる!

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8">
<style>
body {
background:#777;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}


a {
color: #ffffff;
}

#oldie a { color:#da0 }
</style>
</head>
<script src="three.min.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>


<body>
<div id="canvas-wrapper"></div>

<script>
var sw = window.innerWidth;
var sh = window.innerHeight;

var camera, scene, renderer;

//シーン
scene = new THREE.Scene();

// 光を用意
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1).normalize();
scene.add( light );

//カメラを作る
camera = new THREE.PerspectiveCamera( 75, sw / sh, 0.01, 10000 );
camera.position.set(0, 0, 1000);
scene.add( camera );

//レンダー
var renderer = new THREE.WebGLRenderer();
renderer.setSize(sw, sh);
//document.getElementById('canvas-wrapper').appendChild(renderer.domElement);
document.body.appendChild(renderer.domElement);

// 三角
var material = new THREE.MeshBasicMaterial( { color: 0xeeee00 } );
var geometry = new THREE.CircleGeometry( 300, 3 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
scene.add( mesh );

//テキスト表示
var textGeo = new THREE.TextGeometry( 'Leg', {
size: 40, // 高さ40
curveSegments: 1, // 字曲線分割数1。カクカク。eが8角形に見える。
height:20, // 厚さ20
// フォント指定しないとhelvetikerの非ボールド、非イタリックに
bevelEnabled: true, bevelSize: 3, bevelThickness: 5, bevelSegments: 2
// ベベル有効、3太らせる、5伸ばす、ベベル分割数2
});
var greenMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var text = new THREE.Mesh( textGeo, greenMaterial );
scene.add( text );

console.log(greenMaterial);

renderer.render(scene, camera);

 

</script>

</body>
</html>