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

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してそれを使いまわす。
// エフェクト effectLayer = new EffectLayer(); effectLayer.addEffect(new LayerEffect(new GlowFilter(0xFFFFFF, 1, 16, 16, 3, 3, false, false))); myViewport.addRenderLayer(effectLayer);


これをMouseOverした時に適用するには、renderLayerプロパティにこれを代入するだけ
// マウスオーバーイベント private function onMouseOver(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = effectLayer; } private function onMouseOut(e:InteractiveScene3DEvent):void { DisplayObject3D(e.target).renderLayer = null; }


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