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);            

こちらを実行すると、こうなります。

このコードは、正面用のマテリアルと側面用のマテリアルの２種類を使ってます。
こうすると、変わったテキストが作れます。

---

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！