脳の中の風船

前回紹介したActionScriptの3Dライブラリ「Papervision3D」をインストールし、FlashDevelopやFlash CS3で使えるようにセットアップしてみます。ついでにサンプル作成も。

Papervision3D 2.0 Alpha (GreatWhite) の入手

正式リリース版はGoogle Codeで配布されていますが、先日（といっても結構前に）リリースされた、2.0 Alpha（GreatWhite）を使うことにします。Papervision3D 2.0 Alphaは公開リポジトリから入手できるようです。
http://papervision3d.googlecode.com/svn/trunk/

Subversion形式で公開されているので、クライアントソフトが必要です。
私はTortoiseSVNを利用しました。Windowsのシェル拡張で、インストールすると右クリックにメニューが追加されます。

リポジトリからPapervision3Dをダウンロードするには、エクスポート先のフォルダを（作成して）選択し、右クリック > TortoiseSVN > Export、表示されるダイアログで URL of repository に上記 http://papervision3d.googlecode.com/svn/trunk/ を入力して、OKをクリック。
2.0 Alphaは branches/GreatWhite フォルダ以下にあります。

Flex 3 SDK の設定

まずはクラスライブラリ（ソース版）用のディレクトリ、たとえば C:\flex_sdk_3\frameworks\sources を作成します。
その中に、Papervision3Dの branches/GreatWhite/src 内にある com、fl、org フォルダをコピー。
次にFlexコンパイラのコンフィグを設定します。設定ファイルは C:\flex_sdk_3\frameworks\flex-config.xml。
<source-path> 部分がデフォルトでコメントアウトされていたので、それをはずし、以下のように記述しました。

<source-path>
  <path-element>sources</path-element>
</source-path>

これでfcshでmxmlcを実行するときにPapervision3Dが使えるようになるはずです。

FlashDevelop の設定

FlashDevelopもfcshを使っているだけなので、上記設定でコンパイルはできるようになっていると思います。
ただし、入力補完や宣言参照が効くようにするには Tools > Global Classpaths で指定してやる必要があるようです。

Flash CS 3 の設定

Flash CS3を使ってパブリッシュするとき用です。編集 > 環境設定 > ActionScript > ActionScript 3.0 設定 にて、C:\flex_sdk_3\frameworks\source にクラスパスを通します。

ためしに3D Flashを作ってみました。

さてさて、インストール確認がてら、Papervision3Dを使って簡単なFlashを作ってみました。

まずはFlashDevelop編。

Project > New Project を選択し、ActionScript 3 - Default Project を選んで、myPlane と名前をつけてプロジェクトを作成します。
プロジェクトフォルダ内、src/Main.as を次のように編集します。Papervision3Dのひな形的なソースですね。

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

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.special.CompositeMaterial;

    [SWF(backgroundColor=0x000000)]

    public class Main extends Sprite
    {
        private var scene:Scene3D;
        private var viewport:Viewport3D;
        private var camera:Camera3D;
        private var renderer:BasicRenderEngine;
        private var objPlane:Plane;

        public function Main()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.quality = StageQuality.MEDIUM;
            init3D();
        }

        private function init3D():void
        {
            //ビューポート設定
            viewport = new Viewport3D(0,0,true);
            viewport.opaqueBackground = 0x000000;
            addChild(viewport);

            //レンダー設定
            renderer = new BasicRenderEngine();

            //カメラ設定
            camera = new Camera3D();
            camera.z = -300;
            camera.focus = 500;
            camera.zoom = 1;

            //シーン設定
            scene = new Scene3D();

            //マテリアル設定
            var colorMat:ColorMaterial = new ColorMaterial( 0x006699, 1 );
            var wireMat:WireframeMaterial = new WireframeMaterial( 0x0099cc );
            var compoMat:CompositeMaterial = new CompositeMaterial();
            compoMat.addMaterial(colorMat);
            compoMat.addMaterial(wireMat);
            compoMat.doubleSided = true;

            //Plane生成
            objPlane = new Plane(compoMat, 300, 300);
            scene.addChild(objPlane);

            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        private function onEnterFrame(event:Event):void
        {
            objPlane.rotationY += 2;
            renderer.renderScene(scene,camera,viewport);
        }
    }
}

そして、[F5]！このような bin/myPlane.swf が作成されました。

今度はFlashDevelop+Flash CS3編。

FlashDevelopで Project > New Project から、ActionScript 3 - Flash IDE Project を選択し、新規プロジェクト myPlane2 を作成。
Flash CS3で 新規作成 > Flash ファイル（AS 3.0）、プロパティウィンドウのドキュメントクラス欄にクラス名 Main と入力し、先ほどのプロジェクトフォルダ内に app.fla として保存します。

FlashDevelopに戻って、Projectウィンドウのプロジェクトフォルダを右クリック、Add > New Class を選択し、Main.as というActionScriptファイルを作成します。ソース内容は上記と同じものを。

そして、[F6]！先ほどと同じような app.swf が作成されました。
Flash CS3の設定がデフォルトのままだと12FPSなので、こちらの方がカクカクしてますね。

……また文字ばっかになってしまったorz

技術ネタ | flashdevelop, flex3, papervision3d
Trackback URI : http://phenotype.jpn.org/blog/archives/19/trackback