第3回では、wonderfl build online（以下、wonderfl）上でライブラリを使いながら、さらに高機能なFlashをつくっていきます。

高機能なFlashを効率よく作るには、ライブラリの使用は不可欠です。Actionscript3を使用したオープンソースのライブラリは豊富にありますので、先人の知恵を活かしていきましょう[1]⁠。

wonderflでPapervision3D入門

車メーカーのキャンペーンサイトなどで、3DCGを使って商品のデザインを演出しているサイトを見かけたことはありませんか？

実は、高速な演算処理を可能したActionscript3の登場により、Flashを使うことで3DCGを操作できるようになっています。

Flashで3Dを扱うための代表的なライブラリとして、Papervision3Dがあります。現在も活発に開発を続けられており、パフォーマンス向上や機能追加が行われています。

wonderflでPapervision3Dを利用する

wonderflでは、現時点（3月4日）最新版のバージョン2.0.869を使用可能です。

以下のページに、シンプルなサンプルを用意いたしました。前回と同じようにFORK（開き、コードの下にある「FORK」ボタンをクリック）してください。

今回利用するサンプル：

• papervision3d simple example（cube）

自分のページに、FORKされたサンプルが表示されます。Flashの中央でマウスの位置に応じて回転する赤い立方体が見えましたか？

では早速、コードを見てみましょう。

01: package {
02:   import flash.display.*;
03:   import flash.events.*;
04: 
05:   import org.papervision3d.cameras.Camera3D;
06:   import org.papervision3d.materials.*;
07:   import org.papervision3d.objects.*;
08:   import org.papervision3d.objects.primitives.Cube;
09:   import org.papervision3d.render.BasicRenderEngine;
10:   import org.papervision3d.scenes.Scene3D;
11:   import org.papervision3d.materials.utils.MaterialsList;
12:   import org.papervision3d.view.Viewport3D;
13: 
14:   public class PV3D_01 extends Sprite {
15:     private var camera    :Camera3D;
16:     private var scene     :Scene3D;
17:     private var viewport  :Viewport3D;
18:     private var renderer  :BasicRenderEngine;
19: 
20:     private var cube      :Cube;
21: 
22:     public function PV3D_01() {
23:       camera   = new Camera3D();
24:       scene    = new Scene3D();
25:       viewport = new Viewport3D( stage.stageWidth, stage.stageHeight );
26:       renderer = new BasicRenderEngine();
27:       addChild( viewport );
28: 
29:       var materials :MaterialsList = new MaterialsList( { all : new ColorMaterial(0xD7261C) } );
30:         cube = new Cube( materials );
31:         scene.addChild( cube );
32: 
33:         addEventListener( Event.ENTER_FRAME, onEnterFrame );
34:       }
35: 
36:       public function onEnterFrame(e:Event): void {
37:         cube.rotationX += ( mouseX - stage.stageWidth /2 ) / 200;
38:         cube.rotationY += ( mouseY - stage.stageHeight/2 ) / 200;
39: 
40:         renderer.renderScene( scene, camera, viewport );
41:      }
42:   }
43: }

前回同様、コードを編集し、コンパイル後に生成されるFlashがどう変化するか、見ながら理解を始めてみます。

なお、最新のPapervision3Dのドキュメントは下記にあります。

• http://docs.pv3d.org/

見たことの無いクラス名等出てきたら、都度、参照しながら理解を深めましょう。

29行目に、16進数：0xD7261Cがあります。これを好みの色に変更してみましょう。リコンパイル後に表示されるFlashを見ると、立方体の色が変わっていますね。

この16進数はCubeの色を表していますが、コードを見ると、ColorMaterialというクラスに第一引数として色を渡し、ColorMaterialはその後MaterialsListとしてCubeをインスタンス化する時に引数として渡しています。つじつまが合いますね。

33～38行目辺りは前回も近いコードがあります。37、38行目の数字を変えると、立方体の回転速度が変わると思います。

コードを見ると、33行目で、Event.ENTER_FRAMEというイベントにaddEventListenerしてonEnterFrameという関数を結びつけています。

Event.ENTER_FRAMEは毎フレームの初めに起こるイベントですので、onEnterFrame関数は毎フレーム呼ばれ、cube（立方体）のrotationX,rotationY（変数名の英語の意味のとおり、X、Y軸の周りの角度をあらわす）を変更しています。

Papervision3D

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

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

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

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

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

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

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

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

• papervision3d light and a flatshadedcube

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

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

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

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

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

第3回のまとめ

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

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

enjoy!