Papervision3D を弄ってみた(1)
2007/03/17 23:36 - Papervision3D
その公式ブログにまとめられている、「犀」だの「地球」だの「3D 空間内を乱れ舞う日めくり暦」だのといったスッゲぇ SWF の数々で見る者の度肝を抜く Papervision3D（以降、PV3D ）。
私としては、一体全体、何がどうしてこういった表現が実現されているのか、SWF をみているだけでは全く見当もつきません。その Flash 表現としての凄さに、ただただ驚嘆するだけの日々を過ごしてきました。
PV3D のクラスを取得してはみたものの、そのクラス数はかなりも多いし、継承継承でクラスの作りがけっこう分かりづらい。それに個別に見ているいるだけじゃ各クラス群がどういう風に協働してひとつの作品になるのか、さっぱり分かりません。
そんな中、取っつきやすそうなサンプルとそのソース（以降、参考ソース）がエントリーされているブログを、とあるソーシャル・ブックマーク経由で見つけました。
こういった原型的なサンプルとそのソースは、複雑な機構を解析するとっかかりとして、実にありがたいものです。
んなわけで、ちょこっと実験してみたワケですが、その過程で改めて感じたのは、三次元を扱うってことは、3つの観点からの回転というか動きというか、を制御することなんだなぁ、ということでした。
その3つの観点からの回転に対する自分なりの理解を整理するために、これから何回かに渡って当ブログにエントリーしていきますが、まずその前にいきなり躓いたことから先に記述します。
冒頭に挙げた参考ソースからまず分かったことは、Plane クラスの挙動でした。
Plane クラスは、その名の通り『平面』を定義するクラスですが、その平面というのは長方形（含む正方形）に限られるらしい。
で、その長方形の形態は、横の辺の長さと縦の辺の長さを、それぞれ第2、第3引数として指定することで決めます。
そして、第1引数で指定する ××Material クラスを、表示オブジェクトとしてその長方形に割り当てますが、その基準点は長方形の左上ではなく中心に設定されます。
××Material クラスは以下の4種類。
- BitmapData を使う BitmatMaterial と BitmapAssetMaterial
- MovieClip を使う MovieMaterial と MovieAssetMaterila
- 指定色で塗りつぶす ColorMaterial
- ワイヤーフレーム表現をおこなう WireframeMaterial
Plane クラスの第4、第5引数では、それぞれ横と縦のセグメント数を指定するようになっています。
このセグメント数で上記4種類の Matetial オブジェクトを細かい三角形の集合に分解し、3D空間内における配置による歪みを生じさせます。
かつてエントリーした自作の 3D クラスでは、BitmapSkin クラスにのみ DistortImage 用の三角形メッシュを適用していましたが、PV3D ではすべての Material クラスに適用しているようですね。
で、それらの面を組み合わせることで立体オブジェクトを構成するのが PV3D の基本的な流れである、と私は判断しました。
PV3D における立体オブジェクト作成手段としては、ひとつひとつ面を作って構成するという手法とは別に、3D レンダリングソフトのフォーマットを読み込むというもうひとつの手法もあるようですが、自分としては 3D レンダリングは全くの未知の領域だし、関わるつもりもないので、そっち方面は一切スルー。
複数の平面を組み合わせることで世界を構成するというのなら、まず実験の手始めに、基礎の基礎として、ひとつの平面だけを作ってそれを回転させてみようと思いたった私は、参考ソースに以下のような手を加えました。
- 立方体の各面のうち正面にある平面のみを残してあとの5個の面は削除
- 残した平面はそれ自身の基準点が 3D 空間の基準点と重なるように配置
- 平面は mouseX に応じて Y軸を中心に回転
その改造サンプルが以下のものですが…… 期待した動きと違う！
視点に対して面が 90 度になっていないにも関わらず、面が見えなくなるときがある。
どうやら Plane には表面と裏面の概念が導入されているらしいぞ。
で、クラスを調べてみたところ、Plane クラスにではなく、面の表示オブジェクトである××Material クラスに裏と表がありました。
親クラスである MaterialObject3D クラスに oneSide と doubleSided の二つの Boolean 型プロパティが存在し、これで裏表有りと裏表無しを指定するようになってます。
そのデフォルトはと調べてみると…… やっぱりだ！ 裏表有り。
ColorMaterial クラスの第3引数に initObject があるので、ここで裏表無しの定義を追加します。 そして完成した期待どおりの動きをするようになったのが以下のサンプルです。
- ソース（ 01WorldMove.zip 5.28 KB ）
