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

 使用pv3d 类库真的可以创作出不错的效果演示，这种效果已经见得很多了，实际做法也不是很难。

基本原理是通过圆形的方式对图片进行分布，然后通过rotationY 偏转每一张图片角度，促使向中心点连线垂直。

讲到分布，圆形分布是其中一种比较常用的手法。通过对图片进行平均的分布位置，围绕圆来进行。

制作过程：

     1. 准备papervision3d 的类库

     2. 准备补间引擎类库TweenMax 或者其他

     3 .准备两套图片，一大一小对应起来。

     4. 对图片实现交互效果，弹出和缩放，通过TweenMax 进行

     5.采取一次加载的办法，当点击加载之后通过保存方式对其进行显示。

    

 

初步示意图如图，每一张图片都会与中心向注册点连线垂直。这一点当我们求出出来就能实现到如上面的效果。

偏移角度计算：通过平行线互补角为180的关系 求出，（180-i*perAngle）+90=-i*perAngle+270;这个方式可以求出偏移的角度。

下面的类写在一个里面，但是建议将其分开处理。使主类尽量减少不必要的代码开支。看起来更加简洁一些。

  Main.as

  plane2d.as

  还可以再细分起来。

 注意：由于方便一点编译所以将整个类写出来，但是为了分类减少主类的大小和复杂的逻辑，还是可以将部分功能抽出来。

 

下载试试。

 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; [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:ReflectionView=new ReflectionView(640,480,true,true); private var angle:Number = 0; private var vMouse:VirtualMouse; private var mouse3D:Mouse3D; private var data:Dictionary = new Dictionary(true);//保存已经加载的图片 private var tempURL:String; public function Main() { init3D(); } //初始化图片位置和设置 private function init3D():void { var contain:DisplayObject3D = new DisplayObject3D(); var perAngle:Number = 2 * Math.PI / 20; for (var i:int=0; i<20; i++) { var cm:BitmapFileMaterial = new BitmapFileMaterial("wallimages/thumbs/"+(i+1)+".jpg"); var p:Plane2D = new Plane2D(cm, 100, 100); cm.interactive = true; p.x = Math.cos(i * perAngle) *350; p.z = Math.sin(i * perAngle) * 350; 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); } view.scene.addChild(contain); view.camera .z = -600; view.camera.target = pc; //设置反射 view.surfaceHeight =-100; view.viewportReflection.alpha = 0.5; view.viewportReflection.filters = [new BlurFilter(3, 3, 1)]; //vMouse = view.viewport.interactiveSceneManager.virtualMouse; // mouse3D = view.viewport.interactiveSceneManager.mouse3D; // Mouse3D.enabled = true; addChild(view); addEventListener(Event.ENTER_FRAME,render); } private function onMouseOverHandler(event:InteractiveScene3DEvent):void { } private function onMouseOutHandler(event:InteractiveScene3DEvent):void { } private function onMouseClickHandler(event:InteractiveScene3DEvent):void { //判断这张图片是否第一次加载 if(getImage(event.currentTarget.url)==null) { loadImage(event.currentTarget.url); } else { showImage(event.currentTarget.url); } } //绘制底图背景 private 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; } //添加图片 private function addImage(id:String,obj:*):void { data[id] = obj; } //获取图片 private function getImage(id:String):* { return data[id]; } //加载图片 private function loadImage(url:String):void { var loader:Loader = new Loader(); tempURL = url; loader.load(new URLRequest(url)) loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImageComplete); } //显示图片 private function showImage(url:String):void { var contain:Sprite = getImage(url); addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2; contain.scaleX = contain.scaleY = 0; contain.alpha = 0; TweenMax.to(contain, 0.5, { scaleX:1, scaleY:1,alpha:1 }); } //加载图片-- 删除监听 private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMPLETE, onLoadImageComplete); 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); addChild(contain); contain.x = stage.stageWidth / 2; contain.y = 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 onBackHandler(event:MouseEvent):void { var mc:*= event.currentTarget; TweenMax.to(mc, 0.5, { scaleX:0, scaleY:0, alpha:0, onComplete:removeContain } ); function removeContain():void { removeChild(mc); } } private function render(event:Event):void { //距离检测 var dist:Number = ((stage.mouseX) - stage.stageWidth * 0.5) * 0.005; var dist2:Number = ((stage.mouseY) - stage.height * 0.5) *0.01; angle += dist; //旋转镜头 view.camera.x =600*Math.cos(angle*Math.PI/180); view.camera.z =600*Math.sin(angle*Math.PI/180); view.camera.fov += dist2; if (view.camera.fov>90) { view.camera.fov = 90; } else if( view.camera.fov<50) { view.camera.fov = 50; } view.singleRender();//渲染 } } } import org.papervision3d.objects.primitives.Plane; import org.papervision3d.core.proto.MaterialObject3D; 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); } }

 

点击之后交互效果。