- 2009-04-16 (木)
- 技術
Papervision3DはFlashを使って3D空間を簡単に作成できるようにしたActionScriptライブラリです。
Versionが1.Xから2.Xに変わって、かなり仕様が変わったようでネットに転がっているサンプルが結構動かなくて四苦八苦してしまったのでメモメモ。
ぶっちゃけ簡単にと言いましたがそれでもかなり敷居が高いと思います。
でも100行ちょいで3Dを描くことができるので、使い始めるとあっという間に時間がすぎてくほど面白いライブラリ。
ではさっそく使ってみましょう。
ダウンロード
ダウンロードはsvnからするのが主流のようですが、zipファイルがあったのでこちらを使っています。
API Documentation
APIはまだ全然良く分かっていないので、以下のリファレンスを見ながらコーディングしました。
それでもまだまだ難しい・・・
All Packages - API Documentation
flaファイルの作成
ステージには何も置かずドキュメントクラスを使いました。
なので、以下のようにファイル名をドキュメントクラスに入力します。
シンプルなPapervision3DImage.asファイルの作成
まずすごくシンプルに立方体を回転させてみます。
マウスの座標により回転の速度が変化するように作ってみました。
これを実現するのに68ステップしかコードを書いていないのは魅力的です。
マリオの画像をPapervision3Dで回転させてみる
ただこれだけだとちょっと物足りないので、マリオの画像を立方体の各面に描画してみたいと思います。
画像のロードはどうやら2種類のほうほうがあるらしく、両方試してみました。
■BitmapFileMaterialクラスを使った場合
この方法はActionScriptが実行されたタイミングで同階層の画像ファイルを探しにいくのでswfファイルに取り込みません。
よくわからなかったのですが、サーバーに画像ファイルとswfファイルを配置して直接swfファイルを見に行くとマリオが表示されたのですが、
htmlファイルにembedで表示したら画像が表示されなかった。
コンストラクタに渡す画像のパスはもしかしてブラウザのキャッシュフォルダの中を見ちゃってるのかな？いやまさかねw
↑のパターンがよくわからなかったので、直接swfファイルに取り込む方法で行きました。
まずCS3の「ファイル」→「読み込み」→「ライブラリに読み込み」
から画像を選択します。
んで、mario.gifの上で右クリックし、リンケージプロパティを表示させます。
クラス名を入力すれば、
のように使うことができます。
これを立方体（Cubeクラス）のコンストラクタに渡せばOK！
■全体のプログラムコード
gist: 96473 - GitHub
まとめ
Box2Dもそうですが、ライブラリの仕様をある程度把握するまで時間が掛かってしまうのが大変なところですが、何本かサンプルを作ると雰囲気を感じ取れるのでPapervision3Dもちょいちょい触ってみようと思います。
Tweenerとかと連携しても面白そうですね。
■参考リンク
note.x papervision3d2.0
こちらのブログのPapervision3Dはかなりすごいことになっています。
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1181
- Listed below are links to weblogs that reference
- ActionScriptで3D空間 - Papervision3Dをためしてみた from HouseTect, JavaScript Blog
