papervision3d学习笔记:图片墙（2）

 

 在原有的基础上，尝试制作这种螺旋效果图片演示。其原理就是基于螺旋线的方式。

 

 准备条件依旧与图片墙一相同；

 

不过原有的代码这次分开来写，方便测试。

 

plane2D类：装载图片，（也可以增加，文字描述的）；

ImageEx类：处理图片的显示 获取等

主要Main类。实现3D的效果和交互方式。

 

在这里需要准备两套图片，一个小图，另外一个对应的大图片。交互的时候进行对图片显示。当中用到缓冲的类库集来加强显示效果。

 

 

 

 

书写过程

首先是继承Plane类的 平面类，仅仅增加一个方法而已。

package { import org.papervision3d.objects.primitives.Plane; import org.papervision3d.core.proto.MaterialObject3D; public class Plane2D extends Plane { //继承plane类，增加一个url 属性 public var url:String; public function Plane2D( material:MaterialObject3D=null, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0 ) { super(material, width, height, segmentsW, segmentsH); } } }

 

 

其次写一个图片类，用于制作一系列的事情

 

 package { import flash.events.EventDispatcher; import flash.utils.Dictionary; import flash.display.Sprite; import flash.display.Loader; import flash.display.Bitmap; import flash.events.*; import flash.net.*; import flash.filters.*; import com.greensock.TweenMax; public class ImageEx { private var tempURL:String; private var data:Dictionary = new Dictionary(true);//保存已经加载的图片 public var container:Sprite = new Sprite(); public function ImageEx() { } //添加图片 public function addImage(id:String,obj:*):void { data[id] = obj; } //获取图片 public function getImage(id:String):* { return data[id]; } //加载图片 public function loadImage(url:String):void { var loader:Loader = new Loader(); tempURL = url; loader.load(new URLRequest(url)) loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImageComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onErrorHandler); } //加载图片-- 删除监听 private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE, onLoadImageComplete); event.currentTarget.removeEventListener(IOErrorEvent.IO_ERROR, onErrorHandler); var bmp:Bitmap = Bitmap(event.currentTarget.content); bmp.x = -bmp.width / 2; bmp.y = -bmp.height / 2; var contain:Sprite = drawBase(bmp, bmp.width, bmp.height); contain.addEventListener(MouseEvent.CLICK, onBackHandler); contain.addChild(bmp); container.addChild(contain); contain.x = container.stage.stageWidth / 2; contain.y = container.stage.stageHeight / 2; contain.scaleX = contain.scaleY = 0; contain.alpha = 0; TweenMax.to(contain, 0.5, { scaleX:1, scaleY:1, alpha:1 } ); addImage(tempURL, contain); } private function onErrorHandler(event:IOErrorEvent):void { throw new Error("wrong!"); } //显示图片 public function showImage(url:String):void { var contain:Sprite = getImage(url); container.addChild(contain); contain.x = container.stage.stageWidth / 2; contain.y = container.stage.stageHeight / 2; contain.scaleX = contain.scaleY = 0; contain.alpha = 0; TweenMax.to(contain, 0.5, { scaleX:1, scaleY:1,alpha:1 }); } private function onBackHandler(event:MouseEvent):void { var mc:*= event.currentTarget; TweenMax.to(mc, 0.5, { scaleX:0, scaleY:0, alpha:0, onComplete:removeContain } ); function removeContain():void { if(container.contains(mc)) container.removeChild(mc); } } //绘制底图背景 public function drawBase(bitmap:*, w:Number, h:Number, color:uint = 0xffffff):Sprite { var filter:DropShadowFilter=new DropShadowFilter(); filter.strength=0.3; var shape:Sprite = new Sprite(); shape.addChild(bitmap); shape.graphics.lineStyle(0,0,0); shape.graphics.beginFill(color); shape.graphics.drawRect(bitmap.x-w/60,bitmap.y-h/60,w+w/30,h+h/30); shape.graphics.endFill(); shape.filters = [filter]; return shape; } } }

 

 

第三：实现的主要程序，包括图片显示。镜头效果。

 

 package { import org.papervision3d.core.utils.Mouse3D; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.view.BasicView; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.materials.*; import org.papervision3d.view.Viewport3D; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.core.render.filter.BasicRenderFilter; import org.papervision3d.core.utils.virtualmouse.*; import flash.filters.*; import flash.events.*; import flash.display.Sprite; import flash.utils.Dictionary; import flash.display.Bitmap; import flash.display.Loader; import flash.net.URLRequest; import com.greensock.TweenMax; import Plane2D; import ImageEx; [SWF(width="640", height="480", frameRate="30", backgroundColor="0x000000")] public class Main extends Sprite { private var pc:Plane = new Plane(); private var camera:Camera3D=new Camera3D();//摄影机 private var scene:Scene3D=new Scene3D();//场景 private var engine:BasicRenderEngine = new BasicRenderEngine();//渲染引擎 private var view:Viewport3D = new Viewport3D(640, 480, false, true); private var angle:Number = 0; private var h:int = 50; private var myImage:ImageEx = new ImageEx(); public function Main() { init3D(); } //初始化图片位置和设置 private function init3D():void { var contain:DisplayObject3D = new DisplayObject3D(); var perAngle:Number = 2 *4* Math.PI /40; for (var i:int=0; i<40; i++) { var cm:BitmapFileMaterial = new BitmapFileMaterial("wallimages/thumbs/"+(i+1)+".jpg"); var p:Plane2D = new Plane2D(cm, 100, 100); cm.interactive = true; cm.oneSide = false; p.x = Math.cos(i * perAngle) *400; p.z = Math.sin(i * perAngle) * 400; p.y =i* h; p.url = "wallimages/" + (i + 1) + ".jpg";//大图片路径 p.rotationY = ( -i * perAngle) * (180 / Math.PI) + 270;//计算的偏移值 p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOverHandler); p.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOutHandler); p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onMouseClickHandler); contain.addChild(p); } scene.addChild(contain); camera .z = 400; camera.target = pc; addChild(view); view.buttonMode = true; addChild(myImage.container); addEventListener(Event.ENTER_FRAME,render); } private function onMouseOverHandler(event:InteractiveScene3DEvent):void { } private function onMouseOutHandler(event:InteractiveScene3DEvent):void { } private function onMouseClickHandler(event:InteractiveScene3DEvent):void { //判断这张图片是否第一次加载 if(myImage.getImage(event.currentTarget.url)==null) { myImage.loadImage(event.currentTarget.url); } else { myImage.showImage(event.currentTarget.url); } } private function render(event:Event):void { //距离检测 var dist:Number = ((stage.mouseX) - stage.stageWidth * 0.5) *0.01; var dist2:Number = ((stage.mouseY) - stage.height * 0.5) *-0.1; angle += dist; //旋转镜头 camera.x =1000*Math.cos(angle*Math.PI/180); camera.z = 1000 * Math.sin(angle * Math.PI / 180); camera.y += dist2; if (camera.y < 369) { camera.y = 369; } if (camera.y > 1500) { camera.y = 1500; } pc.y = camera.y; engine.renderScene(scene, camera, view); } } }