いるかのボックス: Three.jsで3D文字を描く

2016年2月28日日曜日

Three.jsで3D文字を描く

Three.jsは基本的には3Dオブジェクトを扱うためのライブラリではあるが、文字を表示したかったので、文字の表示についてまとめた。バージョンはr74。

Three.jsで3D文字を表示したいときはTHREE.TextGeometryを使う。また、typeface.jsで作成されたフォントを読み込む必要がある。Three.jsのサイトからダウンロードした圧縮ファイルのthree.js-master\examples\fontsにフォントがいくつかある。ただし、日本語フォントはないので英数字のみ。日本語を表示する場合は自分でフォントを作成する必要がある。ここではthree.js-master\examples\fonts\optimer_regular.typeface.jsを使う。

１．フォントファイルのコピー
Three.jsのサイトからダウンロードしたファイルのthree.js-master\examples\fontsにあるoptimer_regular.typeface.jsを適当なフォルダにコピーしておく。ここではfontsというフォルダを作成してそこにコピー。

※ローカルだとフォントがhtmlのあるディレクトリの配下にないと読み込まれない。例えば、「../fonts/optimer_regular.typeface.js」はだめで、「fonts/optimer_regular.typeface.js」は読み込まれる。サーバではどちらでも読み込まれる。

２．フォントの読み込み

// FontLoaderインスタンスの作成
var loader = new THREE.FontLoader();
// フォントのロード
loader.load( '../fonts/optimer_regular.typeface.js', function ( font ) {
// ここにフォントを読み込んだあとの処理を記述
} );

３．TextGeometryの作成（フォントを読み込んだあとの処理）

// テキストオブジェクトの作成
// 第1引数に作成する文字を指定し、あとはパラメータ
// font: 使用するフォント（typeface.jsで作成されたフォント）
// size: テキストサイズ
// height: テキストの奥行き
// curveSegments: 曲線に使用する点の数
// bevelEnabled: 斜体にするかどうか
// bevelThickness: 斜体の傾き度
// bevelSize: アウトラインからどの程度傾けるか
var textGeometry = new THREE.TextGeometry( 'ABC', {
 font: font,
 size: 10.0,
 height: 5,
 curveSegments: 10,
 bevelThickness: 3,
 bevelSize: 1.0,
 bevelEnabled: true
} );
// ジオメトリを中心に移動
textGeometry.center();

// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

// オブジェクトの作成
var text = new THREE.Mesh( textGeometry, material );

// オブジェクトをシーンに追加
scene.add( text );

以下のような3D文字が表示される。