1. moxuse@github

    Posted

    moxuse@github
Changes in title
+Three.jsとカンバスで簡易テクスチャフォント
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,23 @@
+
+3D空間上に文字を表示したい時がよくある。
+日本語などマルチバイト文字の表示は、毎度のこと苦労するのでcanvasをTHREE.Textureにそのまま割り当てる手法をつかって、お手軽にテクスチャフォントを実現した。
+
+###サンプル
+
+[http://codepen.io/moxuse/pen/zoMggj](http://codepen.io/moxuse/pen/zoMggj)
+
+
+###ポイント
+
+65行目
+```
+var texture_ = new THREE.Texture(canvas_);
+```
+
+でカンバスの描画をそのままTHREE.Textureにできる。
+
+- 裏面も描画されるようマテリアルのsideプロパティはTHREE.DoubleSideにしている。
+
+- テクスチャサイズを2のベキ乗にしておく必要があるので、文字が見切れないよう、うまく収まるカンバスサイズを設定する必要がある。
+
+- カメラが寄った時にカンバスの解像度によって眠くなる大きさがある。動かす環境や描画の数等パフォーマンス面と、カメラの距離など考慮してテクスチャのサイズはうまいこと設定する。