flash 与3D笔记：图片墙（1）

一：方形的图片墙

对3D还是一点也不熟悉，东拿西拿才把这个拼合的图片墙拼起来了，但是涉及到很多细节方面比较多。特别是rotationX rotationY之后的偏移问题，对构建存在一点问题。初步有一种想法，是讲将下面的图形拼成一堵墙。通过flash本身的对xyz轴偏转，构成一堵墙。

如果每一张图片注册点位置都是中心点的。那么通过rotationX 偏转之后，在拼合之后会有一些差异，因此在对周边的进行位置偏移迫使在rotationX 和rotationY的时候会让他们看起来是拼合的盒子一样。

效果图如下：

//3d 容器类，用于z轴处理 package { import flash.display.*; import flash.geom.*; public class DisplayContainer3D extends Sprite { private var list:Array=[]; public function DisplayContainer3D () { } public function addList(obj:*):void { list.push(obj) } public function sortZ():void { list.sort(depthSort) for (var i:int=0; i<list.length; i++) { var myimage:* = list[i]; this.setChildIndex(myimage,i); } } private function depthSort(objA:DisplayObject,objB:DisplayObject):int { var posA:Vector3D = objA.transform.matrix3D.position; posA = this.transform.matrix3D.deltaTransformVector(posA); var posB:Vector3D = objB.transform.matrix3D.position; posB = this.transform.matrix3D.deltaTransformVector(posB); return posB.z-posA.z; } } }

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.text.TextField; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 6; private var list:Array = []; public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 60;//设置视野角度（0-180之间） addChild(contain); contain.x=stage.stageWidth/2; contain.y=stage.stageHeight/2; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } //通过n*n矩阵进行分布，通过判断来帅选他们是否实例化 private function creatSprite():void { var photo:Sprite; for (var i:int=0; i<n*n; i++) { if (i>n-1 && i<n*(n-1)) { if (i - n * int(i / n) == 0) { photo=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=(i%n)*50-25; photo.z = int(i / n) * 50; contain.addList(photo); photo.rotationY = -90; } if (Math.abs(i - n * int(i / n)) == n - 1) { photo=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=(i%n)*50+25; photo.z = int(i / n) * 50; photo.rotationY = -90; contain.addList(photo); } } else if (i < n) { photo=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=(i%n)*50; photo.z = int(i / n) * 50 + 25; contain.addList(photo); } else if (i>=n*(n-1)) { photo=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=(i%n)*50; photo.z = int(i / n) * 50 - 25; contain.addList(photo); } contain.addChild(photo); } contain.rotationX = 45; } private function Run(event:Event):void { contain.sortZ();//排序 contain.rotationX-=(mouseY-stage.stageWidth/2)*0.01; contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; } } }

存在的问题和缺陷：

在旋转的位置的时候，不在中心区域，过多的判断语句。

下一步需要进行改造。

二：圆的图片墙

如果涉及到圆形的图片墙，那么方法会更加简单的，在计算分布坐标的时候，需要通过圆周平均办法来求出每一图的角度。这样再配置坐标旋转。在之前其实已经做过相关的事情，但是当时求出方法不是这种，而有一种比较可靠的办法就是通过求出圆的切线办法来算出

RotationY 的偏移是多少。

求出切线办法已经做过：

/*求出圆的任意角度切线的倾斜角。如下：
   *
   */
  public function getCircle_K(angle:Number,R:Number=1):Number
  {
   var px:Number=R * Math.cos(angle);
   var py:Number=R * Math.sin(angle);
   var k:Number=- px / py;
   return Math.atan(k) * 180 / Math.PI;
  }

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.text.TextField; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 10;//个数 private var radius:int=200;//半径 public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 60;//设置视野角度（0-180之间） addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } //通过n*n矩阵进行分布，通过判断来帅选他们是否实例化 private function creatSprite():void { var perAngle:Number=2*Math.PI/n; for (var i:int=0; i<n; i++) { var photo:Sprite=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=radius*Math.cos(i*perAngle); photo.z=radius*Math.sin(i*perAngle); photo.rotationY=-getCircle_K(i*perAngle);//偏移 contain.addChild(photo); contain.addList(photo); } contain.rotationX = 45; } private function Run(event:Event):void { contain.sortZ();//排序 contain.rotationX-=(mouseY-stage.stageWidth/2)*0.01; contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; } /*求出圆的任意角度切线的倾斜角 * */ public function getCircle_K(angle:Number,R:Number=1):Number { var px:Number=R * Math.cos(angle); var py:Number=R * Math.sin(angle); var k:Number=- px / py; return Math.atan(k) * 180 / Math.PI; } } }

