feb19.jp

Nobuhiro Takahashi
Designer / Engineer

Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

Papervision3D 2.0 GreatWhiteで空間に浮かぶカード100枚

そんな最近よく見かけるインターフェース。Penのサイトでもあった気がする。というわけで、前回同様、1.5で作れるけど2.0で作るとどういう風になるかテストその2。

カードをクリックしてみてください。

サンプル

前のエントリーで書いたように、3Dなオブジェクトに対してインタラクティブな反応をさせるには、Viewport3Dインスタンスと、各種マテリアル系インスタンスの.interactiveプロパティをtrueにするということと、InteractiveScene3DEventを使えばインタラクションさせることができて、かつViewport3D.containerSprite.buttonModeをtrueにすれば、それらにマウスカーソルが乗った時にマウスカーソルをひとさしゆびカーソルに変わるようにできる。

そう整理して考えていけばこれらの問題は大した問題ではないかもしれないけど、若干めんどくさくなったなぁという感じです。

あとは座標系統が変わったという根本問題をどうにかしていかないとね。。。2D→3Dと3D→2Dの変換とか。。。その辺の解決策とか、やり方とか、ヒントとか、分かる方教えてください。。

とりあえず、コード。余計な行とかもありますが。。

package {
	import flash.display.*;
	import flash.events.*;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.objects.*;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.materials.shadematerials.*;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.lights.*;
	import caurina.transitions.*;
	import caurina.transitions.properties.*;
	public class  Cards3D {
		private var basemc;
		private var viewport;
		private var renderer;
		private var camera;
		private var scene;
		private var plane;
		private var objs;
		private var speeds;
		public function Cards3D(mc){
			basemc = mc;
			basemc.stage.align = StageAlign.TOP_LEFT;
			basemc.stage.scaleMode = StageScaleMode.NO_SCALE;
			basemc.stage.quality = StageQuality.BEST;
			init();
		}
		private function init(){
			viewport = new Viewport3D(0,0,true,true);
			viewport.containerSprite.buttonMode = true;
			basemc.addChild(viewport);
			renderer = new BasicRenderEngine();
			camera = new FreeCamera3D();
			camera.z = -400;
			camera.focus = 300;
			camera.zoom = 5;
			scene = new Scene3D();
			var colorMat:ColorMaterial = new ColorMaterial( 0xCCCC00, .6 ,true);
			colorMat.doubleSided = true;
			var bmpMat = new BitmapFileMaterial( "ico.gif" );
			bmpMat.interactive = true;
			bmpMat.doubleSided = true;
			objs = new Array();
			speeds = new Array();
			for(var i=0; i<100; i++){
				var obj = new Plane(bmpMat, 200, 200, 1, 1);
				scene.addChild(obj);
				obj.x = Math.random()*5000 - 2500;
				obj.y = Math.random()*2000 - 1000;
				obj.z = Math.random()*20000 - 10000;
				obj.rotationX = Math.random()*360;
				obj.rotationY = Math.random()*360;
				obj.rotationZ = Math.random()*360;
				var sp_r = Math.random()*1000 - 500;
				speeds.push(sp_r);
				obj.name="obj"+String(i);
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOverHandler);
				obj.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOutHandler);
				objs.push(obj);
			}
			basemc.addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(e):void{
			renderer.renderScene(scene, camera, viewport);
		}
		private function onClickHandler(e:Event){
			trace("UNKO");
			var name =e.currentTarget.name;
			var plane=objs[ Number(name.substr(3)) ];
			var target :DisplayObject3D = new DisplayObject3D();
			target.copyTransform( plane );
			target.moveBackward( 100 );
			Tweener.addTween( camera, {
				zoom		:1,
				x			:target.x,
				y			:target.y,
				z			:target.z,
				rotationX	:plane.rotationX,
				rotationY	:plane.rotationY,
				rotationZ	:plane.rotationZ,
				time		:6,
				transition	:"easeInOut"
				} );
		}
		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);
		}
	}
}
Tweet Share Bookmark

Navigation

prev: Papervision3D 2.0 GreatWhiteでマウスに反応するキューブを作る
next: AS3で読み込んだ外部画像にスムージングを適用する

Recently Entries