- 浏览: 14361 次
最新评论
papervision3d学习笔记:图片墙(4)
2010年11月26日
pv3d可以做出很多不错的交互效果,尽管他更新脚步已经放缓,在这一年max 大会当中也没有出现大会面前,但是不得不说,pv3d 的易用性和交互效果依旧可以做出很多让人满意的作品。今晚无聊玩了一下这些图片墙,这种图片叫平面墙,利用图片组成一堵墙用于显示和交互。这种平面墙难度指数很低,而今晚当中,更加喜欢记录摄影机的缓冲效果。摄影机的缓冲效果可以让交互的时候产生更多让人酷的应用。要实现这种缓冲,则需要利用缓冲公式来实现。同时,使用摄影机的时候,对摄影机的平移可以改变视角的效果,看起来会呈现不同的视角变化。你所看到的因为摄影机平移而产生不同的变化。
主要需要看的是:摄影机运动 对视角产生变化
缓冲公式 , 产生缓冲效果,让效果过渡更加酷
这里主要是摄影机的缓冲效果。利用摄影机的运动对图片产生视角变化。 //缓冲镜头 camera.x += (distX - camera.x*0.5 ) * 0.3; camera.y += (distY -camera.y *0.5) * 0.3; contain.x += (distX - contain.x * 0.5) * 0.3; contain.z+= (distY- contain.z*0.8)*0.3; 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 flash.display.*; import com.greensock.TweenMax; import Plane2D; import ImageEx; [SWF(width="640", height="480", frameRate="30", backgroundColor="0x333333")] 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(); private var contain:DisplayObject3D; public function Main() { init3D(); } //初始化图片位置和设置 private function init3D():void { contain = new DisplayObject3D();//容器 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; cm.oneSide = false; p.x =(i%10)*100-stage.stageWidth/2-100; p.y =int(i/10)*100-stage.stageHeight/2+100; 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 = 600; camera.target = pc; addChild(view); view.buttonMode = true; myImage.container.x = myImage.container.y = 0; addChild(myImage.container); 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(myImage.getImage(event.currentTarget.url)==null ) { myImage.loadImage(event.currentTarget.url); } else { myImage.showImage(event.currentTarget.url); } } private function render(event:Event):void { //距离检测 var distX:Number = (stage.mouseX) - stage.stageWidth * 0.5; var distY:Number = (stage.mouseY) - stage.height * 0.5; //平移镜头 // camera.x = distX*2; //camera.y = -distY * 2; //缓冲镜头 camera.x += (distX - camera.x*0.5 ) * 0.3; camera.y += (distY -camera.y *0.5) * 0.3; contain.x += (distX - contain.x * 0.5) * 0.3; contain.z+= (distY- contain.z*0.8)*0.3; engine.renderScene(scene, camera, view); } } } 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.CO MPLETE, onLoadImageComplete); loader.contentLoaderInfo.addEventListener(IOErrorE vent.IO_ERROR, onErrorHandler); } //加载图片-- 删除监听 private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMP LETE, onLoadImageComplete); event.currentTarget.removeEventListener(IOErrorEve nt.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/6 0,w+w/30,h+h/30); shape.graphics.endFill(); shape.filters = [filter]; return shape; } } }
发表评论
-
深入了解GPU--学习教材 (摘自opengpu)
2012-01-20 01:14 880深入了解GPU--学习教材 ( ... -
S3C2450自动升级
2012-01-20 01:14 1260S3C2450自动升级 2010年06 ... -
Papervision3D Essentials 要点整理
2012-01-20 01:14 751Papervision3D Essentials 要点 ... -
papervision3d学习笔记:图片墙(1)
2012-01-20 01:13 672papervision3d学习笔记:图片墙(1) 2010年 ... -
第一章第一节计算机语言C语言基础教程
2012-01-17 01:33 785第一章第一节计算机语言C语言基础教程 2012年01月02日 ... -
start_kernel()注解2
2012-01-17 01:33 660start_kernel()注解2 2010年0 ... -
2011-1-8
2012-01-17 01:33 8252011-1-8 2011年01月08日 ... -
2001-6-1
2012-01-17 01:32 6822001-6-1 2011年09月17日 1.假设某台式 ... -
大文件上传解决办法
2012-01-15 20:13 892大文件上传解决办法 20 ... -
jQuery插件之jquery的form插件使用示例
2012-01-15 20:13 883jQuery插件之jquery的form插件使用示例 201 ... -
asp无组件上传
2012-01-15 20:13 715asp无组件上传 2009年10月14日 文件上传组件 ... -
ASP.NET 2.0使用FileUpload控件上传文件示例
2012-01-15 20:13 739ASP.NET 2.0使用FileUpload控件上传文件示例 ... -
经典的串口调试助手源代码(一)
2012-01-15 20:13 741经典的串口调试助手源代码(一) 2011年05月26日 ... -
这是一个广为流传的关于项目管理的通俗讲解 (转)
2012-01-11 12:21 568这是一个广为流传的关于项目管理的通俗讲解 (转) 2011年 ... -
struct2数字格式化
2012-01-11 12:21 734struct2数字格式化 2011年03月01日 st ... -
window.showModalDialog使用手册
2012-01-11 12:21 617window.showModalDialog使用手 ... -
3300_java
2012-01-11 12:21 5673300_java 2011年03月01日 impor ... -
Rails之格式化价格方法【转载】
2012-01-11 12:21 732Rails之格式化价格方法【转载】 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