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>