papervision3d学习笔记:图片墙(1)

papervision3d学习笔记:图片墙(1)
2010年09月27日
　　
　　使用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.BasicRenderFi lter; 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; i90) { view.camera.fov = 90; } else if( view.camera.fov