Wonderfulで始めるAlternativa3D

中級(インタラクティブ編)2. 反応するモデルと反応しないモデル

Alternativa3Dでは、MouseEvent3Dの有効、無効は、Viewクラスのinteractiveプロパティでしか設定できません。 しかも、このViewクラスは、Spriteのサブクラスです。
なので実際にはObject3Dに反応してMouseEvent3Dが発生しているわけではなく、レンダリング結果としてView上に描画されたシェイプにMouseが反応すると言うことになっています。
(ここからは推測ですが、そうしてSpriteが受けたMouseEvent情報の座標から、BSPツリーに基づいて各Object3Dを導き出している模様。)
この為View.buttonMode=trueで指カーソルを有効にした場合、View上に見えている全てのObject3Dに指カーソルが反応してしまいます。

ダメな例

以下のサンプルは、大きな球(GeoSphere)の中に、Boxを入れた物です。
addEventListenerはBoxのみにしているのですが、周りの球にも、指カーソルが反応しています。

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

Adobe Flash Player を取得


.src

マウスに反応するオブジェクトと反応しないオブジェクト

実際に、マウスに反応するオブジェクトと反応しないオブジェクトを分けた例です。

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

Adobe Flash Player を取得

タネを明かせば非常に簡単な事で、MouseEvent3Dのリスナー登録自体は各Object3Dごとに設定できますので、通常はView.buttonMode=falseにしておいて、反応させたいオブジェクトにロールオーバーした時にのみ、View.buttonMode=trueにしているだけです。

			//-------------------------------------------------------
			//プリミティブのロールオーバー、クリックを有効にする為
			//viewのinteractiveをtrueにする
			//buttonModeはfalse
			//-------------------------------------------------------
			template.view.buttonMode = false;
			template.view.interactive = true;

			//-------------------------------------------------------
			//プリミティブにロールオーバー、クリックのリスナーを追加
			//-------------------------------------------------------
			box.addEventListener(MouseEvent3D.CLICK, onClick);
			box.addEventListener(MouseEvent3D.MOUSE_OVER, onMouseOver);
			box.addEventListener(MouseEvent3D.MOUSE_OUT, onMouseOut);

			var colorCounter:uint=0;
			var colorArray:Array=[0xFF0000,0x0000FF,0x00FF00,0xFF00FF,0xFFFF00,0x00FFFF]

			//-------------------------------------------------------
			//ロールオーバー、クリック動作を設定
			//-------------------------------------------------------
			function onClick(e:MouseEvent3D):void {
				colorCounter=(colorCounter+1)%6;
				materialB.color=colorArray[colorCounter];
				box.cloneMaterialToAllSurfaces(materialB);
			}

			function onMouseOver(e:MouseEvent3D):void {
				template.view.buttonMode = true;
				materialB.alpha=0.5;
				box.cloneMaterialToAllSurfaces(materialB);
			}

			function onMouseOut(e:MouseEvent3D):void {
				template.view.buttonMode = false;
				materialB.alpha=1;
				box.cloneMaterialToAllSurfaces(materialB);
			}

 

インタラクティブな自作Boxクラスを作った作例

以下は前項で作成した自作クラスinteractiveBoxに上記の処理を追加した物です。
なお、 上ではtemplate.view.buttonMode = falseしていましたが、外部クラスでは、templateインスタンスを使用できません(interactiveBoxに参照を渡す手もありますが・・・)。
代わりに、MouseEvent3Dが、クリックしたview、face、surfaceの参照をプロパティとして持っていますので
e.view.buttonMode = true;
としています。

	/*-------------------------------------------------------
		ロールオーバー、クリック動作を設定
	-------------------------------------------------------*/
	private function onClick(e:MouseEvent3D):void {
		colorCounter=(colorCounter+1)%6;
		material.color=colorArray[colorCounter];
		this.cloneMaterialToAllSurfaces(material);
	}

	private function onMouseOver(e:MouseEvent3D):void {
		e.view.buttonMode=true
		material=new FillMaterial(colorArray[colorCounter],0.5);
		this.cloneMaterialToAllSurfaces(material);
	}

	private function onMouseOut(e:MouseEvent3D):void {
		e.view.buttonMode=false
		material=new FillMaterial(colorArray[colorCounter],1);
		this.cloneMaterialToAllSurfaces(material);
	}

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

Adobe Flash Player を取得


.src

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