[转]　玩转Flash AS 3D之贴图篇

最新推荐文章于 2022-12-17 11:38:59 发布

octverve

最新推荐文章于 2022-12-17 11:38:59 发布

阅读量1.1k

点赞数

分类专栏： FLASH 文章标签： flash distance function 图形加密引擎

FLASH 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

玩转Flash AS 3D之贴图篇（1）

作者：tiger_0309 类型:原创来源:闪吧

　　在之前我发过一篇名为玩转flash as 3d的贴子，那时候之所以用“玩转”的字眼，是因为我当时觉得我对flash 3d掌握的很精通了，可是在后来的学习中却发现自己只不过是懂点皮毛罢了，或者可以说连皮毛也还不够，在玩转flash as 3d中我主要介绍了从3d坐标到2d坐标的转换，并且结合flash的画图方法做的一些旋转的例子，关于这方面的例子网上也不少，只不过没有更系统的把它组织和整理出来，而我做的可能就是这方面的工作罢了。
flash是个二维软件，所以它所做的都是假3d,这一点大家必须要认识到，但是从后来的发展，越来越多的人尝试着用它来做一些3d的东西来，假的也越来越来真起来，时下最有名的俩个flash 3d引擎，sandy和papervision3d就是很好的例子，尤其是后者更为突出，并且已经有了as3。
如果说到3d,而不涉及到贴图和光源的话就不能说是3d,在次我将对flash 3d贴图做一个比较“基础”和“系统”的讲解，之所以上引号是到时候有人觉得我讲解的不够系统或者基础，我好有台阶可下，以下我讲的理论并不是我的原创，大部分来自网上。
好了言归正转，在阅读此文章之前我强烈推荐先看看我的第一篇文章，因为我对一些坐标转化之类的不在介绍了。 http://space.flash8.net/bbs/viewthread.php?tid=323970&highlight=
说到如何贴图，其实就是如何动态地skew一个影片剪辑，skew的汉语意思是歪斜.扭曲和变形，我无法用一个词语来代替它，所以就用了一个英文，先看下面的一个简单例子，做一个嵌套的影片剪辑，然后改变父影片剪辑的_yscale,在旋转子影片剪辑就可以。效果：（skew1.swf）

源文件：

skew1.rar

再看下一个例子，做一个嵌套的影片剪辑，父级叫parent,子级叫son,把子级旋转45度，再做几个按钮，在按钮中加入代码来控制父影片剪辑的_yscale和子影片剪辑的_yscale和_xscale,其中的图片大小我们先用100*100，就是正方形。效果：（skew2.swf）

下面的图就是有关skew的数学解释，不过说实话我虽然会应用它，但是对它的数学解释不是太懂，不过我觉得没有必要把它弄的多透彻，只要知道它是怎么来的就。可以了有兴趣的可以自己研究一下，研究出来别忘了告诉我一声。

图片附件: 001.gif

那么我就直接介绍这个函数了，如图：

function skewObj (obj, mcW, mcH, pt0, ptH, ptW) {
    function distance (pt1, pt2) {
        var dy = pt2.y-pt1.y;
        var dx = pt2.x-pt1.x;
        var side = Math.sqrt(dy*dy+dx*dx);
        return side;
    }
    obj._x = pt0.x;//obj是父级影片剪辑
    obj._y = pt0.y;
    obj._yscale = 100;
    var angleP2 = Math.atan2(ptW.y-pt0.y, ptW.x-pt0.x);
    var angleP1 = Math.atan2(ptH.y-pt0.y, ptH.x-pt0.x);
    var dAngle = (angleP1-angleP2)/2;
    var arm = Math.sqrt(2)/2/Math.cos(dAngle);
        // original a 100x100 model , now use 1x1 model
    obj._rotation = (180/Math.PI)*(angleP1-dAngle);
    obj.mc._rotation = -45;//mc是子影片剪辑
    obj._yscale = 100*Math.tan(dAngle);
    obj.mc._xscale = distance(ptW, pt0)*100/arm/mcW;
    obj.mc._yscale = distance(ptH, pt0)*100/arm/mcH;
}

