Wonderfulで始めるAlternativa3D

中級(インタラクティブ編).1 インタラクティブなオブジェクト

Alternativa3Dのインタラクティブと言えば、どのサイトを見てもWalkControllerしかないような感じで書かれていますが、ちゃんと、MouseEvent3Dが用意され、Object3Dで使用できるようになっています。
ただ、若干クセがあり、Flash APIの様な感覚では、ん?っという所が何点かありますので、順を追って解説していきます。

プリミティブのマウスイベント

インタラクティブと言えば、まず思いつくのがロールオーバー、ロールアウト、クリックかと思いますので、まずはプリミティブにこれらのマウスイベントを設定してみます。

interactiveとbuttonMode

Alternativa3Dでマウスイベントを有効にする為には、まず最初に、Viewinteractiveプロパティをtrueにします。 (interactiveプロパティは、デフォルトではfalseになっており、Mouseイベントを受け付けません)

またViewクラスは、flash.display.Spriteの派生クラスですので、指カーソルを有効にする場合は、buttonModeをtrueにします。(mouseEnabledやmouseChildrenは、viewのinteractiveプロパティの切り替えで自動で行われます。)

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

 

プリミティブの作成

ロールオーバーさせるプリミティブを作成し、MouseEvent3Dのリスナーを登録します。

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

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

 

ロールオーバー、ロールアウト、クリックの各動作を設定

各動作がわかるように、ロールーオーバーで半透明に、ロールアウトで不透明、クリックで色が変わるようにします。なお、Object3Dには、alphaプロパティがありませんので、マテリアルで半透明、不透明を設定しています。


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

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

	function onMouseOver(e:MouseEvent3D):void {
		material=new FillMaterial(colorArray[colorCounter],0.5);
		box.cloneMaterialToAllSurfaces(material);
	}

	function onMouseOut(e:MouseEvent3D):void {
		material=new FillMaterial(colorArray[colorCounter],1);
		box.cloneMaterialToAllSurfaces(material);
	}

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

Adobe Flash Player を取得


.src

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

以下はBoxクラスを継承し、上記操作を入れた自作クラスinteractiveBoxを使った作例です。
それぞれのBoxがマウス操作に反応します。

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