Three.jsでテクスチャに文字を使う

Three.jsでテクスチャに文字を使えないかと思って調べたことをまとめておく。

テクスチャとして文字を利用するには、html5のcanvasを作成して文字を描画し、このcanvasをテクスチャにする。テクスチャをつくるコードは以下のようになる。

// キャンバスの作成
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( '2d' );
// キャンバスサイズの設定
context.width = 512;
context.height = 256;

// 枠の描画開始
context.beginPath();
context.strokeStyle = '#FFFF00';
context.lineWidth = 4.0;
context.strokeRect(  0 ,  0 , 256 , 128 );
context.stroke();

// 文字の描画開始
context.beginPath();
// 文字色指定
context.fillStyle = '#FFFF00';
// フォントサイズとスタイルの定義
context.font= '100px sans-serif';
// 文字の表示位置指定
context.textAlign = 'center';
context.textBaseline = 'middle';
// 文字、文字の開始位置、最大幅
context.fillText('あいうえお', 128, 64, 230);
context.fill();

// テクスチャの作成
var texture = new THREE.Texture( canvas );
// これをやらないとマテリアルは真っ暗
texture.needsUpdate = true;

このマテリアルを立方体に使うと以下のようになる。

•  サンプルの表示