うねうね、環境マップ(反射)、影をやってみました。
PaperVision3Dでうねうね、環境マップ(反射)、影をやってみました。
ほとんどがサンプルをコピペです(^^;
こんな感じ
http://moeten.info/flex/20080920_pv3d2Test/bin-release/main5.html
http://moeten.info/flex/20080920_pv3d2Test/bin-release/main6.html
http://moeten.info/flex/20080920_pv3d2Test/bin-release/main7.html
ソースコードはこちら
#main5.mxml、main6.mxml、main7.mxml
参考にしたページ
- ShadeMaterialsとPointLight3Dを使ってみる(ライトと影の表現)
- Casting Shadows In Papervision3D - Redux
- as3dmodをPV3Dで試してみる
- Papervision3D 2.0(GreateWhite)で反射を比較する
- 入門編? Phong Shader の種類
- Papervision3D 2.0 Chrome Example + Source.
as3dmodを使ったうねうね。main5.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="1" backgroundColor="0x000000" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import org.papervision3d.core.math.Number3D; import org.papervision3d.core.material.TriangleMaterial; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.lights.PointLight3D; import org.papervision3d.objects.primitives.Cylinder; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.objects.special.Graphics3D; import org.papervision3d.objects.special.VectorShape3D; import org.papervision3d.materials.special.VectorShapeMaterial; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.BitmapColorMaterial; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.shadematerials.PhongMaterial; import org.papervision3d.typography.fonts.HelveticaBold; import org.papervision3d.typography.Word3D; import org.papervision3d.typography.Letter3D; import com.as3dmod.*; import com.as3dmod.modifiers.*; import com.as3dmod.util.*; import com.as3dmod.plugins.pv3d.*; import com.as3dmod.plugins.Library3d; import com.as3dmod.core.Modifier; import caurina.transitions.Tweener; //初期化 private function init():void{ setupScene(); setText(); setupBlokjes(); setupListeners(); setupObject(); setupCamera(); } //シーンの作成+リフレクション private var cameraTarget : DisplayObject3D; private var r:ReflectionView; private function setupScene():void{ r = new ReflectionView( myImage.width , myImage.height , true , true ); //リフレクションを置く場所 r.surfaceHeight = -300; //ぼかし具合 r.viewportReflection.filters = [new BlurFilter(8, 8, 1)]; myImage.addChildAt( r , 0 ); } //カメラ設定 private function setupCamera():void{ cameraTarget = new DisplayObject3D(); //なんかないと怒られる r.camera.z = - 800; r.camera.y = 10; } //イベントリスナー設定 private function setupListeners():void{ addEventListener(Event.ENTER_FRAME, onRenderTick); addEventListener(Event.RESIZE, onResize); } private var bone :Bend; private var bonePhase :Phase; private var cylinder :DisplayObject3D; private var modifier :ModifierStack; private function setupObject():void{ var pointLight:PointLight3D = new PointLight3D(); pointLight.x = pointLight.y = pointLight.z = 1000; // シリンダーを作成します cylinder = new Cylinder( new PhongMaterial (pointLight , 0xDDDDDD, 0x333333, 10) , 100, 800, 16, 16 ); cylinder.z = -200; cylinder.y = 300; cylinder.x = -400; r.scene.addChild(cylinder); // as3dmodの設定を行います modifier = new ModifierStack( new LibraryPv3d() , cylinder); bone = new Bend(0, .3); bone.constraint = ModConstant.LEFT; bonePhase = new Phase(); modifier.addModifier( bone ); // レンダリングを開始します } // Word3Dの作成 private var words:Word3D; private var shape:VectorShape3D; private var t2:Twist; private function setText():void{ var mat:VectorShapeMaterial = new VectorShapeMaterial( 0xffffff ); words = new Word3D("We Love Flex ! :-)", new HelveticaBold(), mat ); words.x = 100; words.scale = 3; r.scene.addChild(words); shape = new VectorShape3D(new VectorShapeMaterial(0xffffff)); var g:Graphics3D = shape.graphics; shape.z = -200; shape.x = 500; r.scene.addChild(shape); g.clear(); g.beginFill(0xffff00); g.drawRoundRect(-200 ,-200 ,400 ,400 ,200,200); g.endFill(); t2 = new Twist( shape ); } import gs.TweenLite; private function rotateLetters(word : Word3D , drx:Number , dry:Number , drz:Number) : void { for each (var do3d:DisplayObject3D in word.letters) { if(TweenLite.isTweening(do3d))return; TweenLite.to(do3d, 3, { rotationY:do3d.rotationY + dry , rotationZ:do3d.rotationZ + drz , rotationX:do3d.rotationX + drx }); } } //オブジェ(キューブ)の作成 private var cube:Cube; private var t:Twist; private var a:Number = 0; private var axis:Number3D = new Number3D(0, 1, 0); private var center:Number3D = new Number3D(0, 0, 0); private function setupBlokjes() : void { var mat:BitmapFileMaterial = new BitmapFileMaterial("Fx.png"); cube = new Cube(new MaterialsList({all:mat}),200, 200, 200, 4, 4, 4); cube.z = -200; r.scene.addChild(cube); t = new Twist( cube ); } //レンダリング+マウス操作 protected function onRenderTick(e:Event):void { var reach:Number = 0.005; var ease:Number = 0.05; var cameraDistance:Number = 1000; //カメラワーク r.camera.x += (Math.sin(mouseX * reach) * -cameraDistance - r.camera.x) * ease/10; if( this.mouseY > this.height/2 ){ r.camera.y -= (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; }else{ r.camera.y += (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; } r.camera.lookAt(cameraTarget); //文字をくるくる回転 if( Math.random() > 0.5 ){ var drx:Number = Math.round(Math.random() * 2 - 1) * 360; var dry:Number = Math.round(Math.random() * 2 - 1) * 360; var drz:Number = Math.round(Math.random() * 2 - 1) * 360; rotateLetters( words , drx , dry , drz); } //Twistさせる t.twist( Math.sin( a += 0.3 ) * 30 , axis , center ); t2.twist( Math.sin( a += 0.3 ) * 30 , axis , center ); // as3dmodのパラメーターをアニメートします bonePhase.value += 0.04; bone.force = bonePhase.phasedValue * 1.5; // as3dmodを適用します modifier.apply(); //レンダリング r.singleRender(); } //リサイズイベント private function onResize(e : Event) : void { } ]]> </mx:Script> <mx:Image id="myImage" width="100%" height="100%" /> </mx:Application>
環境マップを使った反射 main6.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="1" backgroundColor="0x000000" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.core.math.Number3D; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.lights.PointLight3D; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.objects.primitives.Sphere; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.shadematerials.EnvMapMaterial; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.BitmapColorMaterial; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.materials.utils.MaterialsList; //初期化 private function init():void{ setupScene(); setupListeners(); makeCube(); setupCamera(); } //シーンの作成+リフレクション private var r:ReflectionView; private function setupScene():void{ r = new ReflectionView( myImage.width , myImage.height , true , true ); //リフレクションを置く場所 r.surfaceHeight = -300; //ぼかし具合 r.viewportReflection.visible = false;//filters = [new BlurFilter(8, 8, 1)]; myImage.addChildAt( r , 0 ); } //カメラ設定 private var cameraTarget : DisplayObject3D; private function setupCamera():void{ cameraTarget = new DisplayObject3D(); //なんかないと怒られる r.camera.z = - 800; r.camera.y = 10; } //イベントリスナー設定 private function setupListeners():void{ addEventListener(Event.ENTER_FRAME, onRenderTick); addEventListener(Event.RESIZE, onResize); } [Embed(source="/assets/ufizi/left.jpg")] private var leftAsset :Class; [Embed(source="/assets/ufizi/front.jpg")] private var frontAsset:Class; [Embed(source="/assets/ufizi/back.jpg")] private var backAsset :Class; [Embed(source="/assets/ufizi/uffizi_probe2.png")]private var probeAsset:Class; private var cube2 :Cube; private var sphere2 :Sphere; private var envMaterial2:EnvMapMaterial; private var light2 :PointLight3D; private var t2:Twist; private var a:Number = 0; private var axis:Number3D = new Number3D(0, 1, 0); private var center:Number3D = new Number3D(0, 0, 0); private function makeCube():void{ var leftMaterial :BitmapMaterial = new BitmapMaterial(new leftAsset().bitmapData, false); var frontMaterial:BitmapMaterial = new BitmapMaterial(new frontAsset().bitmapData, false); var backMaterial :BitmapMaterial = new BitmapMaterial(new backAsset().bitmapData, false); var ml:MaterialsList = new MaterialsList(); ml.addMaterial(leftMaterial, "left"); ml.addMaterial(frontMaterial, "front"); ml.addMaterial(backMaterial, "back"); cube2 = new Cube(ml, 15000,15000,15000,4,4,4,Cube.ALL,Cube.TOP|Cube.BOTTOM|Cube.RIGHT); cube2.yaw(90); r.scene.addChild(cube2); light2 = new PointLight3D(false,false); envMaterial2 = new EnvMapMaterial( light2, new probeAsset().bitmapData , new probeAsset().bitmapData , 0 ); sphere2 = new Sphere( envMaterial2 , 300 ,16, 16 ); r.scene.addChild( sphere2 ); t2 = new Twist( sphere2 ); } //レンダリング+マウス操作 protected function onRenderTick(e:Event):void { var reach:Number = 0.005; var ease:Number = 0.05; var cameraDistance:Number = 1000; //カメラワーク r.camera.x += (Math.sin(mouseX * reach) * -cameraDistance - r.camera.x) * ease/10; if( this.mouseY > this.height/2 ){ r.camera.y -= (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; }else{ r.camera.y += (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; } t2.twist( Math.sin( a += 0.3 ) * 30 , axis , center ); r.camera.lookAt(cameraTarget); //レンダリング r.singleRender(); } //リサイズイベント private function onResize(e : Event) : void { } ]]> </mx:Script> <mx:Image id="myImage" width="100%" height="100%" /> </mx:Application>
影 main7.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="1" backgroundColor="0x000000" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import org.papervision3d.core.material.TriangleMaterial; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.shadematerials.GouraudMaterial; import org.papervision3d.materials.MovieMaterial; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.materials.BitmapColorMaterial; import org.papervision3d.objects.special.commands.BeginFill; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.objects.primitives.Sphere; import org.papervision3d.objects.primitives.Cube; //初期化 private function init():void{ setupScene(); setupListeners(); setupCube(); setupCamera(); } //シーンの作成+リフレクション private var r:ReflectionView; private function setupScene():void{ r = new ReflectionView( myImage.width , myImage.height , true , true ); //リフレクションを置く場所 r.surfaceHeight = -300; //ぼかし具合 r.viewportReflection.filters = [new BlurFilter(8, 8, 1)]; myImage.addChildAt( r , 0 ); } //カメラ設定 private var cameraTarget : DisplayObject3D; private function setupCamera():void{ cameraTarget = new DisplayObject3D(); //なんかないと怒られる r.camera.z = - 800; r.camera.y = 10; } //イベントリスナー設定 private function setupListeners():void{ addEventListener(Event.ENTER_FRAME, onRenderTick); addEventListener(Event.RESIZE, onResize); } [Embed(source="06.jpg")]private var texture:Class; private var light:PointLight3D; private var cube:Cube; private var plane:Plane; private var sphere:Sphere; private var shadowCaster:ShadowCaster = new ShadowCaster( "shadow1", 0, BlendMode.NORMAL, 0.5, [new BlurFilter(8, 8, 2)]); private function setupCube():void{ light = new PointLight3D(false,false); light.y = 200; var mat:MaterialsList = new MaterialsList({all:new GouraudMaterial( light , 0xFFFFFF , 0x666666 ) } ); cube = new Cube( mat , 100 , 100 , 100 ); var shadier:ColorTransform = new ColorTransform(0.46, 0.46, 0.46); var movie:Sprite = new Sprite(); shadowCaster.setType(ShadowCaster.DIRECTIONAL); var bmp:BitmapData = Bitmap(new texture()).bitmapData; movie.graphics.beginBitmapFill(bmp, null, true); movie.graphics.drawRect(0, 0, 512, 512); movie.graphics.endFill(); movie.transform.colorTransform = shadier; var mat2:MovieMaterial = new MovieMaterial(movie, false, true, true); mat2.doubleSided = true; plane = new Plane( mat2 , 500 , 500 ); plane.y = -100; r.scene.addChild( plane ); plane.rotationX= 90; r.scene.addChild( cube ); var material:WireframeMaterial = new WireframeMaterial( 0x999999 ); material.doubleSided = true; sphere = new Sphere( material , 10 ); r.scene.addChild( sphere ); } //レンダリング+マウス操作 private var degree:Number = 0; protected function onRenderTick(e:Event):void { var reach:Number = 0.005; var ease:Number = 0.05; var cameraDistance:Number = 1000; //カメラワーク r.camera.x += (Math.sin(mouseX * reach) * -cameraDistance - r.camera.x) * ease/4; if( this.mouseY > this.height/2 ){ r.camera.y -= (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; }else{ r.camera.y += (Math.sin(this.mouseY * reach) * cameraDistance + r.camera.y) * ease/10; } degree += 0.1; light.x = 300*( Math.cos( degree ) - Math.sin( degree ) ); light.z = 300*( Math.sin( degree ) + Math.cos( degree ) ); sphere.x = light.x; sphere.y = light.y; sphere.z = light.z; r.camera.lookAt(cameraTarget); shadowCaster.castModel( cube , light , plane ); //レンダリング r.singleRender(); } //リサイズイベント private function onResize(e : Event) : void { } ]]> </mx:Script> <mx:Image id="myImage" width="100%" height="100%" /> </mx:Application>