HTML5 3D衣服搖擺動畫特效_html5教學技巧-H5教程-PHP中文網

這又是一款基於HTML5 Canvas的3D動畫傑作，它是一個可以隨風飄動的3D衣服搖擺動畫特效，非常逼真。當我們將老鼠滑過衣服時，衣服將會出現搖擺的動畫，點擊滑鼠時，衣服將會更加劇烈地擺動。

線上展示 原始碼下載

HTML程式碼

XML/HTML Code複製內容到剪貼簿

div style=style=style=
> canvas id=id==> width="480" >"300">
canvas> p>"3D on 2D Canvas" demo"3D on 2D Canvas" demop
p>move cursor to 🎜>p>
div>

P3D庫JS程式碼，主要用來處理3D效果的

JavaScript Code複製內容到剪貼簿

window.P3D = {
紋理： null、
g： null
}；
P3D.clear = 函數(f, w, h) {
var g = 這.g; 這個
.g； g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = 函數(a,b){回傳 a-b;
P3D.drawTriangle = 函數(poss, uvs, shade_clr) {
var w = 這.
var h = 這.texture.height; >這個.texture.height;

var g = 這.g; 這個
.g；
var vAd = [ poss[1].x - poss[0].x , poss[1].y - posy ;
var vBd = [ poss[2].x - poss[0].x , poss[2].y -骨].y ;
var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].u , uvs[1].v - ;
var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].u , uvs[2].v - s[0]. ;
vA[0] *= w;
vA[1] *= h；
vB[0] *= w;
vB[1] *= h;
var m = 新
新
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
im = m.getInvert(); 如果 (!im) 返回
;
a = im._11 * vAd[0] im._12 * vBd[0]; var
var c = im._11 * vAd[1] im._12 * vBd[1];
var d = im._21 * vAd[1] im._22 * vBd[1];
wu = uvs[0].u * w;
hv = uvs[0].v * h;
du = wu * a hv * b;
dv = wu * c hv * d;
g.save();
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.clip();
g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
// 邊界
var bx = [wu, wu vA[0], wu vB[0]];
var by = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bh = by[2] - by[0];
if ((bx[0] bw)
if ((by[0] bh)
if (bx[0] >= 1) {bx[0]--; 體重;}
如果 (by[0] >= 1) {by[0]--; bh ;}
g.drawImage(這個.texture, bx[0], by[0], bw, bh, bx[0], 由[0], bw、bh)；
若 (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
g.restore();
回傳 true;
}
P3D.drawTestByIndexBuffer = (pos_buf, ix_buf, 清晰除) {
var g = 這.g; 這個.g；
如果 ((ix_buf.length%3) != 0)
推「索引藍牙長度表！」;
var len = ix_buf.length/3;
var i、 ibase、 vbase；
var poss = [{},{},{}];
g.linesWidth = 1;
對於 (i = 0, ibase = 0;i
{
vbase = ix_buf[ibase ]
poss[0].x = pos_buf[vbase ];
poss[0].y = pos_buf[vbase ];
vbase = ix_buf[ibase ]
poss[1].x = pos_buf[vbase ];
poss[1].y = pos_buf[vbase ];
vbase = ix_buf[ibase ]
poss[2].x = pos_buf[vbase ];
poss[2].y = pos_buf[vbase ];
//叉積的 z 數量
var Ax = poss[1].x - poss[0].x；
var Ay = poss[1].y - poss[0].y；
var Cx = poss[2].x - poss[1].x；
var Cy = poss[2].y - poss[1].y；
var 剔除 = ( (((Ax * Cy) - (Ay * Cx))*剔除時);
g.beginPath();
g.linesStyle = 清晰除？ g.moveTo(poss[0].x, poss[0].y); g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.lineTo(poss[0].x, poss[0].y);
g.中風();
}
}
P3D.drawByIndexBuffer =
函數(pos_buf, ix_buf, tx_buf culling, z_clip)>
var w， h；
var color_polygon = !這
.texture; if (這
.texture) { .texture) { w = 這
h = 這
}
var g = 這.g; 這個
.g； var m = 新
新
（！剔除）剔除= 0;
((ix_buf.length%3) != 0) 拋出
;
var
i, ibase, vbase, tbase, poss = [{},{},{}]; var len = ix_buf.length/3;
var uv_0u、 uv_0v、 uv_1u、 uv_1v、 uv_2u、 uv_2v;
對於 (i = 0, ibase = 0;i
{
tbase = ix_buf[ibase ]
vbase = tbase
poss[0].x = pos_buf[vbase ]; uv_0u = tx_buf[tbase];
poss[0].y = pos_buf[vbase ]; uv_0v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] ;}
tbase = ix_buf[ibase ]
vbase = tbase
poss[1].x = pos_buf[vbase ]; uv_1u = tx_buf[tbase];
poss[1].y = pos_buf[vbase ]; uv_1v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] ;}
tbase = ix_buf[ibase ]
vbase = tbase
poss[2].x = pos_buf[vbase ]; uv_2u = tx_buf[tbase];
poss[2].y = pos_buf[vbase ]; uv_2v = tx_buf[tbase];
(z_clip && (pos_buf[vbase] ;}
var vAd = [ poss[1].x - poss[0].x , poss[1].y ;
var vBd = [ poss[2].x - poss[0].x , poss[2].. ;
var vCd = [ poss[2].x - poss[1].x , poss[2].y ;
//叉積的 z 分量
if( (((vAd[0] * vCd[1]) - (vAd[1] * vC剔除[0]))*) ; 0)
繼續;
若 (color_polygon) {
g.fillStyle = uv_0u;
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.fill();
繼續;
}
var vA = [ uv_1u - uv_0u , uv_1v - uv_0u - uv_0u , uv_1v -
var vB = [ uv_2u - uv_0u , uv_2v - uv_2u - uv_0u , uv_2v - uv_00v
vA[0] *= w;
vA[1] *= h；
vB[0] *= w;
vB[1] *= h;
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
im = m.getInvert();
(!im) { 繼續;}}
var a = im._11 * vAd[0] im._12 * vBd* vAd[0] im._12 * vBd[0];
var b = im._21 * vAd[0] im._22 * vBd* vAd[0] im._22 * vBd[0];
var c = im._11 * vAd[1] im._12 * vBd[1];
var d = im._21 * vAd[1] im._22 * vBd[1];
var wu = uv_0u * w;
var hv = uv_0v * h;
var du = wu * a hv * b;
var dv = wu * c hv * d;
g.save();
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.clip();
g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
var bx = [wu, wu vA[0], wu vB[0]];
var by = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var 胸集 = by[2] - by[0];
if ((bx[0] bw)
如果 ((by[0] 好)
if (bx[0] >= 1) {bx[0]--; 體重；}
如果 (by[0] >= 1) {by[0]--; 胸集 ;}
g.drawImage(
使用.texture, bx[0], by[0], bw, bh, bx[0], by[0], 能部、電梯）；
/*
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
*/
g.restore();
}
}
函數 Vec3(_x, _y, _z)
{
這.x = _x || 0;
這.y = _y || 0;
這個.z = _z || 0;
}
Vec3.prototype = {
零：函數() {
這個.x = 這個.z = 0; }、
子：
(v) {
.x -= v.x;
.y -= v.y;
.z -= v.z;
這; }、
新增：
函數(v) {
這.x = v.x;
這.y = v.y;
這.z = v.z;
回這;
函數(v) {
這.x = v.x；
這.y = v.y;
這.z = v.z；
回這;
}、
範數：函數() {
返回 Math.sqrt(這個.x*這個.x 這個.y*這.y 這個.y 這個. *這.z);
},
標準化：函數() {
var nrm = Math.sqrt(這個.x >.x 這個.y*這.y 這個.y 這個.y 這個. .z*這.z);
若 (nrm != 0)
{
這.x /= nrm;
這.y /= nrm;
這.z /= nrm;
}
回這;
smul: 函數
這
這
這
回這
}、
dpWith: 函數
(v) { 回這.x*v.x 這個.x*v.x >這個這個。 y*v.y
.z*v.z；
}、
cp:
(v, w) {
.x = (w.y * v.z) - (w.z * v.y); v.z) - (w.z * v.y); v.z) - (w.z * v.y); 這個

這個

.z = (w.x * v.y) - (w.y * v.x); v.y) - (w.y * v.x); v.y) - (w.y * v.x);

回這;

}、

toString: 函數() {

回來這個.x 這個.x .x 🎜>這個.y "," 這個

> }

}

函數 M44(cpy)

{

若 (cpy)

這.copyFrom(cpy);

其他 {

這.ident();

}

M44.prototype = {

ident: 函數() {

這個._12 = 這個._135> >._14 = 0;

這個

._21 = 這._24 = 0; 這個._31 =

這._34 = 0; 這個._41 = 這._42 = >._43 = 0;

這._11 = 這._22 = 這個

._22 = >._33 = 這

._44 = 1；回這;

copyFrom: 函數(m) {

這._11 = m._11;

這._12 = m._12;

這._13 = m._13;

這._14 = m._14;

這._21 = m._21;

這._22 = m._22;

這._23 = m._23;

這._24 = m._24;

這._31 = m._31;

這._32 = m._32;

這._33 = m._33;

這._34 = m._34；

這._41 = m._41；

這._42 = m._42;

這._43 = m._43；

這._44 = m._44；

回這;

}、

transVec3: 函數(out, x, y, z) {

out[0] = x * 這._11 y * ._11 y * 這這個

._31

這個

._41；

out[1] = x * 這._12 y * 。這個._32 這個._42； out[2] = x *
這個._13 y * 。這個._33 這個._43； out[3] = x * 這
。這個._34 這個._44； },
transVec3Rot：函數(out, x, y, z) {
out[0] = x * 這._11 y * ._11 y * 這這._31；
out[1] = x * 這._12 y * 。這._32； out[2] = x *
._13 y * 。這._33； }、
視角LH：
函數(vw, vh, z_near, z_far) {
這._11 = 2.0*z_near/vw;
這._12 = 0;
這._13 = 0;
這._14 = 0;
這._21 = 0;
這._22 = 2*z_near/vh;
這._23 = 0;
這._24 = 0;
這._31 = 0;
這._32 = 0;
這._33 = z_far/(z_far-z_near);
這._34 = 1；
這._41 = 0;
這._42 = 0;
這._43 = z_near*z_far/(z_near-z_far);
這
回
這; },
lookAtLH：函數(aUp, aFrom, aAt) {
var aX = new Vec3(); 🎜>new
var aY = new Vec3(); 🎜>new
var aZ = 新 aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
這._11 = aX.x；這這個._13 = aZ.x；這._14 = 0； ._14 = 0；
這._21 = aX.y; 這. 🎜>這個._23 = aZ.y；這._24 = 0;
這._31 = aX.z; 這. 🎜>這個._33 = aZ.z；這._34 = 0；
._34 = 0；
這
._41 = -aFrom.dpWith(aX); 這
._42 = -aFrom.dpWith(aY); 這
._43 = -aFrom.dpWith(aZ); 這
._44 = 1；
回來這個
; ; },
mul: 函數(A, B) {
這._11 = A._11*B._11 A._12*B._21 ;
這個._12 = A._11*B._12 A._12*B._2222222 ;
這._13 = A._11*B._13 A._ ;
這個._14 = A._11*B._14 A._ ;
這個._21 = A._21*B._11 A._22*B._21 21 ;
這._22 = A._21*B._12 A._ ;
這個._23 = A._21*B._13 A._ ;
這個._24 = A._21*B._14 A._ ;
這個._31 = A._31*B._11 A._32*B._21 3. ;
這個._32 = A._31*B._12 A._32*B._222222 ;
這個._33 = A._31*B._13 A._32*B._231*B._13 A._32*B._231*B._13 A._32*B._231*B._13 A._32*B._2331*B._13 A._32*B._23,321_31.A. ;
這個._34 = A._31*B._14 A._32*B._24)14 ;
這個._41 = A._41*B._11 A._42*B._21 41.A. ;
這個._42 = A._41*B._12 A._ ;
這個._43 = A._41*B._13 A._ ;
這個._44 = A._41*B._14 A._ ;
回這;
},
翻譯：函數(x, y, z) {
這._11 = 1; 這. 🎜>._13 = 0; 這._14 = 0；
._21 = 0; ._23 = 0; 這._24 = 0; 這._31 = 0；這._32 = 0； 🎜>
這._34 = 0; 這._41 = x；這個._🎜>
這
回這; }、
transpose33: 函數() {
var
t;
t = 這
._12; 這個
._12 = 這
._21；這._21 = t;
t = 這._13;
這個._13 =
這個._31；
這._31 = t;
t = 這._23;
這._23 = 這
._32；
這._32 = t;
回這;
},
// OpenGL style rotation
glRotate: function(angle, x, y, z) {
var s = Math.sin( angle );
var c = Math.cos( angle );
var xx = x * x;
var yy = y * y;
var zz = z * z;
var xy = x * y;
var yz = y * z;
var zx = z * x;
var xs = x * s;
var ys = y * s;
var zs = z * s;
var one_c = 1.0 - c;
/*
this._11 = (one_c * xx) c;
this._21 = (one_c * xy) - zs;
this._31 = (one_c * zx) ys;
this._41 = 0;
this._12 = (one_c * xy) zs;
this._22 = (one_c * yy) c;
this._32 = (one_c * yz) - xs;
this._42 = 0;
this._13 = (one_c * zx) - ys;
this._23 = (one_c * yz) xs;
this._33 = (one_c * zz) c;
this._43 = 0;