3D物体の表示と回転‐Papervision3Dのお勉強(2)‐

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

Flash・ActionScriptでの3次元画像表示ライブラリ "Papervision3D" の学習シリーズ、前回は環境構築を行いました。
ついに今回から本番！　コーディングの開始です。

体系的に解説しているサイトを探してみたのですが、良いサイトが見つからなかったです。公式ページのTutorialsも工事中？のままだし……。

たとえ良いと思えるサイトがあっても、なぜかそこの説明通りにやってもうまくいかない！　わたしの理解度が低いから？　それとも古いバージョンと新しいバージョンでは仕様がかなり異なる？　この辺り、詳しい方いましたら教えていただきたいです。

なんか前振り長くなってしまいましたが……API仕様書やネット上にある他の方々の制作物を主な頼りとしながら、勉強を開始しました。
勉強過程はこのblogに掲載していきますので、どなたかの参考になれば嬉しいです。
ただ、かなり推測に基づいての勉強となってしまっているので、もしも間違いがありましたなら指摘いただけると幸いです。

描画の仕組み

Papervision3Dにおける描画は、どうやら以下の四つのクラスを基本として行われているようです。

• SceneObject3D(サブクラスとしてScene3D)
  3D描画する物体たちの置き場となります。
  Papervision3Dでの3D描画におけるroot役です。
• Viewport3D(サブクラスとしてBitmapViewport3D)
  3D描画が行われるキャンバス役となるクラスです。
  例として、一つの物体を八方向から見た結果を表示したいときには、Viewport3Dを八つ用意してあげる必要があります。
• CameraObject3D(サブクラスとしてCamera3D)
  名称の通り、カメラ役となるクラスです。
  3Dの物体をどのような視点から表示するかはこのクラスのインスタンスが制御することになります。
• BasicRenderEngine(サブクラスとしてLazyRenderEngine・QuadrantRenderEngine)
  上記三つのクラスのインスタンスを使用して描画を行うためのクラスです

基本図形

org.papervision3d.objects.primitivesパッケージを見ますと、立方体や円筒等の基本的な図形は最初から用意されています。

• Cone(円錐)
• Cube(立方体)
• Cylinder(円筒)
• PaperPlane(紙ヒコーキ)
• Plane(平面)
• Sphere(球)

図形の表示

いきなり複雑な処理に挑戦すると頭がこんがらがるので、まずは "ただ図形を描画する" だけをしてみることにしました。 以下、結果画像です(動きがないのでjpgで)。

以下、ソースです。

/* * 基本図形(Sphere)の表示 * 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.primitives.Sphere; public class Sample01 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var sphere:Sphere; //コンストラクタ public function Sample01() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); sphere = new Sphere(); scene.addChild(sphere); renderer.renderScene(scene, camera, viewport);//描画 } } }

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

図形の回転

次に表示したShpereの回転に挑戦してみます。

上述した基本図形たちはどれもorg.papervision3d.objects.DisplayObject3Dクラスを継承しています。
ドキュメントでDisplayObject3Dクラスについてみてみると、基本となるプロパティとメソッドがこのクラスにて多く定義されていることがわかります。

今回はyawという回転軸に沿って回転するメソッドを使用しました。
ENTER_FRAMEイベント用の関数を定義し、その中でShpereを回転させています。
以下、結果です。

以下、ソースです。

/* * 基本図形(Sphere)の回転 * 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.primitives.Sphere; import flash.events.Event; public class Sample02 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var sphere:Sphere; //コンストラクタ public function Sample02() { init();//初期化関数開始 } //初期化関数 public function init(){ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); sphere = new Sphere(); scene.addChild(sphere); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { sphere.yaw(5); renderer.renderScene(scene, camera, viewport);//描画 } } }

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

次回は図形への画像の貼り付けについて説明します!

3D物体への画像貼り付け‐Papervision3Dのお勉強(3)‐へ。
導入‐Papervision3Dのお勉強(1)‐へ。