Wonderfulで始めるAlternativa3D

中級(コントローラー編)4.lookAt

3Dオブジェクトの方向を回転させるには、rotationX,rotationY,rotationZを使用する方法が一般的ですが、
ある、3D座標の方を向かせるとなると、三角関数を用いたり、Matrix3D(3D行列)を使用、またはクォータニオンを自作する等、若干ややこしい計算をしないといけません。

三角関数計算による、3D上でのlookAt例

//三角関数計算による、3D上でのlookAt例
private function lookAt(pt:Object3D,c:Object3D):void {   
	var dx:Number = pt.x - c.x;   
	var dy:Number = pt.y - c.y;   
	var dz:Number = pt.z - c.z;   
	c.rotationZ = -Math.atan2(dx, dy);   
	c.rotationY = MathUtils.DEG180;   
	c.rotationX = Math.atan2(dz, Math.sqrt(dx * dx + dy * dy)) - MathUtils.DEG90;   
}  

しかし、ObjectController(及びそのサブクラス)のlookAt(point:Point3D)メソッドを使用すれば、
簡単に3Dオブジェクトを、指定した方向へ向ける事が可能になります。

FlyController(or WalkController)を使用したLookAt例

2つのボックスを作成し、それぞれをLookAtさせます。
なお、どの面がLookAtするのかを確認する為に、topとbackに色をつけています。

	//中央に四角を配置
	var box1:Box=new Box()
	box1.cloneMaterialToAllSurfaces(new FillMaterial(0xCCCCCC));
	box1.setMaterialToSurface(new FillMaterial(0xFFFFFF),'top');
	box1.setMaterialToSurface(new FillMaterial(0xFF0000),'back');
	template.scene.root.addChild(box1)

	//動く四角
	var box2:Box=new Box()
	box2.cloneMaterialToAllSurfaces(new FillMaterial(0xCCCCCC));
	box2.setMaterialToSurface(new FillMaterial(0xFFFFFF),'top');
	box2.setMaterialToSurface(new FillMaterial(0x0000FF),'back');
	template.scene.root.addChild(box2)

	//Controllerのインスタンスを作る
	var flyController1:FlyController=new FlyController(this.stage)
	flyController1.object=box1

	var flyController2:FlyController=new FlyController(this.stage)
	flyController2.object=box2

	// Event.ENTER_FRAME 時に実行されるレンダリングのイベントです。
	// レンダリング前に実行したい処理を記述します。

	var angle=0
	template.cameraContoller.lookAt(new Point3D());
	template.onPreRender = function():void {
		angle++
		box2.x=Math.sin(angle*Math.PI/180)*300
		box2.y=Math.cos(angle*Math.PI/180)*300
		box2.z=200

		//LookAtの実行
		flyController2.lookAt(box1.coords);
		flyController1.lookAt(box2.coords);
	}

完成したサンプルを見ると、Box同士をLookAtさせた場合、’back’面がお互いの方向を向いてるのがわかると思います。これはPoint3D(0,1,0)のベクトルがLookAtしているという事になります。

.src

Camera3DをWalkControllerでコントロールした場合のLookAt

Camera3DもObject3Dのサブクラスなので、もちろんWorkControllerでコントロールする事ができます。
その際にlookAtを使用すると、被写体を常に自動で追い続けるカメラを作成できます。
また、lookAtを使用した場合は、ACTION_LEFT(moveLeft)とACTION_RIGHT(moveRight)の動きが、被写体に対して、円を描く運動に変わります。

以下に同じキーで操作できるカメラを、lookAtなしとlookAtありで用意しましたので、違いを確認してみてください。

下記の共通キー操作

W or (↑)UP ACTION_FORWARD 前に移動
Z or (↓)DOWN ACTION_BACK 後に移動
A or (←)LEFT ACTION_LEFT 左に移動
D or (→)RIGHT ACTION_RIGHT 右に移動
SHIFT ACTION_ACCELERATE 加速

lookAtなし


.swf
(要 FlashPlayer10)
.src

lookAtあり


.swf
(要 FlashPlayer10)
.src

動く物体をlookAtでカメラが追うサンプル

3D酔いにご注意ください。


.swf
(要 FlashPlayer10)
.src

 

中級(カメラ&ビュー)1.
複数のカメラとビュー

 

Menu

入門編

初級編

7. Sprite3Dとは?

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー