一: 方形的图片墙
对3D还是一点也不熟悉,东拿西拿才把这个拼合的图片墙拼起来了,但是涉及到很多细节方面比较多。特别是rotationX rotationY之后的偏移问题,对构建存在一点问题。初步有一种想法,是讲将下面的图形拼成一堵墙。通过flash本身的对xyz轴偏转,构成一堵墙。
如果每一张图片注册点位置都是中心点的。那么通过rotationX 偏转之后,在拼合之后会有一些差异,因此在对周边的进行位置偏移 迫使在rotationX 和rotationY的时候 会让他们看起来是拼合的盒子一样。
效果图如下:
存在的问题和缺陷:
在旋转的位置的时候,不在中心区域,过多的判断语句。
下一步需要进行改造。
二: 圆的图片墙
如果涉及到圆形的图片墙,那么方法会更加简单的,在计算分布坐标的时候,需要通过圆周平均办法来求出每一图的角度。这样再配置坐标旋转。在之前其实已经做过相关的事情,但是当时求出方法不是这种,而有一种比较可靠的办法就是通过求出圆的切线办法来算出
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;
}
三:螺旋图片墙
通过另外一种分布形式,螺旋效果依旧很容易就出来了。
其中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;
}
方法是一致的。
其中螺旋分布当中,用到的知识是圆柱形的几何方面。有兴趣可以借助他来实现更多的功能。由于交互还没有实现因此只是一种笔记记录。
四:圆柱墙
修改代码之后,可以演化成一种圆柱形的形状。所依据的原理是采用圆的分布进行。
五:平面墙
采用矩阵分布的方式对图片进行组合。
采用的方式是:
photo.x=i%6*photo.width;
photo.z= int(i/6)*photo.height;
这样的组合方式。会很有用的。
六:圆环墙
在圆的基础上加以变化,关键地方在于对视角控制。写半径的地方,需要一个大的半径让人看不到,屏幕的时候看起来就看到圆环的一半,其实还是圆环拼合的图案,因此设置视角变化的时候,改一小小地方就可以。今天才发现当中还是有很多细节可以变化