MNGN.COM BLOG: AS3 : Start PaperVision 3D -Camera-

< AS3 : Start PaperVision 3D -BasicView- | ● | AS3 : Pass Time of Timer Class >

●2009.11.29

[SCRIPT] AS3 : Start PaperVision 3D -Camera-

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個生成するというものです。

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

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

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

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

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

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

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

■課題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ライブラリをインポート
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 );
//
// マウスを押した状態かどうかを判別するフラグ
var isMouseDown:Boolean = false;
//
// 一時的なマウスの値を格納する変数
var oldX:Number = 0;
var oldY:Number = 0;
var targetRot:Number = 0;
var targetPitch: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;
	oldY = mouseY;
}
//
// マウスを放したとき
function upHandler(e){
	isMouseDown = false;
}
//
// マウスが動いたとき
function moveHandler(e){
	if(isMouseDown){
		var dx:Number = e.stageX - oldX;
		var dy:Number = e.stageY - oldY;
		//
		targetRot += dx * 0.25;
		targetPitch += dy * 0.25;
		//
		oldX = e.stageX;
		oldY = e.stageY;
	}
}
//
// アニメーション
var rot:Number = 0; // 角度
var pitch:Number = 0; // ピッチ=縦の角度
addEventListener(Event.ENTER_FRAME, function(e){
	//		   
	// イージングの公式を用いて滑らかにする
	// 値 += (目標値 - 現在の値) * 減速値
	rot += (targetRot - rot) * 0.05;
	pitch += (targetPitch - pitch) * 0.05;
	//
	// 角度に応じてカメラの位置を設定
	world.camera.x = 1000 * Math.sin(rot * Math.PI / 180);
	world.camera.z = 1000 * Math.cos(rot * Math.PI / 180);
	world.camera.y = 1000 * Math.sin(pitch * Math.PI / 180);
	//
	// 地球は常に回転させておく
	sphere.rotationY -= 0.25;
})

Posted by inami at November 29, 2009 06:35 PM