いそっちノート: Papervision3D2.0: 2008年5月アーカイブ

Papervision3D2.0: 2008年5月アーカイブ

[Papervision3D2.0]#4 PV2.0でGlowFilterを使う

isocchi

(2008年5月 6日 14:17) | 個別ページ | コメント(0) | トラックバック(0) |

Papervison3D2.0でGlowFilterを使う時のメモ

まず、GreatWhiteでは使えない（たぶん
なので、GreatWhiteではなくEffectsの方を使う。

FilterはGlowFilterじゃなくてもいいはずだけど、使ったことないからわかんない

ぇっと、前回の[Papervision3D2.0]#3 Tweenerでトゥィ―――ンするのマウスオーバーしたPlaneを光らせるようにする。

ソース（ myGlowFilter.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()" width="600" height="300">
	<mx:Script>
		<![CDATA[
			import org.papervision3d.events.InteractiveScene3DEvent;
			import org.papervision3d.core.effects.LayerEffect;
			import org.papervision3d.core.layers.EffectLayer;
			import flash.events.MouseEvent;
			import flash.events.Event;
			import org.papervision3d.materials.ColorMaterial;
			import org.papervision3d.objects.primitives.Plane;
			import org.papervision3d.objects.DisplayObject3D;
			import org.papervision3d.cameras.FreeCamera3D;
			import mx.core.UIComponent;
			import org.papervision3d.render.BasicRenderEngine;
			import org.papervision3d.view.Viewport3D;
			import org.papervision3d.scenes.Scene3D;
			import caurina.transitions.Tweener;

private var myScene:Scene3D;
			private var myCamera:FreeCamera3D;
			private var myViewport:Viewport3D;
			private var myRenderer:BasicRenderEngine;
			private var rootNode:DisplayObject3D;
			private var effectLayer:EffectLayer;

private function init():void{
				//ＵＩコンポーネント作成
				var myNestingComponent:UIComponent = new UIComponent();
				addChild(myNestingComponent);
				myViewport = new Viewport3D(600, 300, false, true);
				myNestingComponent.addChild(myViewport);
				setup();

this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録
				// MouseEvent①
				this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
				this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

}

private function setup():void{

myScene = new Scene3D();				//シーン生成
				myRenderer = new BasicRenderEngine();	//レンダリング専用クラス
				myCamera = new FreeCamera3D;				//カメラオブジェクト生成
				myCamera.zoom = 3;						//カメラズーム
				myCamera.focus = 500;					//カメラフォーカス
				rootNode = new DisplayObject3D("rootNode");	//ルートノード
				myScene.addChild(rootNode);
				
				// エフェクト
				effectLayer = new EffectLayer();
				effectLayer.addEffect(new LayerEffect(new GlowFilter(0xFFFFFF, 1, 16, 16, 3, 3, false, false)));
				myViewport.addRenderLayer(effectLayer);

var color:Array = [0xffa8a8, 0xffa8d3, 0xffa8ff, 0xd3a8ff, 0xa8a8ff, 0xa8d3ff, 0xa8ffff, 0xa8ffd3, 0xa8ffa8, 0xd3ffa8, 0xffffa8, 0xffd3a8];
				var material:Array = new Array();
				for(var index:int = 0; index < color.length; index++) {
					var cm:ColorMaterial = new ColorMaterial(color[index]);
					cm.interactive = true;
					material.push(cm);
				}

for(index = 0; index < 50; index++) {
					var plane:Plane = new Plane(material[index%material.length], 150, 150);
					plane.x = 200 * index - 5000;
					plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver);
					plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);
					rootNode.addChild(plane);
				}

}
			
			// マウスオーバーイベント
			private function onMouseOver(e:InteractiveScene3DEvent):void {
				DisplayObject3D(e.target).renderLayer = effectLayer;
			}

private function onMouseOut(e:InteractiveScene3DEvent):void {
				DisplayObject3D(e.target).renderLayer = null;				
			}

//回転してレンダリング
			private function renderLoop(myEvent:Event):void{
				if(isMouseDown) {
					var dx:int = (myViewport.mouseX - mouseDownedX);
					Tweener.addTween(rootNode, {x:rootNode.x - dx*6, time:3, transition:"easeOut"});
					Tweener.addTween(myCamera, {rotationY: dx, time:1,  transition:"easeOut"});
				} else {
					Tweener.addTween(myCamera, {rotationY: 0, time:3,  transition:"easeOut"});
				}
				myRenderer.renderScene(myScene, myCamera, myViewport);
			}

