- 浏览: 14419 次
最新评论
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; iBitmapFileMaterial = new BitmapFileMaterial("wallimages/thumbs/"+(i+1)+".jp g"); 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):v oid { } 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/6 0,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.CO MPLETE, 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.COMP LETE, 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
发表评论
-
深入了解GPU--学习教材 (摘自opengpu)
2012-01-20 01:14 884深入了解GPU--学习教材 ( ... -
S3C2450自动升级
2012-01-20 01:14 1265S3C2450自动升级 2010年06 ... -
Papervision3D Essentials 要点整理
2012-01-20 01:14 753Papervision3D Essentials 要点 ... -
papervision3d学习笔记:图片墙(4)
2012-01-20 01:13 662papervision3d学习笔记:图片墙(4) 2010年 ... -
第一章第一节计算机语言C语言基础教程
2012-01-17 01:33 790第一章第一节计算机语言C语言基础教程 2012年01月02日 ... -
start_kernel()注解2
2012-01-17 01:33 664start_kernel()注解2 2010年0 ... -
2011-1-8
2012-01-17 01:33 8282011-1-8 2011年01月08日 ... -
2001-6-1
2012-01-17 01:32 6872001-6-1 2011年09月17日 1.假设某台式 ... -
大文件上传解决办法
2012-01-15 20:13 894大文件上传解决办法 20 ... -
jQuery插件之jquery的form插件使用示例
2012-01-15 20:13 885jQuery插件之jquery的form插件使用示例 201 ... -
asp无组件上传
2012-01-15 20:13 719asp无组件上传 2009年10月14日 文件上传组件 ... -
ASP.NET 2.0使用FileUpload控件上传文件示例
2012-01-15 20:13 742ASP.NET 2.0使用FileUpload控件上传文件示例 ... -
经典的串口调试助手源代码(一)
2012-01-15 20:13 744经典的串口调试助手源代码(一) 2011年05月26日 ... -
这是一个广为流传的关于项目管理的通俗讲解 (转)
2012-01-11 12:21 571这是一个广为流传的关于项目管理的通俗讲解 (转) 2011年 ... -
struct2数字格式化
2012-01-11 12:21 736struct2数字格式化 2011年03月01日 st ... -
window.showModalDialog使用手册
2012-01-11 12:21 618window.showModalDialog使用手 ... -
3300_java
2012-01-11 12:21 5693300_java 2011年03月01日 impor ... -
Rails之格式化价格方法【转载】
2012-01-11 12:21 733Rails之格式化价格方法【转载】 2011年03月01日 ...
相关推荐
学习PaperVision3D随行笔记,基础知识
整理了Papervision3d的各方面资料,并且提供一个全景代码案例!
Papervision3D is a powerful real-time 3D engine for Flash. Papervision3D can take externally created 3D models and render them as Flash content, without requiring end-users to download or install an ...
《Papervision3D+Essentials》中文翻译
Papervision3D 教程,pv3d,pv3d+Flex,pv3d中文帮助
Papervision3D是一个基于ActionScript的开源项目,目的在于实现更加炫丽美观、功能强大的Flash 3D Web应用程序。尤其是去年ActionScript 3发布了之后,ActionScript的效率得到了大幅度提升,基于此的Papervision3D...
Papervision3D_2.0.869.swc
有关papervision3D学习资料,例子(网上博客等资源)等等等
例子来自于Flash3D研究所,超简易Papervision3D基础 Main.cs 小球加外部贴图 Main2.cs 物体的各种移动 (讲解移动/旋转/放大物体的方法) Main3.cs导入外部模型 (讲解如何从外部软件导入collada文件) Main4.cs pv...
Papervision3D_2.1.932.swcPapervision3D_2.1.932.swcPapervision3D_2.1.932.swc
Papervision3D的api,这个帮助文档介绍各种包的使用,有利于快速学习3D
Papervision3D Essentials 中文版 翻译 第一章 docx格式
希望对学习PV3D引擎的人提供点帮助。这是一pv3D的api电子书
使用papervision3d引擎做的7个实例源码
Papervision3D Essentials (PV3D)的中文版电子书及 书中实例源码下载 PV3D FLEX 三维渲染必备开源包
一个不错的Flash 3D引擎Papervisio3D,让你的flash从2D转化3D不再是难事.最新版本as3
Flash3D引擎 "Papervision3D" 演示 http://www.onemotion.com/flash/spider/
papervision3d 精髓,入门者必备,最新版本
papervisiion3d sdk,开发环境myeclipse+flex+pv3d
博文链接:https://ioryioryzhan.iteye.com/blog/206368