Wonderfulで始めるAlternativa3D

中級(インタラクティブ編)4. フェースごとのマウスイベント

マウスイベントは、フェース(Face)にも設定できます。
要領は、サーフェースとほぼ一緒なのですが、Materialを扱う事が出来るのはサーフェースのみです。
その為、サーフェースのように、直接ロールオーバーしたFaceのみを半透明にしたり、色を変えたりする事は残念ながら出来ませんので、TextAreaに情報を表示するようにしています。

			//-------------------------------------------------------
			//全てのFaceにロールオーバー、クリックのリスナーを追加
			//-------------------------------------------------------
			for each(var face:Face in box.faces) {
				face.addEventListener(MouseEvent3D.MOUSE_OUT, onMouseOut);
				face.addEventListener(MouseEvent3D.MOUSE_OVER, onMouseOver);
				face.addEventListener(MouseEvent3D.CLICK, onClick);
			}

			//-------------------------------------------------------
			//ロールオーバー、クリック動作を設定
			function onClick(e:MouseEvent3D):void {
				dbg.text=e.face.id+"をクリック\n"+dbg.text;
			}
			//-------------------------------------------------------

			function onMouseOver(e:MouseEvent3D):void {
				e.view.buttonMode=true
				dbg.text=e.face.id+"にロールオーバー\n"+dbg.text;
			}


			function onMouseOut(e:MouseEvent3D):void {
				e.view.buttonMode=false
			}

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

 

マウスイベントまとめ

ここまで、プリミティブ(Object3D)、サーフェース、フェースとそれぞれに順にマウスイベントを設定してきました。しかし、指カーソルを使わない&クリックされた箇所の情報が欲しいだけなら、いちいちサーフェースやフェースにマウスイベントを設定する必要はありません。

MouseEvent3Dはクリックされた箇所のView(view)、Object3D(object)、Surface(surface)、Face(face)の参照、さらに、クリックされたポイントのグローバル座標(globalX,globalY,globalZ)やローカル座標(localX,localY,localZ)を保持していますので、Object3DにMouseEventを設定するだけで、全ての情報を得る事が可能です。

	//-------------------------------------------------------
	//全てのFaceにロールオーバー、クリックのリスナーを追加
	//-------------------------------------------------------
	box.addEventListener(MouseEvent3D.CLICK, onClick);

	//-------------------------------------------------------
	//ロールオーバー、クリック動作を設定
	//-------------------------------------------------------
	function onClick(e:MouseEvent3D):void {
		dbg.text="クリックされたのは"
		dbg.appendText("\nView="+String(e.view))
		dbg.appendText("\nObject3D="+e.object.name)
		dbg.appendText("\nSurface="+String(e.surface.id))
		dbg.appendText("\nFace="+String(e.face.id))
		dbg.appendText("\nグローバル座標="+e.globalX+','+e.globalY+','+e.globalZ)
		dbg.appendText("\nローカル座標="+e.localX+','+e.localY+','+e.localZ)
		dbg.appendText("\nです")
	}

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

なお、マウスイベントは、ご紹介した、MOUSE_OUTMOUSE_OVER、CLICK以外にMOUSE_DOWN、MOUSE_UP、MOUSE_MOVE、MOUSE_WHEELが使用できます。
また、MouseEvent3Dのプロパティには、イベント発生時にALT,CTRL、SHIFTが押されているか確認できるaltKey、ctrlKey、shiftKeyやUVマッピングでの座標u、v、マウスホイールの回転を得るdeltaがあります。

 

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のグロー、ブラー