「Papervision3D」を試す!

2008年6月21日(土)
代島 昌幸

ダイナミックな表現に挑戦

 それではもう少し深く掘り下げたダイナミックな表現に挑戦していきたいと思います。前のページで作成した5パターンのDisplayObject3Dを、ランダムに10個生成し、円を描くように配置してみます。そして、これまでのサンプルと同様にマウスの位置によってDisplayObject3Dを変化させます。ダウンロードしたサンプルの「07Circle3D」フォルダ内の「Circle3D.as」を参照してください。

 生成したいDisplayObject3Dの個数は「objLength」で指定します(30行目)。

private var objLength : int = 10;

 rootNodeという名前のDisplayObject3Dを生成し、これをベースにしてその中に複数のDisplayObjectを配置していきます(68行目)。

rootNode = new DisplayObject3D();

 数パターンのDisplayObject3Dをランダムで生成する関数randomCreateDiplayObject3D()を呼び出します(80行目~85行目)。

 rootNodeの中心に対して円を描くようにDisplayObject3Dを配置させます。(87行目~105行目)

 関数update3D()内で、マウスの位置によってrootNodeの回転速度と方向を変化させます(152行目~163行目)。これで完成です。

 次に複数のPlaneオブジェクトを螺旋状に配置していきます。ダウンロードしたサンプルの「08Spiral3D」フォルダ内の「Spiral3D.as」を参照してください。

 生成したいPlaneオブジェクトの個数は「objLength」で指定します(28行目)。ここでは100個のPlaneオブジェクトを生成することにします。

private var objLength : int = 100;

関数createPlaneObject()を呼んで、100個のPlaneオブジェクトを生成します(77行目)。

for (i = 0; i createPlaneObject();
}

 螺旋状に配置します(82行目から95行目)。

 Planeオブジェクトは10度ずつ角度をずらして配置させます(93行目)。これで完成です。

まとめ

 今回はpublic beta1.7を使用しましたが、前述した最新のpublic alpha2.0 GreatWhiteは大幅に機能が追加され、正に今この時も開発が進んでいます。そして、FlashPlayer10のパフォーマンス面では、GPUに描画を一部負担させるハードウェアアクセラレーション機能「GPU Compositing」の追加により、CPUの負荷が軽減され、複雑な計算を必要とするグラフィックの処理性能が大幅に向上するとのことです。このように日々の技術の進歩により表現の可能性も広がってきています。

 今後、より深くPapervision3Dを理解したいという方は、「オフィシャルサイト(http://papervision3d.org/)」「APIドキュメント(http://www.papervision3d.org/docs/as3/)」「Papervision 3D Blog(http://blog.papervision3d.org/)」「Papervision 3D Wiki(http://wiki.papervision3d.org/)」「note.x(http://blog.r3c7.net/)」「Mr.doob's blog(http://mrdoob.com/blog/)」を参考にさまざまな表現に挑戦されてみてはいかがでしょうか。

株式会社アーキタイプ
数社のWEBプロダクションにてさまざまなFlashサイト制作に携わる。2007年5月、株式会社アーキタイプを設立。テクニカル・ディレクション、インタラクション・デザイン、プログラミングを担当。http://www.archetyp.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています