Papervision3Dを始めてみた

2D表現しかできないと思っていたFlashで、3D表示が実現！？
一躍話題になっていた「Papervision3D」。
Gigazineの紹介記事で初めて知りましたが、これだけの速度で動くのは驚異的！
ActionScript2.0版とActionScript3.0版（FlashPlayer9.0以降）があって、さすがにこれだけ高速に動くのはAS3版かららしい。
Gigazine：Flashで動作する3Dエンジン「Papervision3D」

僕もひさしぶりにプログラミングしてみたくなりました。
まずはActionScript3自体、初めてなので、開発環境を落とす所から。
[Z]ZAPAブロ〜グ2.0：はじめてのActionScript3.0プログラミング
このページを読んで、Flex2 SDKをインストールしました。

次にPapervision3Dを始めるに当たって、以下の先輩たちのブログを参考に。

• note.x：Papervision3Dに唾付けてみた
  
• note.x：Papervision3Dメモ #1　←環境設定について一番詳しい
  
• 閃光的網站・弛緩複合体 -Review Division-：Papervision3D を弄ってみた(1)
  
• シン石丸の電脳芸事ニッキ：Papervision3Dで角丸矩形の平面を描く

掲載しておられるソースコードを参考にして、実際に組んだのがこれ。平面、球面、立方体、円柱といった代表的なプリミティブを表示しています。

HelloWorld.swf

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;
    import flash.filters.*;

    import org.papervision3d.scenes.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.materials.*;

    import org.papervision3d.core.*;
    import org.papervision3d.core.proto.*;
    import org.papervision3d.core.geom.*;

    [SWF(backgroundColor = 0x3333aa)]

    public class main extends Sprite
    {
        //　メンバ変数
        private var container : Sprite;
        private var scene     : Scene3D;
        private var camera    : Camera3D;
        private var rootNode  : DisplayObject3D;

        private var planeObj    : DisplayObject3D;
        private var sphereObj   : DisplayObject3D;
        private var cubeObj     : DisplayObject3D;
        private var cylinderObj : DisplayObject3D;

        private var material  : BitmapFileMaterial;
        private var rot      : Number = 0;

        //　コンストラクタ
        public function main():void
        {
            stage.frameRate = 60;
            stage.quality   = "MEDIUM";
            stage.scaleMode = "noScale";
            stage.align = StageAlign.TOP_LEFT;
            this.addEventListener(Event.ENTER_FRAME, update );
            this.stage.addEventListener(Event.RESIZE, resize );
            
            init3D();
        }

        //　3Dの初期化
        private function init3D():void
        {
            //　コンテナ生成
            this.container = new Sprite();
            addChild(this.container);
            this.container.x = this.stage.stageWidth  / 2;
            this.container.y = this.stage.stageHeight / 2;

            //　シーン生成
            scene = new Scene3D( container );

            //　カメラ設定
            camera = new Camera3D();
            camera.y = 100;
            camera.z = -800;
            camera.focus = 1200;
            camera.zoom = 0.3;

            //　rootNode生成
            //　シーンの下にrootNodeをつけ、その下に各モデルをくっつける
            rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) );

            //　マテリアル設定
            material = new BitmapFileMaterial( "HelloWorld.jpg" );
            material.doubleSided = true;

            planeObj = rootNode.addChild( new Plane( material, 300, 300, 2, 2 ) );
            sphereObj = rootNode.addChild( new Sphere( material, 150, 8, 8 ) );
            cubeObj  = rootNode.addChild( new Cube( material, 300, 300, 300, 1, 1 ) );
            cylinderObj = rootNode.addChild( new Cylinder( material, 150, 300, 8, 8 ) );
        }

        //　毎フレームの処理
        private function update( event:Event ):void
        {
            //  マウス座標でオブジェクトを回転
            rot += this.container.mouseY / 50;

            planeObj.rotationY = rot;
            sphereObj.rotationY = rot;
            cubeObj.rotationY = rot;
            cylinderObj.rotationY = rot;

            planeObj.x        = -600;
            sphereObj.x        = -200;
            cubeObj.x        =  200;
            cylinderObj.x    =  600;

            //レンダリング
            this.scene.renderCamera( camera );
        }

        //　画面のリサイズ時の処理
        private function resize(event:Event):void
        {
            this.container.x = this.stage.stageWidth  / 2;
            this.container.y = this.stage.stageHeight / 2;
        }
        
    }
}

ソースコードを掲載するにあたってはAS2HTMLを使用させていただきました。

プログラムではまずsceneを作って、そこにシーンの各モデルの親となるrootNodeをぶら下げます。

scene = new Scene3D( container );
rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) );

次にモデルの質感を定義するマテリアルを先に作ります。今回は画像ファイルからマテリアルを作る BitmapFileMaterial() 関数を使います。doubleSided はポリゴンの表側のみを描くか、表裏の両面を描くかを設定してます。

material = new BitmapFileMaterial( "HelloWorld.jpg" );
material.doubleSided = true;

いよいよモデルを作成します。Mesh3Dクラスのサブクラス、Plane、Sphere、Cube、Cylinderを使うと、簡単に代表的な形状を作れます。モデルを生成する関数は、Papervision3Dのorg.papervision3d.objects以下のasファイルに定義されています。
作ったモデルは先ほどの rootNode の下にぶら下げます。

planeObj = rootNode.addChild( new Plane( material, 300, 300, 2, 2 ) );

初期化はここまで。あとは scene の renderCamera() 関数を毎フレーム呼び出すだけです。

this.scene.renderCamera( camera );

関連サイト
svnリポジトリ
ここからAS3版を取ってきます。設定についてはnote.xさんのこちらの記事を参考にしました。

Papervision3D
Papervision3Dの開発者による公式ブログ。新しいリリースについての情報などが公開されています。

Papervision3D WIKI.
Papervision3Dに関するWiki。
サンプルソースや素材などがアップされています。

しばらく追いかけてみたいと思います！