テキストデータの表示と角度変更‐Papervision3Dのお勉強(7)‐

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

これまでの記事では画像データを取り扱ってきました。
今回は文字情報の表示方法について説明してみます。

Letter3DMaterialの用意

Letter3DMaterialというクラスのインスタンスを用意して、文字の色情報と透過度を指定します。
今回は青色(0000ff)で透過度を0.5としてみました。

後ほど出てくるActionScriptのコードでは以下の部分が該当します。

-----------14行目-----------
import org.papervision3d.materials.special.Letter3DMaterial;

-----------42行目～43行目-----------
//文字の設定　引数は色コード・透過度
letterformat = new Letter3DMaterial(0x0000ff , 0.5);

Text3Dの用意

実際に表示する文字列についてはText3Dクラスのインスタンスに指定します。
このとき、フォントも一緒に指定します。

フォントとしてはHelveticaBold、HelveticaLight、HelveticaMedium、HelveticaRomanの4つが用意されているようです。
フォントについて詳しくはドキュメントのorg.papervision3d.typography.Font3Dの項をご覧ください。

後ほど出てくるActionScriptのコードでは以下の部分が該当します。

-----------15行目～16行目-----------
import org.papervision3d.typography.Text3D;
import org.papervision3d.typography.fonts.HelveticaBold;

-----------45行目～47行目-----------
//表示文字内容の設定
//引数は表示文字・フォント・Letter3DMaterial
textdata = new Text3D("SEISYUN-B\nWe love creative life!!" , new HelveticaBold() , letterformat);

Text3Dインスタンスの位置変更

Text3Dクラスは基本図形たちと同様にorg.papervision3d.objects.DisplayObject3Dクラスを継承しています。 そのため、座標や回転角度といった基本的なパラメータをすべて備えています。

今回はマウス位置に合わせて回転するようにしてみました。

後ほど出てくるActionScriptのコードでは以下の部分が該当します。
(90を減じているのは角度を-90～+90の間で変動させるためです)

-----------57行目～63行目-----------
//マウスカーソルの位置に合わせて水平方向の角度を変更
//横に回すということはy座標中心に回すということ
textdata.rotationY = ((mouseX / 550) * 180 - 90);

//マウスカーソルの位置に合わせて垂直方向の角度を変更
//縦に回すということはx座標中心に回すということ
textdata.rotationX = ((mouseY / 400) * 180 - 90);

結果

マウス位置によって文字が角度変更します。

ソース

/* * テキストデータの配置と角度変更 * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.Text3D; import org.papervision3d.typography.fonts.HelveticaBold; import flash.events.Event; public class Sample08 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var letterformat:Letter3DMaterial; public var textdata:Text3D; //コンストラクタ public function Sample08() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //文字の設定　引数は色コード・透過度 letterformat = new Letter3DMaterial(0x0000ff , 0.5); //表示文字内容の設定 //引数は表示文字・フォント・Letter3DMaterial textdata = new Text3D("SEISYUN-B\nWe love creative life!!" , new HelveticaBold() , letterformat); scene.addChild(textdata); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //マウスカーソルの位置に合わせて水平方向の角度を変更 //横に回すということはy座標中心に回すということ textdata.rotationY = ((mouseX / 550) * 180 - 90); //マウスカーソルの位置に合わせて垂直方向の角度を変更 //縦に回すということはx座標中心に回すということ textdata.rotationX = ((mouseY / 400) * 180 - 90); renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回は物体の円運動について学習する予定です。

物体の円運動(三角関数の使い方)‐Papervision3Dのお勉強(8)‐へ。
同時に複数方向からの表示‐Papervision3Dのお勉強(6)‐へ。