Three.js TextGeometry (3Dテキスト表示)
今回は、Three.jsの「TextGeometry 」について書きます。
こちらは、3Dのテキストを表示させることができるジオメトリ (形状)です。
こんなのが表示できます。
横から見ると、
こんな感じです。
TextGeometryを使用するには、気をつけることが、一つあります。
TextGeometryを使うには、typeface.js形式のフォントファイルを読み込む必要があります!
typeface.js形式のフォントファイルは、Three.jsダウンロードフォルダ内の
examples/fonts/〜typeface.js
にあります。
6,7種類あると思います。
で、Three.jsのファイル読み込み後に、
<script src="helvetiker_bold.typeface.js"></script>
を追加してください。今回は、helvetiker_bold.typeface.jsを使います。
では、TextGeometryのコードを書きます。
var TextGeometry = new THREE.TextGeometry( 'Three.js!', { size: 30, height: 4, curveSegments: 3, font: "helvetiker", weight: "bold", style: "normal", bevelThickness: 1, bevelSize: 2, bevelEnabled: true }); var Material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } ); var Text = new THREE.Mesh( TextGeometry, Material ); scene.add( Text );
実行するとこんな感じです。
TextGeometryのコンストラクタです。
THREE.TextGeometry( text, {})
text・・・表示させるテキスト
で、TextGeometryには、たくさんのプロパティがあります。
ここでは、よく使うものを紹介します。
- size・・・高さ
- height・・・厚さ
- curveSegments ・・・テキストカーブ分割数。増やすと字の曲線が滑らかになります。
- font・・・フォント指定(例:helvetiker_bold.typeface.jsを読み込ませた場合は、「"helvetiker"」と書く)
- weight・・・"normal":通常, "bold":太字
- style・・・"normal":通常, "italics":斜体
- bevelThickness・・・押し出し量。増やすと厚くなる。
- bevelSize・・・アウトラインの太さ。
- bevelEnabled・・・true:ベベルをつける、false:ベベルをつけない。
- material・・・フォント自体の前面・背面部分のマテリアルのインデックス。
- extrudeMaterial・・・側面のマテリアルのインデックス。
他にも、まだあります。
最後に、もう少しマテリアルを改良したものを書きます。
//正面マテリアルの生成 var materialFront = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); //側面マテリアルの生成 var materialSide = new THREE.MeshBasicMaterial( { color: 0x000088 } ); var materialArray = [ materialFront, materialSide ]; //テキスト var textGeom = new THREE.TextGeometry( "Three.js!", { size: 30, height: 4, curveSegments: 3, font: "helvetiker", weight: "bold", style: "normal", bevelThickness: 1, bevelSize: 2, bevelEnabled: true, material: 0, extrudeMaterial: 1 }); var textMaterial = new THREE.MeshFaceMaterial(materialArray); var textMesh = new THREE.Mesh(textGeom, textMaterial ); //シーンオブジェクトに追加 scene.add(textMesh);
こちらを実行すると、こうなります。
このコードは、正面用のマテリアルと側面用のマテリアルの2種類を使ってます。
こうすると、変わったテキストが作れます。
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!