Papervision3D2.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してそれを使いまわす。
// エフェクト 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;

今回は、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(); 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); 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 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>


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

実際にTweenさせているのは、renderLoop内のたった７行だけ
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"}); }

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


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

今回は、MouseEventについて

１．描画領域全体に対するマウスイベント
２．3Dオブジェクトに対するマウスイベント
の２つを考える。

特に後者はPapervison3Dの1.5から仕様変更があったので、そこのポイントを押さえる。

実際にやってみるのは、
１．画面上でマウスをドラッグするとCubeを回転
２．マウスオーバーすると拡大、マウスアウトすると元に戻す









ソース（myMouseEvent.mxml）
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="420" height="260"> <mx:Script> <![CDATA[ import org.papervision3d.materials.BitmapMaterial; import flash.events.MouseEvent; import flash.events.Event; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.objects.primitives.Cube; 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; private var myScene:Scene3D; private var myCamera:FreeCamera3D; private var myViewport:Viewport3D; private var myRenderer:BasicRenderEngine; private var rootNode:DisplayObject3D; private var cube:Cube; private function init():void{ //ＵＩコンポーネント作成 var myNestingComponent:UIComponent = new UIComponent(); addChild(myNestingComponent); myViewport = new Viewport3D(420, 260, 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); /* Cubeの作成 */ // マテリアルの作成 var frontMaterial:BitmapMaterial = new BitmapFileMaterial("img/ai.jpg") var backMaterial:BitmapMaterial = new BitmapFileMaterial("img/fl.jpg") var rightMaterial:BitmapMaterial = new BitmapFileMaterial("img/dw.jpg") var leftMaterial:BitmapMaterial = new BitmapFileMaterial("img/ps.jpg") var topMaterial:BitmapMaterial = new BitmapFileMaterial("img/air.jpg") var bottomMaterial:BitmapMaterial = new BitmapFileMaterial("img/ms.jpg") frontMaterial.interactive = true; backMaterial.interactive = true; rightMaterial.interactive = true; leftMaterial.interactive = true; topMaterial.interactive = true; bottomMaterial.interactive = true; var cubeMaterials:MaterialsList = new MaterialsList({ front: frontMaterial, back : backMaterial, right: rightMaterial, left : leftMaterial, top : topMaterial, bottom: bottomMaterial }); // オブジェクトの作成 cube = new Cube(cubeMaterials, 50,50,50); cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver); cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut); rootNode.addChild(cube); } //回転してレンダリング private function renderLoop(myEvent:Event):void{ if(isMouseDown) { rootNode.rotationY += (mouseDownX - myViewport.mouseX)/20; rootNode.rotationX += (mouseDownY - myViewport.mouseY)/20; } myRenderer.renderScene(myScene, myCamera, myViewport); } private var isMouseDown:Boolean; private var mouseDownX:int; private var mouseDownY:int; private function onMouseDown(e:Event):void { isMouseDown = true; mouseDownX = myViewport.mouseX; mouseDownY = myViewport.mouseY; } private function onMouseUp(e:Event):void { isMouseDown = false; } private function onMouseOver(e:InteractiveScene3DEvent):void { cube.scale = 2; } private function onMouseOut(e:InteractiveScene3DEvent):void { cube.scale = 1; } ]]> </mx:Script> </mx:Application>



１．画面をドラッグするとCubeを回転
・イベント自体はPapervision3D特有のものでもなんでもなく、フツーのFlexのイベント
なので、thisにaddEventListenerするだけでマウスイベント自体は取れる

// MouseEvent① this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

・イベントの内容は自体は、マウスが押されているかどうかを保持するisMouseDown:Booleanと、ドラッグした距離に比例して素早く回転させたいのでドラッグの始点となる座標を保持だけ
private var isMouseDown:Boolean; private var mouseDownX:int; private var mouseDownY:int; private function onMouseDown(e:Event):void { isMouseDown = true; mouseDownX = myViewport.mouseX; mouseDownY = myViewport.mouseY; } private function onMouseUp(e:Event):void { isMouseDown = false; }

・実際の回転は、36行目でaddEventListerされたENTER_FLRAMEつまり毎フレーム呼ばれる関数内に書けばいい
if(isMouseDown) { rootNode.rotationY += (mouseDownX - myViewport.mouseX)/20; rootNode.rotationX += (mouseDownY - myViewport.mouseY)/20; }


２．マウスオーバー ・これはPapervision3dのEventで、1.5ではSceneはInteractiveScene3Dを使わなければならなかったり、MovieScene3Dでオブジェクトをその直下に配置しなければならないなどメンドクサイことがいっぱいあったけど、GreateWhiteではScene系のクラスはScene3Dのみになっている。
なので、マウスという2次元の座標に対し、3D次元空間にあるObjectのEventの為に計算を頑張るかは、それぞれのinteractiveというプロパティがtrueになっているかによって決まる。
まず、ViewPort3Dのインスタンスのinteractiveプロパティをtrueにする。コンストラクタでいうと4番目の引数がそれであるので、trueにする。

myViewport = new Viewport3D(420, 260, false, true);

・次にCubeのオブジェクトにイベントを付けたいので、こいつのMaterialのinteractiveプロパティもtrueにしとく。（何でもかんでもtrueにすると重くなるので、使うやつだけにする）
frontMaterial.interactive = true; backMaterial.interactive = true; rightMaterial.interactive = true; leftMaterial.interactive = true; topMaterial.interactive = true; bottomMaterial.interactive = true;

・最後にaddEventListerして終わり。
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver); cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);


以上メモ終わり

1.5から仕様変更が起こったので、基本的なPrimitiveObjectを表示するだけのソースを作成。


ポイントをメモ。







ソース（PrimitiveObject.mxml）
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="420" height="260"> <mx:Script> <![CDATA[ import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.primitives.Cone; import org.papervision3d.objects.primitives.Cube; 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; private var myScene:Scene3D; private var myCamera:FreeCamera3D; private var myViewport:Viewport3D; private var myRenderer:BasicRenderEngine; private var rootNode:DisplayObject3D; private var cube:Cube; private function init():void{ //ＵＩコンポーネント作成 var myNestingComponent:UIComponent = new UIComponent(); addChild(myNestingComponent); myViewport = new Viewport3D(420, 260, false, false); myNestingComponent.addChild(myViewport); setup(); this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録 } 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); /* Planeの作成 */ // マテリアルの作成 var planeMaterial:BitmapFileMaterial = new BitmapFileMaterial("img/ms.jpg"); planeMaterial.doubleSided = true; planeMaterial.smooth = true; // オブジェクトの作成 var plane:Plane = new Plane(planeMaterial, 48, 45, 1, 1); rootNode.addChild(plane); /* Cubeの作成 */ // マテリアルの作成 var cubeMaterials:MaterialsList = new MaterialsList({ front: new BitmapFileMaterial("img/ai.jpg"), back: new BitmapFileMaterial("img/fl.jpg"), right: new BitmapFileMaterial("img/dw.jpg"), left: new BitmapFileMaterial("img/ps.jpg"), top: new BitmapFileMaterial("img/air.jpg"), bottom: new BitmapFileMaterial("img/ms.jpg") }); // オブジェクトの作成 cube = new Cube(cubeMaterials, 50,50,50); cube.x = 100; rootNode.addChild(cube); /* Coneの作成 */ // マテリアルの作成 var coneMaterial:ColorMaterial = new ColorMaterial(0xcc0000); // オブジェクトの作成 var cone:Cone = new Cone(coneMaterial, 50, 50); cone.x = -100; rootNode.addChild(cone); } //回転してレンダリング private function renderLoop(myEvent:Event):void{ myCamera.rotationZ += 5; cube.rotationX += 10; rootNode.rotationY += 5; myRenderer.renderScene(myScene, myCamera, myViewport); } ]]> </mx:Script> </mx:Application>



svnソースは、http://papervision3d.googlecode.com/svn/trunk/のbranches/GreatWhite/src/にあるので、ビルドパスに追加



・Viewport3Dには、描画を計算するサイズを指定。mx:applicationと同じにしとけばとりあえず無駄は無い
myViewport = new Viewport3D(420, 260, false, false);

・カメラはFreeCameraを使うと、カメラを移動させたり回転させたりできる。
myCamera = new FreeCamera3D; //カメラオブジェクト生成 myCamera.zoom = 3; //カメラズーム myCamera.focus = 500; //カメラフォーカス

・オブジェクトはSceneに直接addChildせずに、rootNodeを作って用途ごとに階層化すれば、rootNodeごと移動とか回転とかできる。
rootNode = new DisplayObject3D("rootNode"); //ルートノード myScene.addChild(rootNode);

・BitmapFileMaterialで画像のマテリアルを作れる。doubleSidedで裏から見ても描画される
// マテリアルの作成 var planeMaterial:BitmapFileMaterial = new BitmapFileMaterial("img/ms.jpg"); planeMaterial.doubleSided = true; planeMaterial.smooth = true;

・カメラはFreeCameraを使うと、カメラを移動させたり回転させたりできる。
myCamera = new FreeCamera3D; //カメラオブジェクト生成

・Cubeは6面持っているので、MaterialListに1つずつ貼る。別にBitmapFIleMaterial以外のMaterialを使ってもいい。frontや、backとか以外にもallがある。
var cubeMaterials:MaterialsList = new MaterialsList({ front: new BitmapFileMaterial("img/ai.jpg"), back: new BitmapFileMaterial("img/fl.jpg"), right: new BitmapFileMaterial("img/dw.jpg"), left: new BitmapFileMaterial("img/ps.jpg"), top: new BitmapFileMaterial("img/air.jpg"), bottom: new BitmapFileMaterial("img/ms.jpg") });

・ColorMaterialも使ってみた。他にもMovieMaterialやWireframeMaterialなどがある。 Interractive～MaterialやPrecise～Materialは、廃止され、propertyでtrueすればいい
var coneMaterial:ColorMaterial = new ColorMaterial(0xcc0000);

・eventLisnerに追加してあるので、毎フレーム自動的よばれて描画してくれる。 とりあえず、回転を3種類の方法でやってみた。
private function renderLoop(myEvent:Event):void{ myCamera.rotationZ += 5; cube.rotationX += 10; rootNode.rotationY += 5; myRenderer.renderScene(myScene, myCamera, myViewport); }


以上メモ終わり