HTML5 animasi hayunan pakaian 3D kesan khas_html5 kemahiran tutorial-Tutorial H5-php.cn

Ini adalah satu lagi karya animasi 3D berdasarkan HTML5 Canvas Ia adalah kesan khas animasi hayunan pakaian 3D yang boleh berkibar ditiup angin, yang sangat realistik. Apabila kita meluncurkan tetikus ke atas pakaian, pakaian akan mempunyai animasi bergoyang Apabila kita mengklik tetikus, pakaian akan dihayun dengan lebih ganas.

Demo dalam talian Muat turun kod sumber

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan

<div gaya="lebar:500px;margin :10px auto">
<kanvas id="cv" lebar="480" tinggi="300">kanvas>
<p>demo "3D on 2D Canvas"< /p>
<p>gerakkan kursor ke pan / klik untuk mengayun< ;/p>
div>

Kod JS perpustakaan P3D, terutamanya digunakan untuk memproses kesan 3D

Kod JavaScriptSalin kandungan ke papan keratan

tetingkap.P3D = {
tekstur: null,
g: null
};
P3D.clear = fungsi(f, w, h) {
var g = ini.g;
g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = fungsi(a,b){kembali a-b;}
P3D.drawTriangle = fungsi(poss, uvs, shade_clr) {
var w = ini.texture.width;
var h = ini.texture.height;
var g = ini.g;
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ] ;
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ] ;
var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ] ;
var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ] ;
vA[0] *= w;
vA[1] *= h;
vB[0] *= w;
vB[1] *= h;
var m = baharu M22();
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
jika (!im) kembali palsu;
var a = im._11 * vAd[0] im._12 * vBd[0];
var b = im._21 * 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 = uvs[0].u * w;
var hv = uvs[0].v * 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);
// sempadan
var bx = [wu, wu vA[0], wu vB[0]];
var oleh = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
mengikut.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bh = oleh[2] - oleh[0];
jika ((bx[0] bw) <= (w-1)) bw ;
jika ((oleh[0] bh) <= (h-1)) bh ;
jika (bx[0] >= 1) {bx[0]--; bw ;}
jika (oleh[0] >= 1) {oleh[0]--; bh ;}
g.drawImage(ini.tekstur, bx[0], oleh[0], bw, bh, bx[0], oleh[0], bw, bh);
jika (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], oleh[0], bw, bh);
}
g.restore();
kembali benar;
}
P3D.drawTestByIndexBuffer = fungsi(pos_buf, ix_buf, pemusnahan) {
var g = ini.g;
jika ((ix_buf.length%3) != 0)
lontar "panjang penampan indeks tidak sah!";
var len = ix_buf.length/3;
var i, ibase, vbase;
var poss = [{},{},{}];
g.strokeWidth = 1;
untuk (i = 0, ibase = 0;i < len; i)
{
vbase = ix_buf[ibase ] << 2;
poss[0].x = pos_buf[vbase ];
poss[0].y = pos_buf[vbase ];
vbase = ix_buf[ibase ] << 2;
poss[1].x = pos_buf[vbase ];
poss[1].y = pos_buf[vbase ];
vbase = ix_buf[ibase ] << 2;
poss[2].x = pos_buf[vbase ];
poss[2].y = pos_buf[vbase ];
// z komponen produk bersilang < 0 ?
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 cull = ( (((Ax * Cy) - (Ay * Cx))*cull) < 0);
g.beginPath();
g.strokeStyle = cull ? "#592" : "#0f0";
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.stroke();
}
}
P3D.drawByIndexBuffer = fungsi(pos_buf, ix_buf, tx_buf, culling, z_clip) {
var w, h;
var color_polygon = !ini.tekstur;
jika (ini.tekstur) {
w = ini.tekstur.lebar;
h = ini.tekstur.tinggi;
}
var g = ini.g;
var m = baharu M22();
jika (!pemusnahan) pemusnahan = 0;
jika ((ix_buf.length%3) != 0)
lontar "panjang penampan indeks tidak sah!";
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;
untuk (i = 0, ibase = 0;i < len; i)
{
tbase = ix_buf[ibase ] << 1
vbase = tbase << 1;
poss[0].x = pos_buf[vbase ]; uv_0u = tx_buf[tbase ];
poss[0].y = pos_buf[vbase ]; uv_0v = tx_buf[tbase];
jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {ibase = 2; teruskan;}
tbase = ix_buf[ibase ] << 1
vbase = tbase << 1;
poss[1].x = pos_buf[vbase ]; uv_1u = tx_buf[tbase ];
poss[1].y = pos_buf[vbase ]; uv_1v = tx_buf[tbase];
jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) { ibase; teruskan;}
tbase = ix_buf[ibase ] << 1
vbase = tbase << 1;
poss[2].x = pos_buf[vbase ]; uv_2u = tx_buf[tbase ];
poss[2].y = pos_buf[vbase ]; uv_2v = tx_buf[tbase];
jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {teruskan 🎜>;}
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ] ;
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ] ;
var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ] ;
// z komponen produk bersilang < 0 ?
jika( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < ; 0)
teruskan;
jika (warna_poligon) {
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();
teruskan;
}
var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];
var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];
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];
var im = m.getInvert();
jika (!im) { teruskan;}
var a = im._11 * vAd[0] im._12 * vBd[0];
var b = im._21 * 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);
// sempadan
var bx = [wu, wu vA[0], wu vB[0]];
var oleh = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
mengikut.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bra = oleh[2] - oleh[0];
jika ((bx[0] bw) <= (w-1)) bw ;
jika ((oleh[0] coli) <= (h-1)) bra ;
jika (bx[0] >= 1) {bx[0]--; bw ;}
jika (oleh[0] >= 1) {oleh[0]--; coli ;}
g.drawImage(ini.tekstur, bx[0], oleh[0], bw, bh, bx[0], oleh[0], bw, coli);
/*
jika (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], oleh[0], bw, bh);
}
*/
g.restore();
}
}
fungsi Vec3(_x, _y, _z)
{
ini.x = _x || 0;
ini.y = _y || 0;
ini.z = _z || 0;
}
Vec3.prototype = {
sifar: fungsi() {
ini.x = ini.y = ini.z = 0;
},
sub: fungsi(v) {
ini.x -= v.x;
ini.y -= v.y;
ini.z -= v.z;
kembali ini;
},
tambah: fungsi(v) {
ini.x = v.x;
ini.y = v.y;
ini.z = v.z;
kembali ini;
},
salinan Daripada: fungsi(v) {
ini.x = v.x;
ini.y = v.y;
ini.z = v.z;
kembali ini;
},
norma:fungsi() {
kembali Math.sqrt(ini.x*ini.x ini.y*ini.y ini.z *ini.z);
},
normalkan: fungsi() {
var nrm = Math.sqrt(ini.x*ini.x ini.y*ini.y ini .z*ini.z);
jika (nrm != 0)
{
ini.x /= nrm;
ini.y /= nrm;
ini.z /= nrm;
}
kembali ini;
},
smul: fungsi(k) {
ini.x *= k;
ini.y *= k;
ini.z *= k;
kembali ini;
},
dpDengan: fungsi(v) {
kembali ini.x*v.x ini. y*v.y ini.z*v.z;
},
cp: fungsi(v, w) {
ini.x = (w.y * v.z) - (w.z * v.y);
ini.y = (w.z * v.x) - (w.x * v.z);
ini.z = (w.x * v.y) - (w.y * v.x);
kembali ini;
},
kepadaString: fungsi() {
kembali ini.x ", " ini.y "," ini.z;
}
}
fungsi M44(cpy)
{
jika (cpy)
ini.copyFrom(cpy);
lain {
ini.ident();
}
}
M44.prototype = {
ident: fungsi() {
ini._12 = ini._13 = iniini
ini._21 = ini._23 = ini
._24 = 0; ini._31 = ini._32 = ini
iniini._34 = 0; ini._41 = ini
ini
ini._11 = ini._22 = ini
ini
kembali
ini; },
salinan Daripada: fungsi(m) {
ini._11 = m._11;
ini._12 = m._12;
ini._13 = m._13;
ini._14 = m._14;
ini._21 = m._21;
ini._22 = m._22;
ini._23 = m._23;
ini._24 = m._24;
ini._31 = m._31;
ini._32 = m._32;
ini._33 = m._33;
ini._34 = m._34;
ini._41 = m._41;
ini._42 = m._42;
ini._43 = m._43;
ini._44 = m._44;
kembali ini;
},
transVec3: fungsi(keluar, x, y, z) {
keluar[0] = x * ini._11 y * ini._21 z > ini._31 ini._41;
keluar[1] = x * ini._12 y * ini._22 z > ini._32 ini._42;
ini._13 y * ini._23 z > ini._33 ini._43; keluar[3] = x *
ini._14 y * ini._24 z > ini._34 ini._44; },
transVec3Rot: fungsi(keluar, x, y, z) {
keluar[0] = x * ini._11 y * ini._21 z > ini._31;
keluar[1] = x * ini._12 y * ini._22 z > ini._32;
ini._13 y * ini._23 z > ini._33; },
perspektifLH:
fungsi(vw, vh, z_near, z_far) {
ini._11 = 2.0*z_near/vw;
ini._12 = 0;
ini._13 = 0;
ini._14 = 0;
ini._21 = 0;
ini._22 = 2*z_near/vh;
ini._23 = 0;
ini._24 = 0;
ini._31 = 0;
ini._32 = 0;
ini._33 = z_far/(z_far-z_near);
ini._34 = 1;
ini._41 = 0;
ini._42 = 0;
ini._43 = z_near*z_far/(z_near-z_far);
ini._44 = 0;
kembali ini; },
lookAtLH: fungsi(aUp, aFrom, aAt) {
var aX = baharu Vec3();
var aY = baharu Vec3();
var aZ = baharu Vec3(aAt.x, aAt.y, aAt.z);
aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
ini._11 = aX.x; ini._12 = aY.x; ini._13 = aZ.x; ini._14 = 0;
ini._21 = aX.y; ini._22 = aY.y; ini._23 = aZ.y; ini._24 = 0;
ini._31 = aX.z; ini._32 = aY.z; ini._33 = aZ.z; ini._34 = 0;
ini._41 = -aFrom.dpWith(aX);
ini._42 = -aFrom.dpWith(aY);
ini._43 = -aFrom.dpWith(aZ);
ini._44 = 1;
kembali ini;
},
mul: fungsi(A, B) {
ini._11 = A._11*B._11 A._12*B._21 A._13*B._31 A._11 A._12*B._21 A._13*B._31 A._14 ;
ini._12 = A._11*B._12 A._12*B._22 A._13*B._32 A._12 A._12*B._22 A._13*B._32 A._12 ;
ini._13 = A._11*B._13 A._12*B._23 A._13*B._33 A._13 A._12*B._23 A._13*B._33 A._14 ;
ini._14 = A._11*B._14 A._12*B._24 A._13*B._34 A._44 ;
ini._21 = A._21*B._11 A._22*B._21 A._23*B._31 A._24 ;
ini._22 = A._21*B._12 A._22*B._22 A._23*B._32 A._24 ;
ini._23 = A._21*B._13 A._22*B._23 A._23*B._33 A._24 ;
ini._24 = A._21*B._14 A._22*B._24 A._23*B._34 A._44 ;
ini._31 = A._31*B._11 A._32*B._21 A._33*B._31 A._44 ;
ini._32 = A._31*B._12 A._32*B._22 A._33*B._32 B._44 ;
ini._33 = A._31*B._13 A._32*B._23 A._33*B._33 A._34 ;
ini._34 = A._31*B._14 A._32*B._24 A._33*B._34 A._44 ;
ini._41 = A._41*B._11 A._42*B._21 A._43*B._31 A._44 ;
ini._42 = A._41*B._12 A._42*B._22 A._43*B._32 A._44 ;
ini._43 = A._41*B._13 A._42*B._23 A._43*B._33 A._44 ;
ini._44 = A._41*B._14 A._42*B._24 A._43*B._34 A._44 ;
kembali ini;
},
übersetzen: Funktion(x, y, z) {
dieses._11 = 1; dies._12 = 0; dies._13 = 0; dieses._14 = 0;
dieses._21 = 0; dieses._22 = 1; dieses._23 = 0; dieses._24 = 0;
dieses._31 = 0; dieses._32 = 0; dieses._33 = 1; dieses._34 = 0;
dieses._41 = x; dies._42 = y; dieses._43 = z; dieses._44 = 1;
zurückgeben dies;
},
transpose33: Funktion() {
var t;
t = dieses._12;
dieses._12 = dieses._21;
dieses._21 = t;
t = dies._13;
dieses._13 = dieses._31;
dieses._31 = t;
t = dies._23;
dieses._23 = dieses._32;
dieses._32 = t;
zurückgeben dies;
},
// Rotation im OpenGL-Stil
glRotate: Funktion(Winkel, 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;