ブラウザだけでできる!wonderflではじめるFlash制作

第3回 ライブラリ(Papervision3D)を利用してFlashをつくっていく

この記事を読むのに必要な時間:およそ 2.5 分

Papervision3D

Camera3D,Scene3D,Viewport3D,BasicRenderEngineは,Papervision3Dの3Dレンダリング用のクラスです。

3Dを表現する場合に,液晶モニターは2Dの表現しかできません。そのため実際には,3Dの環境を,ある視点から眺めた視界を,ある平面に投影したものとして,FlashPlayerは表示することになります。

Papervision3Dのクラスでは,それぞれ以下のように対応しています。

3Dの環境Scene3D
視点Camera3D
平面Viewport3D
投影するエンジンBasicRenderEngine

今回の例ではScene3Dの中にCubeを置き(addChild⁠⁠,回転させています。

では3Dの環境はどうなっているのでしょうか? 視点はどこにあり,どこを向いていて,3Dの環境のどこにCubeがあるのでしょう?

もっと明確にイメージするために,光源を置き,カメラ,Cubeのx,y,zの位置を明示的に指定してみます。

これらを追加で指定したコードは以下にあります。

コードを追加したサンプル:

FORK前後で,コードの差分を見る

wonderflでは,今までのコードの下にあるFORKボタンをクリックし,FORKした後に変更を行うことで,先ほどまでのコードはそのまま残したまま,新たにコードを発展させていくことができますが,FORKしたコードのページには,タイトルの近くにFORK元のコードへのリンクが表示されます。

図2 FORKされたページのタイトル部分

図2 FORKされたページのタイトル部分

ご覧いただければすぐに分かりますが,コードを追加したサンプルは,先に挙げたサンプルpapervision3d simple example(cube)をFORKして作成したものになっています図2⁠。

また,FORK元のタイトルの後ろに[diff]という表示があります。この[diff]をクリックすると,FORK前後で変更した行が表示されます。

図3 diffをクリックすると,FORK前後で変更した行が一目で分かる

図3 diffをクリックすると,FORK前後で変更した行が一目で分かる

動作しているFlashを見ると,図4のように,x,y,z軸があることが理解できたのではないでしょうか?

図4 今回のサンプルの座標軸

図4 今回のサンプルの座標軸

第3回のまとめ

今回はPapervision3Dをご紹介しながら,wonderfl上でPapervision3Dを使ったサンプルを超特急でつくってみたのですが,ここまでの知識を応用すると,さまざまな物体を3DCGで表現できます。是非,お試しください。

もし,プログラミングに困ったら,Papervision3Dに関する豊富なコード例がwonderfl上にありますので,コードを読んだり,FORKして編集しながら学習していくというのも,アリですよ!

enjoy!

著者プロフィール

大塚雅和(おおつかまさかず)

面白法人カヤックのWebプログラマー。数々のマッシュアップサービスで受賞するうちに,ついには「マッシュくん」と呼ばれるように。今回取り上げたwonderfl build onlineをはじめ,日本最大の音声コミュニティサイト「こえ部」をゼロから作ったスマッシュコンテンツ仕掛け人。

面白法人カヤックの「技術部」,「BM11」(研究開発ラボ)のメンバーとして在籍中。

URLhttp://www.kayac.com/member/ohtsuka
URLhttp://maaash.jp/