PV3D。カメラの話。

■多謝
http://clockmaker.jp/blog/2009/05/papervision3d_tutorial_5/

■まずはカメラを動かすことを体験
デモはカメラの移動軌跡をトゥイーンライブラリのTweenerを使って、ベジェ曲線として動かすものです。
http://labs.zeh.com.br/blog/?p=104

また、カメラのプロパティ(xyzや、rotationXYZなど)のイメージをつかむには次の記事が参考になります。
http://www.y-tti.com/blog/2008/04/papervision3d_2.php

本記事ではカメラの動かし方を3分類に分け、それらを順を追って説明していきます。

* 自動回転型
* マウスの位置連動型
* マウスのドラッグ＆ドロップ型

■パーティクル
よりリアリティーを出すために地球の周りを浮遊する隕石も作ってみました。これはPapervision3Dのパーティクル機能を作って再現しています。次のスクリプトは2000の幅を持った立方体の中に幅4のパーティクルを500個生成するというものです。

// PV3Dライブラリをインポート import org.papervision3d.view.*; import org.papervision3d.materials.*; import org.papervision3d.objects.primitives.*; // パーティクル関連 import org.papervision3d.materials.special.ParticleMaterial; import org.papervision3d.objects.special.ParticleField; // // 3Dの初期設定をおこないます var world:BasicView = new BasicView(); world.startRendering(); addChild(world); // // マテリアルを作成します // ビットマップアセットマテリアルは引数にライブラリの画像を指定します var material:BitmapAssetMaterial = new BitmapAssetMaterial("EarthMap"); // // 球面(Sphere)を作成します // 引数はマテリアル、球面の半径、横のポリゴン分割数、縦のポリゴン分割数 var sphere:Sphere = new Sphere(material, 400, 16, 16); // // 3D空間に球面を追加します world.scene.addChild(sphere); // // ついでにパーティクルを生成します(彗星) var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1); var particles:ParticleField = new ParticleField(particleMat, 500, 4, 2000, 2000, 2000); world.scene.addChild( particles ); // // アニメーション addEventListener(Event.ENTER_FRAME, function(e){ // 地球は常に回転させておく sphere.rotationY -= 0.25; });

■カメラの種類
Papervision3Dのカメラには大きく2種類の制御方法があります。

* 常に一点を向き続けるターゲットカメラ
* カメラの視点を自由に設定できるフリーカメラ

今回は前者のターゲットカメラで試していきます。なおBasicViewの初期設定はターゲットカメラです。

■課題1 : 地球の周りをカメラを回転させる
カメラの座標の設定方法はcameraのx,y,zプロパティーに値を入れるだけです。カメラはターゲットカメラですので、常に1点を向き続けています。BasicViewでは特に設定しない限り原点(0,0,0)を向いてます。

動きの演出については、フレーム毎に衛星の配置角度を0.5度ずつ加算し、それをカメラの座標に変換しています。カメラの座標は三角関数(sinとcos)を使って、角度から求めています。1000という値は円の半径です。

エンターフレームのハンドラーの部分に次のスクリプトを記載。

// アニメーション var rot:Number = 0 // 角度 addEventListener(Event.ENTER_FRAME, function(e){ // 毎フレーム角度を0.5度ずつ足していく rot += 0.5; // 角度に応じてカメラの位置を設定 world.camera.x = 1000 * Math.sin(rot * Math.PI / 180); world.camera.z = 1000 * Math.cos(rot * Math.PI / 180); // 地球は常に回転させておく sphere.rotationY -= 0.25; });

■課題2 : マウスの座標に応じて回転させる
角度の算出方法をステージの幅の何％の位置にマウスがあるかを計算で求め、それを角度に反映。

// アニメーション var rot:Number = 0; // 角度 addEventListener(Event.ENTER_FRAME, function(e){ // マウスの位置に応じて角度を設定 // マウスのXがステージ幅の何%の位置かを調べ、360度で乗算 var targetRot:Number = ( mouseX / stage.stageWidth ) * 360; // // イージングの公式を用いて滑らかにする // 値 += (目標値 - 現在の値) * 減速値 rot += (targetRot - rot) * 0.02; // // 角度に応じてカメラの位置を設定 world.camera.x = 1000 * Math.sin(rot * Math.PI / 180); world.camera.z = 1000 * Math.cos(rot * Math.PI / 180); // // 地球は常に回転させておく sphere.rotationY -= 0.25; });

■課題3 : マウスのドラッグに応じてカメラを制御する
マウスのドラッグ＆ドロップでカメラの位置を制御できるようにしてみます。

