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; } } }