Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js TextGeometry (3Dテキスト表示)

今回は、Three.jsの「TextGeometry 」について書きます。

こちらは、3Dのテキストを表示させることができるジオメトリ (形状)です。
こんなのが表示できます。
f:id:gupuru:20131221220225p:plain
横から見ると、
f:id:gupuru:20131221220248p:plain
こんな感じです。


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

実行するとこんな感じです。
f:id:gupuru:20131221222050p:plain

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

こちらを実行すると、こうなります。
f:id:gupuru:20131221220225p:plain
このコードは、正面用のマテリアルと側面用のマテリアルの2種類を使ってます。
こうすると、変わったテキストが作れます。


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

広告を非表示にする