feb19.jp

Nobuhiro Takahashi
Designer / Engineer

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

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);
		}
	}
}

Navigation

prev: AS3でTweener 1.31.67を使う
next: Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

Recently Entries