教材提供    Flash8.net 教材区首页 最新教材列表

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

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

第1页 第1页 （1）

第2页 （2）

第3页 （3）

下面的图就是有关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）：
/UploadTeach/200706/20070622123352138.swf

图片附件: 002.gif

源文件： skew3.rar

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

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(-70, -52.5, 70),
new Point(-70, 52.5, 70),
new Point(70, 52.5, 70),
new Point(70, -52.5, 70),
new Point(-70, -52.5, -70),
new Point(-70, 52.5, -70),
new Point(70, 52.5, -70),
new Point(70, -52.5, -70)
];//其实根据三点确定一个平面，不需要这么多点，为了配合图片的大小，我自己算出的3d坐标，你也
可以自己算
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)/2;
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 = 1; i<=4; i++) {
_root.attachMovie("obj"+i, "obj"+i, i);
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;
}
onEnterFrame = function () {
rotation.x -= _ymouse/5000;
rotation.y += _xmouse/5000;
points2D = Transform3DPointsTo2DPoints(points3D, rotation);
skewObj(obj1, W1, H1, points2D[1], points2D[0], points2D[2]);
skewObj(obj2, W2, H2, points2D[2], points2D[3], points2D[6]);
skewObj(obj3, W3, H3, points2D[6], points2D[7], points2D[5]);
skewObj(obj4, W4, H4, points2D[5], points2D[4], points2D[1]);
};
(3d贴图1.swf)：
/UploadTeach/200706/20070622123539259.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)

/UploadTeach/200706/20070622123907314.swf

1

2

3

责任编辑:silvia    时间:2007年6月22日

上一篇:

FLASH网游通过XMLSocket与VB后台通信教

下一篇:

FLASH内部复制粘贴图形

相关教材

玩转Flash AS 3D之贴图篇

最近更新

查看所有评论