papervision3d学习笔记:卷轴-清明上河图
2010年11月23日
( 本来很想尝试csdn 上传图片,可是发现今天csdn 上传图片已经超出了20m,图片很麻烦)
今天,将之前的东西改写了一下发现有很多趣味的地方。没想到原来还可以这样子。将一张清明上河图的平面卷成这种圆柱的形状。
在卷的时候,是怎样将图片卷成圆柱形状?其实采用办法个人比较笨拙一点,但是实现起来会很简单。
基本过程是将图片进行拆片,
我们加载一张图片之后,通过位图复制的办法,按等分的办法将其分割一块块,然后利用这些碎片,就可以根据我们的喜好来组合拼的办法,这样看起来一张清明上河图就变成了卷轴的形状了。至于怎样算每一个角度偏移?这里又会涉及到圆的计算办法。利用三角函数计算出来 。有兴趣可以尝试一下。
当中里面使用pv3d 两种交互办法,这种交互过程是在一本pv3d教程当中提取出来。里面有距离检测法,和通过鼠标让摄影机移动的交互办法。很实用的技巧。
距离检测法:鼠标向中心点位置靠近,在这个距离当中鼠标的mouseX和mouseY会产生变化值,这样一来他们向中心点的连线距离就会产生一个变化值
摄影机移动:通过移动摄影机的x和y,z的空间坐标值,从而让视角产生不同的变化。
代码清单: package { import flash.events.Event; import flash.events.MouseEvent; import flash.display.*; import flash.net.*; import flash.geom.*; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.view.BasicView; import org.papervision3d.materials.BitmapMaterial; public class Main extends BasicView { private var grid:DisplayObject3D; private var shapeList:Array=[]; private var image_width:Number = 0;//一张图片宽度 private var image_height:Number = 0;//一张图片宽度 private var easeOut:Number = 0.3; private var reachX:Number = 0.5; private var reachY:Number = 0.5; private var reachZ:Number = 0.05; public function Main() { stage.frameRate = 40; init(); startRendering(); } private function init():void { this.camera.z=500; grid = new DisplayObject3D(); scene.addChild(grid); loadImage("1.jpg"); } //加载图片 private function loadImage(url:String):void { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.CO MPLETE,onLoadImageComplete); loader.load(new URLRequest(url)); } private function onLoadImageComplete(event:Event):void { event.currentTarget.removeEventListener(Event.COMP LETE,onLoadImageComplete); var bitmapData:BitmapData = Bitmap(event.currentTarget.content).bitmapData; creatSprite(bitmapData,24,"x"); bitmapData.dispose(); } //创建一组图形 private function creatSprite(bitmapData:BitmapData,n:int,direction: String="x"):void { var width:Number; var height:Number; if (direction == "x") { width = bitmapData.width / n;//图片宽度 height = bitmapData.height; image_width = width; } if (direction == "y") { width = bitmapData.width;//图片宽度 height = bitmapData.height / n; image_height = height; } for (var i:int=0; i<n; i++) { var bmpData:BitmapData = new BitmapData(width,height); var tempX:Number = direction == "x" ? width:0; var tempY:Number = direction == "x" ? 0:height; bmpData.copyPixels(bitmapData,new Rectangle(i*tempX,i*tempY,width,height),new Point(0,0)); var material:BitmapMaterial=new BitmapMaterial(bmpData);//位图材质 material.oneSide=false; var plane:Plane=new Plane(material,width,height); grid.addChild(plane); shapeList.push(plane); } render(shapeList,image_width); } //构建这种图 private function render(array:Array,rad:Number):void { var len:int = array.length; var angle:Number = 360 / len; rad = rad * 0.5 / Math.sin(angle * 0.5 * Math.PI / 180);//算出半径 for (var i:int=0; i<len; i++) { array[i].x = Math.cos(i * angle * Math.PI / 180) * rad; array[i].z = Math.sin(i * angle * Math.PI / 180) * rad; array[i].rotationY = - i * angle + 270;//偏移角度 } } override protected function onRenderTick(e:Event=null):void { //距离检测 var xDist:Number = mouseX - stage.stageWidth * 0.5; var yDist:Number = mouseY - stage.stageHeight * 0.5; //给摄影机添加缓冲效果 camera.x += (xDist - camera.x * reachX) * easeOut; camera.y += (yDist- camera.y * reachY) * easeOut; camera.z += (-mouseY * 2 - camera.z ) * reachZ; super.onRenderTick();//渲染 } } }
发表评论
-
papervision3d学习笔记:图片墙(4)
2012-01-20 01:47 669papervision3d学习笔记:图片墙(4) 2010年 ... -
《深度探索C++对象模型》读书笔记(3)
2012-01-20 01:47 844《深度探索C++对象模型 ... -
第五章Materials, Lights, and Shading
2012-01-20 01:47 743第五章Materials, Lights, and ... -
Papervision3D Essentials 要点整理
2012-01-20 01:47 956Papervision3D Essentials 要点 ... -
作文批改评语范例
2012-01-19 09:35 707作文批改评语范例 2011 ... -
写作文评语
2012-01-19 09:34 578写作文评语 2011年04月27 ... -
如何给孩子的作文下评语
2012-01-19 09:34 705如何给孩子的作文下评语 2011年07月14日 作文评价 ... -
教学浅谈(254)――作文的评语
2012-01-19 09:34 581教学浅谈(254)――作文 ... -
学生 老师都来看看吧 小学生作文评语集锦
2012-01-19 09:34 779学生 老师都来看看吧 ... -
CPU与主板如何搭配---2(转)
2012-01-17 02:10 908CPU与主板如何搭配---2( ... -
MAX , cad09假激活
2012-01-17 02:10 907MAX , cad09假激活 2010年07月06日 M ... -
总体上说,是c++ builder胜于VC++,DELPHI是最好
2012-01-17 02:09 979总体上说,是c++ builder胜 ... -
Qt 学习笔记 --Qt SDK 的下载安装与配置
2012-01-17 02:09 1171Qt 学习笔记 --Qt SDK 的下 ... -
flex多模块加载时导致对象不正确序列化的解决办法
2012-01-15 21:42 1098flex多模块加载时导致对象不正确序列化的解决办法 2010 ... -
优化Flash平台的性能――优化网络交互外部内容
2012-01-15 21:41 625优化Flash平台的性能――优化网络交互外部内容 2010年 ... -
ApplicationDomain
2012-01-15 21:41 524ApplicationDomain 2010年08月01日 ... -
flex3控件_ModuleLoader
2012-01-15 21:41 571flex3控件_ModuleLoader 2011年07月0 ... -
Flex-LoaderContext applicationDomain 属性详解
2012-01-15 21:41 813Flex-LoaderContext applicationD ...
相关推荐
这是一本papervision 3D入本的好书,详细介绍了papervision 3D的使用
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随行笔记,基础知识
整理了Papervision3d的各方面资料,并且提供一个全景代码案例!
《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引擎做的7个实例源码
Papervision3D_2.1.932.swcPapervision3D_2.1.932.swcPapervision3D_2.1.932.swc
Flash3D引擎 "Papervision3D" 演示 http://www.onemotion.com/flash/spider/
Papervision3D的api,这个帮助文档介绍各种包的使用,有利于快速学习3D
Papervision3D Essentials 中文版 翻译 第一章 docx格式
希望对学习PV3D引擎的人提供点帮助。这是一pv3D的api电子书
Papervision3D Essentials (PV3D)的中文版电子书及 书中实例源码下载 PV3D FLEX 三维渲染必备开源包
一个不错的Flash 3D引擎Papervisio3D,让你的flash从2D转化3D不再是难事.最新版本as3
papervisiion3d sdk,开发环境myeclipse+flex+pv3d
papervision3d 精髓,入门者必备,最新版本