チュートリアル - 3D Textを生成するコンテンツを作ってみる 3/6

3Dテキストをを表示してみよう

まずは、3Dテキストを実際に表示させてみましょう。
使用するスクリプトは text-mesh.js です。

 

まずは、3Dテキストを表示させるために Entity を作成します。

 

Entityを作成し、 ADD COMPONENT から SCRIPT を追加し、 text-mesh.js を追加します。

 

 

この text-mesh.js は、以下のプロジェクトから引用しております。
参照 : https://github.com/playcanvas/engine/issues/2689
プロジェクト : https://playcanvas.com/project/755330/overview/3d-text

 

text-mesh.js には属性設定が用意されており、設定内容は以下のようになります。

• Font : フォント(.ttf)のバイナリーデータを設定
• Text : 表示するテキストを入力
• Alignment : 文字揃えを設定 (Left, Center, Right)
• Character Size : フォントサイズを設定
• Character Spacing : 字間を設定
• Kerning : フォントのカーニングを調整
• Depth : 3Dの奥行の長さを設定
• Max Curve Steps : フォントのアウトラインのベジェ曲線のパス分割数を設定
• Render Style : Solid か Wireframe レンダリングを設定
• Material : マテリアルを設定

上記を設定してきます。

 

• Font : Fontsフォルダの mplus-1m-regular.ttf を設定
• Text : 任意のテキスト
• Alignment : Center
• Character Size : 0.5
• Character Spacing : 0
• Kerning : 1
• Depth : 0.25
• Max Curve Steps : 10
• Render Style : Solid
• Material : 新しくマテリアルを作成し追加

フォントはFontsフォルダに用意した mplus-1m-regular.ttf を使用します。
こちらの M+ というフォントの詳細は以下からご参照ください。
https://mplus-fonts.osdn.jp/

 

 

マテリアルはASSETSから新しくマテリアルを作成し設定します。
マテリアルの詳細設定は任意です。

 

 

3Dテキストをカメラに正しい向きで表示させるために、Mesh Text のPositionとRotationを以下のように設定します。

• Position: x( 0 ), y( 4 ), z( 0 )
• Rotation: x( -35 ), y( 45 ), z( 0 )

 

設定後、Launch から実行画面を見てみましょう。
以下の画像のようにテキストが表示されていればOKです。

 

 

日本語や他記号など、設定したフォントに対応していない場合は正しく表示されなくなりますので注意してください。

 

 

同封している arial.ttf で日本語を表示させようとすると以下の画像のように正しく表示されません。

 

表示が確認出来たら、次はテキストを入力するためのUIを作成していきます