Flex SDK + Papervision3Dで球を描く&回転させるチュートリアル

Flex SDK + Papervision3Dで、ワイヤーフレームの球を描いて回転させるまでのチュートリアルです。Flex SDK 4 + Papervision3D 2.1の組み合わせで試してみましたが、特に問題なくビルドできましたよと。お手軽にFlash 3Dで遊べます。

サマリ

Flex SDKのダウンロード
Papervision3Dのダウンロード
ビルドに必要なファイルの準備
スクリプトを書く
ビルド用設定ファイルを書く
コンパイル!
補足:参考にしたサイトなど

1.Flex SDKのダウンロード

まずは、Flex SDKのインストールから。Flex 4 Downloads - Adobe Open Sourceより、現時点で最新の「4.1.0.16076」をダウンロードして、任意のディレクトリに展開します。

展開後、「/bin」を環境変数PATHに追加。コマンドプロンプトを開き、

> mxmlc -version

でバージョンが表示されればOKです。

2.Papervision3Dのダウンロード

Papervision3D - Google CodeからPapervision3Dのswcをダウンロードします。
今回は最新のコンパイル済みバイナリ「Papervision3D_2.1.920.swc」を取得して使用しました。

3.ビルドに必要なファイル/フォルダの準備

次に「*-config.xml」などビルドに必要なファイル/フォルダを用意します。必要なものは以下の3つです。

Sample.as: Flashのソースコード。今回は1クラスなのでファイルも1つです。
Sample-config.xml: コンパイラに渡すオプションを定義するファイルです。
Papervision3D_2.1.920.swc: ↑でダウンロードしたPapervision3Dのライブラリです。

これらを以下の構成で配置。

<root>
├lib
│ └Papervision3D_2.1.920.swc
└sample
　 ├Sample.as
　 └Sample-config.xml

「sample2」とか作ったときのことを考えて、Papervision3D_2.1.920.swcだけ別のディレクトリに置いています。

4.スクリプトを書く

ファイルができたら、Sample.asにサンプルコードを書きます。ポイントは、ざっくりと以下。

(Spriteの代わりに) BasicViewを継承してメインとなるクラスを作る。
BasicViewが準備してくれる「シーン」オブジェクトに、表示したい3Dオブジェクト(以下の例ではSphere)を生成して追加。
- Sphereのコンストラクタで、オブジェクトをワイヤーフレームで表示するMaterialを指定する。
「startRendering()」でレンダリング開始。
「onRenderTick」をオーバーライドして、定期的に球を回転する操作を追加する。

package {
 
  import flash.events.Event;
  import org.papervision3d.materials.*;
  import org.papervision3d.materials.utils.*;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.view.BasicView;
  
  /**
   * 球を表示して回転させるサンプル。
   */
  public class Sample extends BasicView { // SpriteではなくBasicViewを継承する。
    
    // 表示する3Dオブジェクト(球)
    private var sphere:Sphere;
    
    /**
     * コンストラクタ
     */
    public function Sample() {
      
      // オブジェクトをワイヤーフレームで表示するマテリアルを作成
      var material:WireframeMaterial = new WireframeMaterial(0xFF0000);
      // 表示する3Dオブジェクト(球)を作成。引数でマテリアルを指定する。
      sphere = new Sphere( material );
      
      // シーンに3Dオブジェクトを追加。
      scene.addChild(sphere);
      
      // レンダリング開始
      startRendering();
    }
    
    /**
     * レンダリング時に定期的に呼ばれる関数?をオーバーライド
     */
    override protected function onRenderTick(event:Event = null):void {
      // 球を回転
      sphere.yaw(2);
      super.onRenderTick(event);
    }
 }
}

5.ビルド用設定ファイルを書く

次に、Sample-config.xmlを書きます。内容は以下のとおりです。

<flex-config>
  <output>bin/sample.swf</output>
  <default-size>
    <width>500</width>
    <height>500</height>
  </default-size>
  <default-frame-rate>24</default-frame-rate>
  <default-background-color>0xFFFFFF</default-background-color>
  <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
  <compiler>
    <debug>true</debug>
    <library-path append="true">
      <path-element>../lib</path-element>
    </library-path>
  </compiler>
</flex-config>

swfは、bin/sample.swfとして保存
高さや幅、背景色などステージの基本設定を定義

しているほか、

Papervision3D_2.1.920.swcを読み込む為のライブラリ置き場のパス(library-path)を指定

しています。library-path要素は、「append="true"」にしておかないと上書き設定になってデフォルトのライブラリがロードされなくなってしまうのでご注意。

6.コンパイル!

あとは、sampleディレクトリで以下のコマンドを実行すればOK

> mxmlc Sample.as

「bin/sample.swf」に以下のようなswfが生成されるはずです。
生成されるswfのサンプル

んー、初めてダイアログが表示できたよ!的な感動があるな。ちょい楽しい。

補足:参考にしたサイトなど

以下のサイトを参考にしました。

サマリ