Three.jsとカンバスで簡易テクスチャフォント

Last updated at 2016-12-16Posted at 2016-12-16

3D空間上に文字を表示したい時がよくある。
日本語などマルチバイト文字の表示は、毎度のこと苦労するのでcanvasをTHREE.Textureにそのまま割り当てる手法をつかって、お手軽にテクスチャフォントを実現した。

###サンプル

###ポイント

65行目

var texture_ = new THREE.Texture(canvas_);

でカンバスの描画をそのままTHREE.Textureにできる。

裏面も描画されるようマテリアルのsideプロパティはTHREE.DoubleSideにしている。
テクスチャサイズを2のベキ乗にしておく必要があるので、文字が見切れないよう、うまく収まるテクチャサイズとカンバスサイズを設定する必要がある。
カメラが寄った時にカンバスの解像度によって眠くなる大きさがある。動かす環境や描画の数等パフォーマンス面と、カメラの距離など考慮してテクスチャのサイズはうまいこと設定する。