LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-16

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

サンプル

http://codepen.io/moxuse/pen/zoMggj

ポイント

65行目

var texture_ = new THREE.Texture(canvas_);

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

  • 裏面も描画されるようマテリアルのsideプロパティはTHREE.DoubleSideにしている。

  • テクスチャサイズを2のベキ乗にしておく必要があるので、文字が見切れないよう、うまく収まるテクチャサイズとカンバスサイズを設定する必要がある。

  • カメラが寄った時にカンバスの解像度によって眠くなる大きさがある。動かす環境や描画の数等パフォーマンス面と、カメラの距離など考慮してテクスチャのサイズはうまいこと設定する。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3