文字列の円運動2(表示物のネスト)‐Papervision3Dのお勉強(10)‐

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

前回、文字列の円運動について勉強しましたが、今回はさらにその続きです。
今回は円運動している文字列全体をマウス位置に合わせて角度変更させてみます。

文字列のDisplayObject3Dへの格納

前回は文字列を一つ一つの文字へと分け、それぞれをScene3Dオブジェクト上に配置しました。

今回は "文字個別の角度変更" と同時に、文字列全体の角度変更も行いたいため "文字列全体としてのコントロール" も同時に行います。

文字一つ一つで "円運動するための角度" と "円運動そのものの角度" の両方を計算するのはかなり骨が折れそうなので……。

文字一つ一つをDisplayObject3Dのインスタンスに格納し、文字が格納されたDisplayObject3DのインスタンスをScene3Dのインスタンス上に格納するという手順を踏みました。

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

-----------51行目-----------
display = new DisplayObject3D();

-----------56行目〜63行目-----------
//文字の分解とText3Dインスタンス生成
for(var i:int = 0 ; i < text_str.length ; i++){
text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat));
degrees_arr.push(i * 360 / text_str.length);//角度を均等に分割
display.addChild(text_arr[i]);
}

scene.addChild(display);

文字列の角度変更

ENTER_FRAME時に呼び出される関数内にて、文字それぞれの角度変更と同時に、文字列全体の角度変更を行います。

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

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

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

結果

"SEISYUN-B CREATIVE LIFE RECOMMENDATION "

という文字列が円運動していて、マウス位置によって円運動の角度が変更されます。

円の端の方がうまく表示されないのは、わたしのコーディングが原因でしょうか？　理由をご存知の方がいましたらぜひご教授いただきたいです。

ソース

/* * 文字列を文字に切り離しての円運動(円の角度変更あり) * 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.objects.DisplayObject3D; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.Text3D; import org.papervision3d.typography.fonts.HelveticaBold; import flash.events.Event; public class Sample11 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var display:DisplayObject3D; private var degrees_arr:Array = new Array();//角度格納用配列 private var text_arr:Array = new Array();//文字格納配列 private var text_str:String = "SEISYUN-B CREATIVE LIFE RECOMMENDATION "; private var letterformat:Letter3DMaterial; private var basicx_int:int = 0;//基準x座標 private var basicz_int:int = 0;//基準z座標 private var radius_int:int = 500;//半径 private var speed_int:int = 3;//毎回の移動角度 //コンストラクタ public function Sample11() { init();//初期化関数開始 } //初期化関数 public function init():void{ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); display = new DisplayObject3D(); //文字の設定　引数は色コード・透過度 letterformat = new Letter3DMaterial(0x0000ff , 0.8); //文字の分解とText3Dインスタンス生成 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat)); degrees_arr.push(i * 360 / text_str.length);//角度を均等に分割 display.addChild(text_arr[i]); } scene.addChild(display); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //各文字の座標及び角度計算と角度の増加 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr[i].x = Math.sin(degrees_arr[i] * Math.PI/180) * radius_int + basicx_int; text_arr[i].z = Math.cos(degrees_arr[i] * Math.PI/180) * radius_int + basicz_int; //rotationYにおいての文字の反転が行えなかったため、scaleXを角度によって変更することで反転表示に対応 if(degrees_arr[i] > 90 && degrees_arr[i] < 270){ text_arr[i].rotationY = degrees_arr[i] + 180; text_arr[i].scaleX = 1; } else{ text_arr[i].rotationY = degrees_arr[i]; text_arr[i].scaleX = -1; } degrees_arr[i] += speed_int; degrees_arr[i] %= 360; } //円形文字全体の角度変更 //マウスカーソルの位置に合わせて水平方向の角度を変更 //横に回すということはy座標中心に回すということ display.rotationY = ((mouseX / 550) * 180 - 90); //マウスカーソルの位置に合わせて垂直方向の角度を変更 //縦に回すということはx座標中心に回すということ display.rotationX = ((mouseY / 400) * 180 - 90); renderer.renderScene(scene, camera, viewport);//描画 } } }

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

次回はさらにもうちょっとだけ円運動について勉強する予定です。

文字列の円運動3(螺旋の表現)‐Papervision3Dのお勉強(11)‐へ
文字列の円運動‐Papervision3Dのお勉強(9)‐へ。