feb19.jp blog - life is creative!

Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る

ブックマークに追加する tags:    

Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る

Papervision3D 1.5版との違いを比較しながらご覧ください。

サンプル

これがGreatWhite版マウスに反応するキューブです。

2.0の特別な機能的なものはあえて使わず、比較しやすいように、1.5でも作れそうなものをあえて作りました。

さてチェックすべき点はこちら。

  • Viewport3Dインスタンスの.interactiveプロパティ(またはコンストラクタの第四引数)をtrueにする。
  • Viewport3DインスタンスのcontainerSpriteオブジェクトの中の.buttonModeをtrueにすることで、インタラクティブなCubeをロールオーバーした時とかに人さし指カーソルにさせることが可能。
  • Cubeに張るMaterialインスタンスの.interactiveプロパティをtrueにする。
  • Cubeインスタンスに直接addEventListenerして、InteractiveScene3DEvent.OBJECT_CLICKやOBJECT_OVER、OBJECT_OUTなどのイベントリスナーを設定。

という手順です。Viewport3DインスタンスのcontainerSprite全部をbuttonMode=trueにするっていうことだけど、個々にbuttonModeやuseHandCursorを設定することはできないのかもしれません。このへんちょっとよくわかりませんでした。もっとスマートなやり方を知っている方よろしければ教えてください。

というわけでコード。
1フレーム目にフレームアクションでnew InteractiveScene3DEvent_test(this)と入れて実行してみてください。あ、あとこのままだと外部画像「ico.gif」が必要です、って言われるので適当に画像を同じディレクトリにおいてやってみてください。

package {
	import flash.display.*;
	import flash.events.*;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.events.InteractiveScene3DEvent;
	public class  InteractiveScene3DEvent_test {
		private var basemc;
		private var viewport;
		private var renderer;
		private var camera;
		private var scene;
		private var cube;
		public function InteractiveScene3DEvent_test(mc){
			basemc = mc;
			basemc.stage.align = StageAlign.TOP_LEFT;
			basemc.stage.scaleMode = StageScaleMode.NO_SCALE;
			basemc.stage.quality = StageQuality.BEST;
			init();
		}
		private function init(){
			//第四引数をtrueに!(interactive:Boolean)
			viewport = new Viewport3D(0,0,true,true);
			//buttonMode TRUE!!!
			viewport.containerSprite.buttonMode = true;
			basemc.addChild(viewport);
			renderer = new BasicRenderEngine();
			camera = new Camera3D();
			camera.z = -300;
			camera.focus = 500;
			camera.zoom = 1;
			scene = new Scene3D();
			//第三引数をtrueに!(interactive:Boolean)
			var colorMat:ColorMaterial = new ColorMaterial( 0xCCCC00, 1 ,true);
			colorMat.doubleSided = true;
			var bmpMat = new BitmapFileMaterial( "ico.gif" );
			bmpMat.interactive = true;
			//bmpMat.doubleSided = true;
			cube = new Cube(new MaterialsList({all:bmpMat}), 100, 100, 100);
			scene.addChild(cube);
			//InteractiveScene3DEvent!
			cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);
			cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOverHandler);
			cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOutHandler);
			basemc.addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(e):void{
			cube.rotationX += (viewport.stage.mouseY - viewport.stage.stageWidth/2) * 0.02;
			cube.rotationY += (viewport.stage.mouseX - viewport.stage.stageHeight/2) * 0.02;
			//camera.x  = -(viewport.mouseX * 3 )/2;
			//camera.y = (viewport.mouseY * 3 );
			//cube.rotationX += 2;
			//cube.rotationY += 2;
			renderer.renderScene(scene, camera, viewport);
		}
		private function onClickHandler(e:Event){
			trace("UNKO");
		}
		private function onMouseOverHandler(e:Event):void {
			new Tween(e.target, "scale", Elastic.easeOut, e.target.scale, 2, 20, false);
		}
		private function onMouseOutHandler(e:Event):void {
			new Tween(e.target, "scale", Elastic.easeOut, e.target.scale, 1, 20, false);
		}
	}
}

2007年12月25日14:26

Webデザインブログ

「Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る」の関連エントリー

 iTunes Store(Japan)

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/121

Navigation

古:AS3でTweener 1.31.67を使う
新:Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚
トップページ

Recently Entries
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...
Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う
Flex 用のライブラリとかを見ると mx パッケージとか使われてい...
Flash CS5 を予習 ~Text Layout Framework (TLF) 編~
Text Layout Framework (TLF) を使って、F...