flash 与3D笔记:图片墙(1)

一: 方形的图片墙     

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

flash 与3D笔记:图片墙(1)_第1张图片

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

 flash 与3D笔记:图片墙(1)_第2张图片

效果图如下:

flash 与3D笔记:图片墙(1)_第3张图片

存在的问题和缺陷:

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

下一步需要进行改造。

二: 圆的图片墙

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

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

flash 与3D笔记:图片墙(1)_第4张图片

 三:螺旋图片墙

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

flash 与3D笔记:图片墙(1)_第5张图片

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

 方法是一致的。

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

四:圆柱墙

flash 与3D笔记:图片墙(1)_第6张图片

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

五:平面墙

flash 与3D笔记:图片墙(1)_第7张图片

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

采用的方式是:

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

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

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

 六:圆环墙

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

flash 与3D笔记:图片墙(1)_第8张图片

你可能感兴趣的:(Flash)