ドラッグ＆ドロップはマウスを押したとき・移動したとき・離したときの3パターンのイベントに分解できます。コアのロジックは、押したときのマウス座標から移動したときのそれとの差分を求めることです。求めた差分を角度に変換し(適当な0.25という値を乗算しています)、それをイージングの公式を用いて滑らかにし、それをカメラの座標に三角関数で設定しています。

// PV3Dライブラリをインポート import org.papervision3d.view.* import org.papervision3d.materials.* import org.papervision3d.objects.primitives.* //パーティクル関連 import org.papervision3d.materials.special.ParticleMaterial; import org.papervision3d.objects.special.ParticleField; // // 3Dの初期設定をおこないます var world:BasicView = new BasicView(); world.startRendering(); addChild(world); // // マテリアルを作成します // ビットマップアセットマテリアルは引数にライブラリの画像を指定します var material:BitmapAssetMaterial = new BitmapAssetMaterial('EarthMap'); // // 球面(Sphere)を作成します // Sphereの引数の1番目にマテリアルを指定します // 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数 var sphere:Sphere = new Sphere(material, 400, 15, 15); // // 3D空間に球面を追加します world.scene.addChild(sphere); // // ついでにパーティクルを生成します(彗星) var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1); var particles:ParticleField = new ParticleField(particleMat, 500, 4, 2000, 2000, 2000); world.scene.addChild( particles ); // // マウスを押した状態かどうかを判別するフラグ var isMouseDown:Boolean = false; // // 一時的なマウスの値を格納する変数 var oldX:Number = 0; var targetRot:Number = 0; // // イベントの設定 stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener(MouseEvent.MOUSE_UP, upHandler); stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler); // // マウスを押されたとき function downHandler(e){ isMouseDown = true; oldX = mouseX; } // // マウスを放したとき function upHandler(e){ isMouseDown = false; } // // マウスが動いたとき function moveHandler(e){ if(isMouseDown){ var dy:Number = e.stageX - oldX; targetRot += dy * 0.25; oldX = e.stageX } } // // アニメーション var rot:Number = 0; // 角度 addEventListener(Event.ENTER_FRAME, function(e){ // // イージングの公式を用いて滑らかにする // 値 += (目標値 - 現在の値) * 減速値 rot += (targetRot - rot) * 0.05; // // 角度に応じてカメラの位置を設定 world.camera.x = 1000 * Math.sin(rot * Math.PI / 180); world.camera.z = 1000 * Math.cos(rot * Math.PI / 180); // // 地球は常に回転させておく sphere.rotationY -= 0.25; });

■課題4 : ドラッグ＆ドロップを上下左右対応に

またまたPV3D。Papervision3D(以下PV3D)というライブラリがどのようにして3Dを扱っているのか。

■多謝
http://clockmaker.jp/blog/2009/05/papervision3d_tutorial_4/#more-1619
Yasuさんの記事は実例があるのでとってもわかりやすい。本当にありがたい。

■PV3Dで3Dを始めるときに必ず使う4つのクラス

* Scene：シーン
* Camera：カメラ
* Renderer：レンダラー
* Viewport：ビューポート

PV3Dにおける3DというのはすべてSceneという概念的な空間のなかに配置します。その概念的な空間を撮影するのがCamera。Cameraで撮影したものを2次元表示に落とし込むのがRenderer、そしてFlashに映し出すモニタがViewportとなります。

この仕組みはPV3Dでスクリプトで表現できますが、それは次のようなAction Scriptとなります。

// ライブラリのインポート import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; // // 初期設定 var viewport:Viewport3D = new Viewport3D(0, 0, true, false); var scene:Scene3D = new Scene3D(); var camera:Camera3D = new Camera3D(); var renderer:BasicRenderEngine = new BasicRenderEngine(); // // 毎フレーム、レンダリングするように設定 addEventListener(Event.ENTER_FRAME, enterHandler); // // エンターフレームのイベントハンドラー function enterHandler(e:Event):void { // レンダリングを行う renderer.renderScene(scene, camera, viewport); }

ただし、これら一連の初期化はBasicViewクラスが担ってくれるので、上記スクリプトは本チュートリアルでは記述することはありません。

BisicViewは簡易的にPV3Dを初期化するものですが、決してパフォーマンスが落ちたりカスタマイズしにくいことはなく十分実用に耐えるクラスです。

■BisicView について
BasicViewはインスタンス化の際にPV3Dの初期化を全ておこないます。

var world:BasicView = new BasicView();

↓各種プロパティーにアクセスするには次の記述をします。

world.scene world.camera world.renderer world.viewport

↓PV3Dで扱う3Dオブジェクト、ライトはsceneプロパティーにaddChildすること表示させることができます。

// 立方体を作成 var cube = new Cube(); // 球面を作成 var sphere = new Sphere(); // 3D空間に立方体を表示 world.scene.addChild( cube ); // 3D空間に球面を表示 world.scene.addChild( sphere );