其中pt0, ptH, ptW就是上图的三点，为什么只要三点，因为学过数学的都知道，三点可以确定一个平面，先做一个小小的应用，如下面的例子（skew3.swf）：

图片附件: 002.gif

源文件：

skew3.rar

有了以上的基础我们来做第一个3d贴图，代码如下：

(3d贴图1.swf)：

这是单面贴图，我们可以再在上面加上一个以前用过的函数就可以实现双面贴图，就是在上面skewObj(obj, mcW, mcH, pt0, ptH, ptW)函数中加入以下代码就行了。

if (isVisibleBetween(pt0, ptH, ptW)){
  if (obj.mc._currentframe != 2) obj.mc.gotoAndStop(2); // frame 1 for front

}else{
  if (obj.mc._currentframe != 1) obj.mc.gotoAndStop(1); // frame 2 for back


}

isVisibleBetween(pt0, ptH, ptW)这个函数我以前讲过，是根据平面任意三点的坐标可以计算出该平面是否可见，这个函数如下：

isVisibleBetween = function(a,b,c){
if (((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0)^(a.x<=b.x == a.x>c.x)){
return true;
}else{
return false;
}
};

最后你还要在每个影片剪辑加上一帧，换上你想要的背面图片就可以了，如下：(3d贴图2.swf)

所有的立体图形贴图都是由一小块的正方形或者三角形组成，比如圆柱体，我们可以把它看成许多块矩形组成的，我下面的例子就是一个简单的圆柱体，不过我只是用了十个矩形组成的，要让它更逼真可以把它分割成更多的矩形，这里我还要提醒一点，分的越多，你的cpu负担就越重，有人说这是flash做3d的缺点，认为其它专门的3d软件就不会有这中现象，其实我认为不然，3d软件在渲染的时候占用cpu更大，只不过导出图象序列后就不占用cpu，可是那是静态图象，而flash只所以占用cpu大，是因为它把这渲染和输出合二为一了。
代码：

Point = function (x, y, z) {
this.x = x;
this.y = y;
this.z = z;
};
Transform3DPointsTo2DPoints = function (pts, angles) {
var tps = new Array();
var sx = Math.sin(angles.x);
var cx = Math.cos(angles.x);
var sy = Math.sin(angles.y);
var cy = Math.cos(angles.y);
var sz = Math.sin(angles.z);
var cz = Math.cos(angles.z);
var p, xy, xz, yx, yz, zx, zy;
var i = pts.length;
while (i--) {
  p = pts;
  xy = cx*p.y-sx*p.z;
  xz = sx*p.y+cx*p.z;
  yz = cy*xz-sy*p.x;
  yx = sy*xz+cy*p.x;
  zx = cz*yx-sz*xy;
  zy = sz*yx+cz*xy;
  x=275+zx;
  y=200-zy;
  z=yz;
  tps = new Point(x, y, z);
}
return tps;
};
var points3D = [
new Point(100*Math.cos(2*Math.PI/10*0), 100, 100*Math.sin(2*Math.PI/10*0)),
new Point(100*Math.cos(2*Math.PI/10*1), 100, 100*Math.sin(2*Math.PI/10*1)),
new Point(100*Math.cos(2*Math.PI/10*2), 100, 100*Math.sin(2*Math.PI/10*2)),
new Point(100*Math.cos(2*Math.PI/10*3), 100, 100*Math.sin(2*Math.PI/10*3)),
new Point(100*Math.cos(2*Math.PI/10*4), 100, 100*Math.sin(2*Math.PI/10*4)),
new Point(100*Math.cos(2*Math.PI/10*5), 100, 100*Math.sin(2*Math.PI/10*5)),
new Point(100*Math.cos(2*Math.PI/10*6), 100, 100*Math.sin(2*Math.PI/10*6)),
new Point(100*Math.cos(2*Math.PI/10*7), 100, 100*Math.sin(2*Math.PI/10*7)),
new Point(100*Math.cos(2*Math.PI/10*8), 100, 100*Math.sin(2*Math.PI/10*8)),
new Point(100*Math.cos(2*Math.PI/10*9), 100, 100*Math.sin(2*Math.PI/10*9)),
new Point(100*Math.cos(2*Math.PI/10*0), -100, 100*Math.sin(2*Math.PI/10*0)),
new Point(100*Math.cos(2*Math.PI/10*1), -100, 100*Math.sin(2*Math.PI/10*1)),
new Point(100*Math.cos(2*Math.PI/10*2), -100, 100*Math.sin(2*Math.PI/10*2)),
new Point(100*Math.cos(2*Math.PI/10*3), -100, 100*Math.sin(2*Math.PI/10*3)),
new Point(100*Math.cos(2*Math.PI/10*4), -100, 100*Math.sin(2*Math.PI/10*4)),
new Point(100*Math.cos(2*Math.PI/10*5), -100, 100*Math.sin(2*Math.PI/10*5)),
new Point(100*Math.cos(2*Math.PI/10*6), -100, 100*Math.sin(2*Math.PI/10*6)),
new Point(100*Math.cos(2*Math.PI/10*7), -100, 100*Math.sin(2*Math.PI/10*7)),
new Point(100*Math.cos(2*Math.PI/10*8), -100, 100*Math.sin(2*Math.PI/10*8)),
new Point(100*Math.cos(2*Math.PI/10*9), -100, 100*Math.sin(2*Math.PI/10*9))
];

var points2D = new Array();
var rotation = new Point(0, 0, 0);
function skewObj(obj, mcW, mcH, pt0, ptH, ptW) {
function distance(pt1, pt2) {
  var dy = pt2.y-pt1.y;
  var dx = pt2.x-pt1.x;
  var side = Math.sqrt(dy*dy+dx*dx);
  return side;
}
var z=(ptH.z+ptW.z+pt0.z)/3;
obj.swapDepths(Math.round(10000+z*100));
obj._x = pt0.x;
obj._y = pt0.y;
obj._yscale = 100;
var angleP2 = Math.atan2(ptW.y-pt0.y, ptW.x-pt0.x);
var angleP1 = Math.atan2(ptH.y-pt0.y, ptH.x-pt0.x);
var dAngle = (angleP1-angleP2)/2;
var arm = Math.sqrt(2)/2/Math.cos(dAngle);
// original a 100x100 model , now use 1x1 model
obj._rotation = (180/Math.PI)*(angleP1-dAngle);
obj.mc._rotation = -45;
obj._yscale = 100*Math.tan(dAngle);
obj.mc._xscale = distance(ptW, pt0)*100/arm/mcW;
obj.mc._yscale = distance(ptH, pt0)*100/arm/mcH;
}
for(var i=0;i<10;i++){

_root.attachMovie("obj"+(i+1),"obj"+(i+1),i+1);

  H1 = obj1.mc._height;
W1 = obj1.mc._width;
H2 = obj2.mc._height;
W2 = obj2.mc._width;
H3 = obj3.mc._height;
W3 = obj3.mc._width;
H4 = obj4.mc._height;
W4 = obj4.mc._width;
H5 = obj5.mc._height;
W5 = obj5.mc._width;
H6 = obj6.mc._height;
W6 = obj6.mc._width;
H7 = obj7.mc._height;
W7 = obj7.mc._width;
H8 = obj8.mc._height;
W8 = obj8.mc._width;
H9 = obj9.mc._height;
W9 = obj9.mc._width;
H10 = obj10.mc._height;
W10 = obj10.mc._width;

}
onEnterFrame = function () {
rotation.x -= _ymouse/5000;
rotation.y += _xmouse/5000;
points2D = Transform3DPointsTo2DPoints(points3D, rotation);
skewObj(obj1, W1, H1, points2D[0], points2D[10], points2D[1]);
skewObj(obj2, W2, H2, points2D[1], points2D[11], points2D[2]);
skewObj(obj3, W3, H3, points2D[2], points2D[12], points2D[3]);
skewObj(obj4, W4, H4, points2D[3], points2D[13], points2D[4]);
skewObj(obj5, W5, H5, points2D[4], points2D[14], points2D[5]);
skewObj(obj6, W6, H6, points2D[5], points2D[15], points2D[6]);
skewObj(obj7, W7, H7, points2D[6], points2D[16], points2D[7]);
skewObj(obj8, W8, H8, points2D[7], points2D[17], points2D[8]);
skewObj(obj9, W9, H9, points2D[8], points2D[18], points2D[9]);
skewObj(obj10, W10, H10, points2D[9], points2D[19], points2D[0]);

};

(3d贴图3.swf):

光有矩形贴图还不够，有时候还需要三角形，三角形的原理也来自矩形，如下图，我们把矩形也看成正方形，通过给出的三角形pH的坐标可以算出ptH的坐标，

function getPH(pt0,pH,ptW){
    var pt=new Object();
    pt.x=pH.x-(ptW.x-pt0.x)/2;
    pt.y=pH.y-(ptW.y-pt0.y)/2
  pt.z=pH.z-(ptW.z-pt0.z)/2;
    return pt;
}

//这个函数不用解释也能看懂吧
那么上面的函数就变成这样了：
skewObj(clip, 100, 100, rp0, getPH(rp0,rpH,rpW), rpW);
其中100我是按照正方形来计算的，如果你不是用的正方形，那么应该是这样了
skewObj(clip, mcW, mcH, rp0, getPH(rp0,rpH,rpW), rpW);
mcW和mcH分别是矩形的长和宽
这是四面体的三维坐标：
pointsArray = [
new Point(-50, 29, 29),
new Point(0, 29, -58),
new Point(50, 29, 29),
new Point(0, -58, 0)];
具体的原代码我就不给了，大家只需把坐标和上面的函数换一下就好了，如果实在做不出，把我的swf反编译也行，所有的文件都没有加密。(3d贴图4.swf):

图片附件: 003. gif

然后我们再看看上面的哪个圆柱体，给它加个盖和底，说到这里我有要提一下闪客帝国有名的哪个3d易拉罐，当时看的时候怎么也看不懂，并且原文件加密了，现在再想想其实也不难，它只不过把它分割成一个个的三角形而已。(3d贴图5.swf):

写到这里理论上我们可以给任意的立体图形贴图了，只要你有耐心，你的配置足够高（主要是cpu).
回顾上面的例子，不知道你注意到没有，所有的贴图还有个致命的缺陷，就是做出来的三维图形不是真正意义上的透视图形，为什么呢？那是因为在flash8之前还不能操作位图，所有的坐标都没有进行透视处理，你可以试一下坐标透视处理后会出现下面状况，把上面坐标转化函数改成这样：

     scaleFactor = focalLength/(focalLength+yz);
        x = zx*scaleFactor;
        y = zy*scaleFactor;
        z = yz;

不过庆幸的是在flash8中我们可以做到真正的透视3d了，最后的一个例子我就是用flash8做的，你可以和上面的比较一下，看有什么不同，在这个原文件我应用了ditortimage类，老外写的类，很不错。(3d贴图6.swf):

octverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]　玩转Flash AS 3D之贴图篇

玩转Flash AS 3D之贴图篇（1）作者：tiger_0309 类型:原创来源:闪吧　　在之前我发过一篇名为玩转flash as 3d的贴子，那时候之所以用“玩转”的字眼，是因为我当时觉得我对flash 3d掌握的很精通了，可是在后来的学习中却发现自己只不过是懂点皮毛罢了，或者可以说连皮毛也还不够，在玩转flash as 3d中我主要介绍了从3d坐标到2d坐标的
复制链接

扫一扫