Wonderfulで始めるAlternativa3D

中級(インタラクティブ編)3. サーフェースごとのマウス操作

プリミティブ(Object3D)ごとのマウスイベントが出来たら、次は、Surfaceごとのマウスイベントを行ってみます。

サーフェースにロールオーバー、クリックのリスナーを追加

以下のサンプルは、Surface 'front'のみが、マウスに反応します。

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

	// マテリアルを作成します
	var material:FillMaterial = new FillMaterial(0xFF0000,1,BlendMode.NORMAL,1,0x0000000);
	
	// Boxを作成します
	var box:Box = new Box(200, 200, 200);
	box.cloneMaterialToAllSurfaces(material);
	
	// 3Dシーンのルートに追加します
	template.scene.root.addChild(box);

	//-------------------------------------------------------
	//サーフェース'front'にロールオーバー、クリックのリスナーを追加
	//-------------------------------------------------------
	box.surfaces['front'].addEventListener(MouseEvent3D.CLICK, onClick);
	box.surfaces['front'].addEventListener(MouseEvent3D.MOUSE_OVER, onMouseOver);
	box.surfaces['front'].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;
		FillMaterial(e.surface.material).color=colorArray[colorCounter];
	}

	function onMouseOver(e:MouseEvent3D):void {
		e.view.buttonMode=true;
		e.surface.material.alpha=0.5;
	}

	function onMouseOut(e:MouseEvent3D):void {
		e.view.buttonMode=false;
		e.surface.material.alpha=1;
	}

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

Adobe Flash Player を取得


.src

プリミティブ全体をマウス操作する場合と、ロールオーバー、クリック動作の設定の中身が若干変わっています。プリミティブ全体の場合は、alphaを変更したマテリアルを全てのサーフェースに設定し直す為に、cloneMaterialToAllSurfaces(material)、を使用していましたが、サーフェース単体の場合は、マウスに反応した、サーフェースの参照が、MouseEvent3Dに保持されているので、そこから直接materialプロパティのalphaや、colorプロパティを操作しています。
なお、Surfaceクラスのmaterialプロパティは、型がSurfaceMaterial(マテリアルの基本クラス)の為、FillMaterialのcolorプロパティにアクセスするには、FillMaterialにキャストする必要があります。(もしTextureMaterialを使用している場合にTextureを変更する場合はTextureMaterialにキャストして使用します。)

memo

上記サンプルの場合、Box内にMouseCursorを入れ動かさないでいると、'front'面にロールオーバーやロールアウトしてもマウスカーソルが変化しません。これは、ロールオーバー後に、buttonModeをtrueにしているので、flash.ui.Mouse.cursor=flash.ui.MouseCursor.AUTOでは対応しきれていない為です。

もし、このような場合を回避するならば、自前でflash.ui.Mouse.cursor=flash.ui.MouseCursor.BUTTONとflash.ui.Mouse.cursor=flash.ui.MouseCursor.ARROWの切り替えをする必要があります。

 

全てのSurfaceにMouse操作を設定する

上記の要領そのままに、若干の修正で全Surfaceが反応するようにしてみたのが、以下です。

	//-------------------------------------------------------
	//サーフェース'front'にロールオーバー、クリックのリスナーを追加
	//-------------------------------------------------------
	for each(var surface:Surface in box.surfaces) {
		surface.addEventListener(MouseEvent3D.CLICK, onClick);
		surface.addEventListener(MouseEvent3D.MOUSE_OVER, onMouseOver);
		surface.addEventListener(MouseEvent3D.MOUSE_OUT, onMouseOut);
	}

	var colorArray:Array=[0xFF0000,0x0000FF,0x00FF00,0xFF00FF,0xFFFF00,0x00FFFF] 
	var colorCounter:Object={front:0,back:0,left:0,right:0,top:0,bottom:0} 

	//-------------------------------------------------------
	//ロールオーバー、クリック動作を設定
	//-------------------------------------------------------
	function onClick(e:MouseEvent3D):void {
		var sid:Object=e.surface.id
		colorCounter[sid]=(colorCounter[sid]+1)%6; 
		FillMaterial(e.surface.material).color=colorArray[colorCounter[sid]]; 
	}

	function onMouseOver(e:MouseEvent3D):void {
		e.view.buttonMode=true;
		e.surface.material.alpha=0.5;
	}

	function onMouseOut(e:MouseEvent3D):void {
		e.view.buttonMode=false;
		e.surface.material.alpha=1;
	}

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

Adobe Flash Player を取得


.src

特筆すべきところは無いのですが、
colorCounter:Objectで、counter値に各サーフェースIDでアクセスできるようにしています。
このIDはString型ですが、Surfaceクラス(及びFace、Vartex)は型をObjectで返して来ますので、注意が必要です。

var sid:Object=e.surface.id
もしくは
var sid:String=String(e.surface.id)
の形で受け取ります。

 

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

以下は前項で作成した自作クラスinteractiveBoxに上記の処理を追加した物です。

このページのコンテンツには、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のグロー、ブラー