private var isMouseDown:Boolean;
			private var mouseDownedX:int;
			private var mouseDownedY:int;
			private function onMouseDown(e:Event):void {
				isMouseDown = true;
				mouseDownedX = myViewport.mouseX;
				mouseDownedY = myViewport.mouseY;
			}

private function onMouseUp(e:Event):void {
				isMouseDown = false;
			}

]]>
	</mx:Script>
</mx:Application>

GlowFilter自体はどのオブジェクトにマウスオーバーしても同じにするので、インスタンスは一度だけnewしてそれを使いまわす。

これをMouseOverした時に適用するには、renderLayerプロパティにこれを代入するだけ

MouseEvent(InteractiveScene3DEvent)を有効にするのに、cameraとmaterialのinteractiveプロパティをtrueにするのを忘れずに（[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみる）

[Papervision3D2.0]#3 Tweenerでトゥィ―――ンする

isocchi

(2008年5月 1日 22:55) | 個別ページ | コメント(0) | トラックバック(0) |

今回は、Tweenerについて

これのソースあんま出したくなかったけど、 1000spで受けよかったし、自分でもまた使うだろうからメモ

ソース（ myTweener.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()" width="600" height="300">
	<mx:Script>
		<![CDATA[
			import flash.events.MouseEvent;
			import flash.events.Event;
			import org.papervision3d.materials.ColorMaterial;
			import org.papervision3d.objects.primitives.Plane;
			import org.papervision3d.objects.DisplayObject3D;
			import org.papervision3d.cameras.FreeCamera3D;
			import mx.core.UIComponent;
			import org.papervision3d.render.BasicRenderEngine;
			import org.papervision3d.view.Viewport3D;
			import org.papervision3d.scenes.Scene3D;
			import caurina.transitions.Tweener;

private var myScene:Scene3D;
			private var myCamera:FreeCamera3D;
			private var myViewport:Viewport3D;
			private var myRenderer:BasicRenderEngine;
			private var rootNode:DisplayObject3D;

private function init():void{
				//ＵＩコンポーネント作成
				var myNestingComponent:UIComponent = new UIComponent();
				addChild(myNestingComponent);
				myViewport = new Viewport3D(600, 300, false, false);
				myNestingComponent.addChild(myViewport);
				setup();

}

private function setup():void{

var color:Array = [0xffa8a8, 0xffa8d3, 0xffa8ff, 0xd3a8ff, 0xa8a8ff, 0xa8d3ff, 0xa8ffff, 0xa8ffd3, 0xa8ffa8, 0xd3ffa8, 0xffffa8, 0xffd3a8];
				var material:Array = new Array();
				for(var index:int = 0; index < color.length; index++) {
					material.push(new ColorMaterial(color[index]));
				}

for(index = 0; index < 50; index++) {
					var plane:Plane = new Plane(material[index%material.length], 150, 150);
					plane.x = 200 * index - 5000;
					rootNode.addChild(plane);
				}

}

private function onMouseUp(e:Event):void {
				isMouseDown = false;
			}

]]>
	</mx:Script>
</mx:Application>

Tweenerは、Papervsionに含まれていないので、svnでhttp://tweener.googlecode.com/svn/trunk/をチェックアウトし、Tweenerのソースを落とし、ビルドパスに追加
マウスイベントは、[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみると同じようにAddEventListnerする。

実際にTweenさせているのは、renderLoop内のたった７行だけ

トゥイーンは、たった1行
Tweener.addTween(対象オブジェクト, {プロパティ:値, time:Tweenする時間(秒)}, transition:Tweenのタイプ)
とするだけでできる。Tweenのタイプ(?)は、閃光的網站・弛緩複合体の tweener も弄ってみた(3)にいっぱい載ってるので、それを参考にした。

＜参考＞
・tweener も弄ってみた(3)　閃光的網站・弛緩複合体
・パステルカラー

Papervision3D2.0: 2008年5月アーカイブ

[Papervision3D2.0]#4 PV2.0でGlowFilterを使う

[Papervision3D2.0]#3 Tweenerでトゥィ―――ンする

検索

最近のブログ記事

カテゴリ

iKnow