■Sceneについて
PV3Dの3D座標軸について押さえておきます。3DではX,Y,Zの3つの座標を扱います。通常のFlashと違い注意する点としては、軸の方向が違うということです。

* X軸：左から右に向かって正
* Y軸：下から上に向かって正
* Z軸：手前から奥にむかって正

注意点としてPV3Dでは画面の中央(厳密にはViewportの中央)が原点(0,0,0)となります。

■Cameraについて
3D空間を撮影する機能をもったクラスが、Cameraとなります。Cameraの主な設定は以下となります。

* X,Y,Z座標：3D空間の配置する場所を設定
* focus : 焦点距離(値が小さいほど広角)
* zoom : ズーム(値が大きいほど拡大)

BasicViewにおけるCameraの初期設定は次のとおりです。

XYZ座標 ：x:0 y:0 z:-1000 focus値：8.660254037844387 Zoom値：40

カメラの位置を調整するときは次のように記述します。

// (X, Y, Z) = (100, 200, 300)に配置 world.camera.x = 100; world.camera.y = 200; world.camera.z = 300;

■BasicViewのレンダリング
3D空間にオブジェクトやカメラを設定しても、レンダリングしない限りはFlash上の画面には表示されません。レンダリングの設定方法ですが、以下の一行を一度だけ記述すると、ENTER_FRAMEの処理として自動レンダリングが設定されます。

world.startRendering();

レンダリングをストップさせたいときはstopRendering()を使います。

■BisicViewの初期設定
viewportの初期設定で、以下の設定が適用されます。

stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; viewport = new Viewport(640,480,true,false);

画面の表示モードは常に等倍で左上が原点に設定されます。3Dの表示は自動サイズとなります。つまり、3DがFlashの全面領域にフィットするように設定されるということです。

PV3Dその2。
お次はシェーディングというか、表面加工というか、とにかくマテリアルというらしい。

■多謝
http://clockmaker.jp/blog/2009/05/papervision3d_tutorial_3/
http://www.xinterface.net/samples/MaterialsExplorer/Default.html

代表的なマテリアルを紹介してみます。

* WireframeMaterial : 3D形状のポリゴンメッシュ
* FlatShadeMaterial : 簡易的な陰影表示
* BitmapMaterial : 指定したビットマップ画像

Papervision3Dのオブジェクトの作成手順として(1)マテリアルを作成 (2)プリミティブオブジェクトを作成という２つの手順を踏むことになります。

■WireframeMaterialの実装方法
Papervision3Dの中で最も簡単なのがWireframeMaterialです。ポリゴンのワイヤーフレームを表示するもので、new WireframeMaterialの引数にワイヤーフレームの色を指定するだけです。

var material = new WireframeMaterial(0x0000FF);

■FlatShadeMaterialの実装方法
WireframeMaterialと違って、FlatShadeMaterialではライトの陰影の機能を使う必要がでてきます。プリミティブオブジェクトに陰影をつけることをシェーディングと呼びますが、その場合の手順は(1) ライトを作成 (2)マテリアルを作成 (3) プリミティブオブジェクトを作成となります。

// PV3Dライブラリをインポート import org.papervision3d.view.* import org.papervision3d.materials.shadematerials.*//追加 import org.papervision3d.objects.primitives.* import org.papervision3d.lights.*//追加 // // 3Dの初期設定をおこないます var world:BasicView = new BasicView(); world.startRendering(); addChild(world); // // ライトを作成します var light:PointLight3D = new PointLight3D(); // // マテリアルを作成します // フラットシェードマテリアルは引数にライトと16進数の色を指定します var material:FlatShadeMaterial = new FlatShadeMaterial(light, 0x3399FF); // // 球面(Sphere)を作成します // Sphereの引数の1番目にマテリアルを指定します // 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数 var sphere:Sphere = new Sphere(material, 400, 20, 20); // // 3D空間に球面を追加します world.scene.addChild(sphere); // // 球面を回転させます addEventListener(Event.ENTER_FRAME, function(e){ sphere.rotationY += 1; });

シェーディング（陰影）具合は下記に。
http://clockmaker.jp/blog/2008/07/papervision3d_shading/

■BitmapMaterialの実装方法
実はBitmapMaterialには様々な種類があり、使い方に応じて使用するクラス名が違ってきます。

* BitmapMaterial : BitmapDataを指定(上級者向け)
* BitmapAssetMaterial : Flash CS3/CS4上のライブラリの画像を指定
* BitmapFileMaterial : 外部画像を指定

画像の取り込み方法が違うだけで、結果は同じとなります。
以下はBitmapAssetMaterial。