三：螺旋图片墙

通过另外一种分布形式，螺旋效果依旧很容易就出来了。

其中org.summerTree.math.Math2 是自定义的类，是一个管理数学方面类，包括常用切线求出角度。

而在这里封装起来，用于方便调用。与

public function getCircle_K(angle:Number,R:Number=1):Number
  {
   var px:Number=R * Math.cos(angle);
   var py:Number=R * Math.sin(angle);
   var k:Number=- px / py;
   return Math.atan(k) * 180 / Math.PI;
  }

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.text.TextField; import org.summerTree.math.Math2; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 30;//个数 private var radius:int=130;//半径 private var h:int=10; public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 60;//设置视野角度（0-180之间） addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2-100; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } //通过n*n矩阵进行分布，通过判断来帅选他们是否实例化 private function creatSprite():void { var perAngle:Number=2*Math.PI*2/n; for (var i:int=0; i<n; i++) { var photo:Sprite=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=radius*Math.cos(i*perAngle); photo.z=radius*Math.sin(i*perAngle); photo.y=h*i; photo.rotationY=-Math2.getCircle_K(i*perAngle);//偏移 contain.addChild(photo); contain.addList(photo); } contain.rotationY= 90; } private function Run(event:Event):void { contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; contain.sortZ();//排序 } } }

方法是一致的。

其中螺旋分布当中，用到的知识是圆柱形的几何方面。有兴趣可以借助他来实现更多的功能。由于交互还没有实现因此只是一种笔记记录。

四：圆柱墙

修改代码之后，可以演化成一种圆柱形的形状。所依据的原理是采用圆的分布进行。

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.text.TextField; import org.summerTree.math.Math2; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 6;//个数 private var m:int =10; private var radius:int=150;//半径 public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 60;//设置视野角度（0-180之间） addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2-150; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } //通过n*n矩阵进行分布，通过判断来帅选他们是否实例化 private function creatSprite():void { var perAngle:Number=2*Math.PI/m; for (var i:int=0; i<n; i++) { for(var j:int=0;j<m;j++) { var photo:Sprite=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=radius*Math.cos(j*perAngle); photo.z=radius*Math.sin(j*perAngle); photo.y=photo.height*i+10*i; photo.rotationY=-Math2.getCircle_K(j*perAngle);//偏移 contain.addChild(photo); contain.addList(photo); } } contain.rotationY = 90; } private function Run(event:Event):void { contain.sortZ();//排序 //contain.rotationX-=(mouseY-stage.stageWidth/2)*0.01; contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; } } }

五：平面墙

采用矩阵分布的方式对图片进行组合。

采用的方式是：

photo.x=i%6*photo.width;

photo.z= int(i/6)*photo.height;

这样的组合方式。会很有用的。

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 6;//个数 public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 60;//设置视野角度（0-180之间） addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } //采用矩阵分布来进行 private function creatSprite():void { for (var i:int=0; i<24; i++) { var photo:Sprite=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-25,-25,50,50); photo.graphics.endFill(); photo.x=i%6*photo.width; photo.z= int(i/6)*photo.height; photo.rotationX=90; // photo.z=0; contain.addChild(photo); contain.addList(photo); } contain.rotationX = 45; contain.rotationY = 45; } private function Run(event:Event):void { contain.sortZ();//排序 contain.rotationX-=(mouseY-stage.stageWidth/2)*0.01; contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; } } }

六：圆环墙