まずは.flaファイル内に画像を取り込み、画像の「クラス」を設定します。
http://www.xinterface.net/samples/MaterialsExplorer/Default.htmlから画像をダウンロード。
ライブラリに取り込み、画像のプロパティを開いて「ActionScriptに書き出し」にチェック→クラス名を入力。今回は「EarthMap」とする。

// PV3Dライブラリをインポート import org.papervision3d.view.* import org.papervision3d.materials.* import org.papervision3d.objects.primitives.* // // 3Dの初期設定をおこないます var world:BasicView = new BasicView(); world.startRendering(); addChild(world); // // マテリアルを作成します // ビットマップアセットマテリアルは引数にライブラリの画像を指定します var material:BitmapAssetMaterial = new BitmapAssetMaterial('EarthMap'); // // 球面(Sphere)を作成します // Sphereの引数の1番目にマテリアルを指定します // 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数 var sphere:Sphere = new Sphere(material, 400, 15, 15); // // 3D空間に球面を追加します world.scene.addChild(sphere); // // 球面を回転させます addEventListener(Event.ENTER_FRAME, function(e){ sphere.rotationY += 1 });

Bitmap系Materialの兄弟でMovieAssetMaterialというものがあり、マテリアルにムービークリップを指定することもできます。例えばMovieClipのタイムラインアニメーションをマテリアルに指定することもできます。

ペーパービジョンを勉強してみる。
以下、参考サイトをほぼコピペ。

■多謝
http://clockmaker.jp/blog/2009/04/papervision3d_tutorial_2/
http://clockmaker.jp/labs/090419_primitive_generator/bin/index.html

// フレームアクションでPapervision3D // Papervision3Dライブラリを読み込み import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.*; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.view.BasicView; // // 3D表示用の基本インスタンスを作成します var world:BasicView = new BasicView(); addChild(world); // // テクスチャー(＝マテリアル)を作ります var material = new WireframeMaterial(0x0000FF); material.doubleSided = true; // //平面四角形オブジェクトを生成 var obj = new Plane(material, 500, 500, 1, 1); // 3D表示用のworldインスタンスのsceneプロパティーが3D表示空間となります // world.sceneに対して上で作成したオブジェクトを表示(addChild)します world.scene.addChild(obj); // // Papervision3Dでは空間をレンダリングさせることで初めて表示されます // worldインスタンスに対してstartRendering()させます world.startRendering(); // // アニメーションさせるためにEnterFrameのループイベントを指定します addEventListener(Event.ENTER_FRAME, loop); // // エンターフレーム時に呼び出す関数を設定します // エンターフレームでのアニメーションを設定します function loop(e:Event) { obj.rotationY += 1; } //

PV3D で扱えるオブジェクトは以下の 7 種類があります。

* Plane : 平面オブジェクト
* Sphere : 球面オブジェクト
* Cube : 立方体オブジェクト
* Cone : ３角コーン型のオブジェクト
* Cylinder : 円柱のオブジェクト
* PaperPlane : 紙飛行機のオブジェクト
* Arrow : 矢印のオブジェクト

それぞれのクラスファイルは org.papervision3d.objects.primitives パッケージに所属しているため利用するときは「 import org.papervision3d.objects.primitives.*; 」をアクションパネルに記述する必要があります。

それぞれのオブジェクトのパラメーターについて説明します。

* width : 横幅
* height : 高さ
* depth : Cubeにおける奥行き
* radius : 半径。Sphere では球体の半径で、ConeとCylinderでは底辺の半径。
* segmentsW : 横方向の分割数
* segmentsH : 縦方向の分割数

segments (セグメント)というパラメーターは 2D にはありませんので、見慣れないパラメーターだと思います。3D では表示オブジェクトをポリゴン化して表示させるのですが、セグメントというパラメーターは大雑把にいうとポリゴンの分割数となります。

セグメントを増やすと、球体( Sphere )ではより滑らかになると思いますが、セグメントの値を大きくするととたんに再生速度(フレームレート)が下がりますので注意が必要です。

良い言葉だとおもったので。

真剣だと知恵が出る

中途はんぱだとぐちがでる

いいかげんだと言い訳ばかり

http://wiki.github.com/to/tombloo

投稿機能がまとまってて
便利じゃね？

●子swfにアクセスする時
子swfのrootがLoaderクラスのcontentプロパティに格納されるのでこれを経由。以前のエントリに記述あり。

●子swfにアクセスから親swfにアクセスする時
最初のparentはLoaderクラスになるので、最低限root(子swfのroot).parent.parentという様に二つ階層を上る。呼び出す位置により、parentが深くなる。

■多謝
http://www.pandama.net/memo/2009/10/as3-swfswfswf.php

//親SWFの関数を実行 var globalRoot:Object;//定義しておく globalRoot= root.parent.parent.parent; globalRoot.myBnrApp(1);