在圆的基础上加以变化，关键地方在于对视角控制。写半径的地方，需要一个大的半径让人看不到，屏幕的时候看起来就看到圆环的一半，其实还是圆环拼合的图案，因此设置视角变化的时候，改一小小地方就可以。今天才发现当中还是有很多细节可以变化

//图片墙，写于2010年9月19日早上 package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.text.TextField; import org.summerTree.math.Math2; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D();//容器 private var n:int = 100;//个数 private var radius:int = 460;//半径 private var ypos:int = 0;//高度 public function Main() { init(); } private function init():void { this.root.transform.perspectiveProjection.fieldOfView = 80;//设置视野角度（0-180之间） addChild(contain); contain.x = stage.stageWidth / 2; contain.y = stage.stageHeight / 2-200; creatSprite(); addEventListener(Event.ENTER_FRAME,Run); } private function creatSprite():void { var perAngle:Number = 2 * Math.PI*5 / n; for (var i:int=0; i<n; i++) { var photo:Sprite=new Sprite(); photo.graphics.lineStyle(0); photo.graphics.beginFill(0x00ff00); photo.graphics.drawRect(-50,-50,100,100); photo.graphics.endFill(); photo.x = radius * Math.cos(i * perAngle); photo.z = radius * Math.sin(i * perAngle); photo.y = ypos; if((i+1)%20==0) { ypos += photo.height+10;//递增高度 } photo.rotationY = -Math2.getCircle_K(i*perAngle);;//偏移 contain.addChild(photo); contain.addList(photo); } contain.rotationX = 0; } private function Run(event:Event):void { contain.sortZ();//排序 contain.rotationY-=(mouseX-stage.stageHeight/2)*0.01; } } }

flash 与3D笔记：图片墙（1）相关推荐

❤表白❤相册——动态3D图片墙
❤表白❤相册--动态3D图片墙一.前言 1.相册的意义什么答:相册在于记忆.回忆.生活.旅游等的记录,在于可以保留生命中的精彩一瞬间,感动一刹那,让时间永久定格在那一时刻.时间一去不复返,珍藏的记 ...
flash 与分解分解百度MP3图片墙
打开这个百度MP3网站 http://mp3.baidu.com/ 下面可以看到一个flash相关的图片墙,这个图片墙能够显示歌手或者其他活动的信息,是一个实用的flash.flash显示了歌手的信息 ...
flash 与分解：分解百度MP3图片墙
打开这个百度MP3网站 http://mp3.baidu.com/ 下面可以看到一个flash相关的图片墙,这个图片墙能够显示歌手或者其他活动的信息,是一个实用的flash.flash显示了歌手的信息 ...
Flash/Flex学习笔记(51)：3维旋转与透视变换(PerspectiveProjection)
Flash/Flex学习笔记(49):3D基础里已经介绍了3D透视的基本原理,不过如果每次都要利用象该文中那样写一堆代码,估计很多人不喜欢,事实上AS3的DisplayObject类已经内置了z坐标 ...
Flash与3D编程探秘（一）- Flash与3D空间
Flash 和 3D空间第一件事情我想你知道的是,在Flash里,并不存在真正的3D,或者我应该说,Flash CS3并不支持3D绘制.我们所做的是运用Flash里的2D绘制方法去模拟3D绘制,Fl ...
html5图片墙，超炫酷。
html5图片墙,可以跟着鼠标滚动. 一个css文件两个JavaScript文件一个html5文件图片可以自己设置,放在images里 css代码 /* hardware accelatator ...
WPF 实现3维图片墙相关展示效果（凹面墙，凸面墙）
因为需求,需要做3维图片墙的相关展示效果,如凹面墙,凸面墙.由于WPF也不会(会一点C#),3D编程一点也不会,一切从零开始学习,看了<精通Windows3D图形编程>一书和参考了网上相关 ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
3d相册 html 代码_HTML5 3D立体图片相册
插件简介 HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标拖拽从多个角度浏览相册图片,点击图 ...

flash 与3D笔记：图片墙（1）

flash 与3D笔记：图片墙（1）相关推荐

最新文章

热门文章