HTML5 3D vêtements swing animation effets spéciaux_html5 compétences tutoriel-Tutoriel H5-php.cn

Il s'agit d'un autre chef-d'œuvre d'animation 3D basé sur HTML5 Canvas. Il s'agit d'un effet spécial d'animation de balançoire de vêtements 3D qui peut flotter dans le vent, ce qui est très réaliste. Lorsque nous passons la souris sur les vêtements, les vêtements auront une animation de balancement. Lorsque nous cliquons sur la souris, les vêtements se balanceront plus violemment.

Démo en ligne Téléchargement du code source

Code HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

<div style="largeur : 500 px ; marge :10px auto">
<toile id="cv" largeur="480" hauteur="300">toile>
<p>Démo "3D sur toile 2D"< /p>
<p>déplacer le curseur pour faire un panoramique / cliquer pour balancer< ;/p>
div>

Code JS de la bibliothèque P3D, principalement utilisé pour traiter les effets 3D

Code JavaScriptCopier le contenu dans le presse-papiers

window.P3D = {
texture : null,
g : null
} ;
P3D.clear = fonction(f, w, h) {
var g = ceci.g;
g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = fonction(a,b){retour a-b;}
P3D.drawTriangle = fonction(poss, uvs, shade_clr) {
var w = ce.texture.width;
var h = ce.texture.height;
var g = ceci.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 = nouveau M22();
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
si (!im) retour faux;
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);
// limites
var bx = [wu, wu vA[0], wu vB[0]];
var par = [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 = par[2] - par[0];
if ((bx[0] bw) <= (w-1)) bw ;
if ((by[0] bh) <= (h-1)) bh ;
si (bx[0] >= 1) {bx[0]--; p.c. ;}
if (par[0] >= 1) {par[0]--; bh ;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], pc, bh );
si (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
g.restore();
retour vrai ;
}
P3D.drawTestByIndexBuffer = fonction(pos_buf, ix_buf, culling) {
var g = ceci.g;
if ((ix_buf.length%3) != 0)
lancer "longueur du tampon d'index invalide !" ;
var len = ix_buf.length/3;
var i, ibase, vbase ;
var poss = [{},{},{}];
g.StrokeWidth = 1 ;
pour (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 composant de produits croisés < 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))*culling) < 0);
g.beginPath();
g.StrokeStyle = élimination ? "#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 = fonction(pos_buf, ix_buf, tx_buf, culling, z_clip) {
var w, h;
var color_polygon = !ce.texture;
si (ce.texture) {
w = ce.texture.width;
h = ce.texture.height;
}
var g = ceci.g;
var m = nouveau M22();
if (!culling) culling = 0 ;
if ((ix_buf.length%3) != 0)
lancer "longueur du tampon d'index invalide !" ;
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 ;
pour (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] ;
if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {ibase = 2; continuer;}
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] ;
if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) { ibase; continuer;}
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] ;
if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {continuer;}
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 composant de produits croisés < 0 ?
if( ((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*abattage) < ; 0)
continuer ;
si (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();
continuer ;
}
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();
si (!im) { continuer;}
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);
// limites
var bx = [wu, wu vA[0], wu vB[0]];
var par = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var soutien-gorge = by[2] - by[0];
if ((bx[0] bw) <= (w-1)) bw ;
if ((by[0] soutien-gorge) <= (h-1)) soutien-gorge ;
si (bx[0] >= 1) {bx[0]--; p.c. ;}
if (par[0] >= 1) {par[0]--; soutien-gorge ;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], pc, soutien-gorge);
/*
si (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
*/
g.restore();
}
}
fonction Vec3(_x, _y, _z)
{
ce.x = _x || 0 ;
ce.y = _y || 0 ;
ce.z = _z || 0 ;
}
Vec3.prototype = {
zéro : fonction() {
ce.x = ce.y = ce.z = 0 ;
},
sous : fonction(v) {
ce.x -= v.x;
ce.y -= v.y;
ce.z -= v.z;
retourner ceci ;
},
ajouter : fonction(v) {
ceci.x = v.x;
ce.y = v.y;
ce.z = v.z;
retourner ceci ;
},
copyFrom : fonction(v) {
ce.x = v.x;
ce.y = v.y;
ce.z = v.z;
retourner ceci ;
},
norme :fonction() {
return Math.sqrt(this.x*this.x ce.y*ce.y ce.z *ce.z);
},
normaliser : fonction() {
var nrm = Math.sqrt(ce.x*ce.x ce.y*ce.y ce .z*ce.z);
si (nrm != 0)
{
ce.x /= nrm;
ce.y /= nrm;
ceci.z /= nrm;
}
retourner ceci ;
},
smul : fonction(k) {
ce.x *= k ;
ce.y *= k ;
ce.z *= k ;
retourner ceci ;
},
dpWith : fonction(v) {
retourner ce.x*v.x ce. y*v.y ceci.z*v.z;
},
cp : fonction(v, w) {
ce.x = (w.y * v.z) - (w.z * v.y);
ce.y = (w.z * v.x) - (w.x * v.z);
ce.z = (w.x * v.y) - (w.y * v.x);
retourner ceci ;
},
toString : fonction() {
retourner ce.x ", " ce.y "," ce.z;
}
}
fonction M44(cpy)
{
si (cpy)
ceci.copyFrom(cpy);
autre {
ce.ident();
}
}
M44.prototype = {
ident : fonction() {
ceci._12 = ceci._13 = ceci._14 = 0 ;
ceci._21 = ceci._23 = ceci._24 = 0 ;
ceci._31 = ceci._32 = ceci._34 = 0 ;
ceci._41 = ceci._42 = ceci._43 = 0 ;
ceci._11 = ceci._22 = ceci._33 = ceci._44 = 1 ;
retourner ceci ;
},
copyFrom : fonction(m) {
ce._11 = m._11;
ceci._12 = m._12;
ce._13 = m._13;
ceci._14 = m._14;
ceci._21 = m._21;
ceci._22 = m._22;
ceci._23 = m._23;
ceci._24 = m._24;
ce._31 = m._31;
ceci._32 = m._32;
ceci._33 = m._33;
ceci._34 = m._34;
ceci._41 = m._41;
ceci._42 = m._42;
ceci._43 = m._43;
ceci._44 = m._44;
retourner ceci ;
},
transVec3 : fonction(out, x, y, z) {
out[0] = x * ceci._11 y * ceci._21 z * ce._31 ce._41;
out[1] = x * ce._12 y * ce._22 z * ce._32 ce._42;
out[2] = x * ce._13 y * ce._23 z * ce._33 ce._43;
out[3] = x * ceci._14 y * ceci._24 z * ce._34 ce._44;
},
transVec3Rot : fonction(out, x, y, z) {
out[0] = x * ceci._11 y * ceci._21 z * ce._31;
out[1] = x * ce._12 y * ce._22 z * ce._32;
out[2] = x * ce._13 y * ce._23 z * ce._33;
},
perspectiveLH : fonction(vw, vh, z_near, z_far) {
ce._11 = 2.0*z_near/vw;
ce._12 = 0 ;
ceci._13 = 0 ;
ceci._14 = 0 ;
ceci._21 = 0 ;
ce._22 = 2*z_near/vh;
ceci._23 = 0 ;
ceci._24 = 0 ;
ce._31 = 0 ;
ce._32 = 0 ;
ce._33 = z_far/(z_far-z_near);
ce._34 = 1 ;
ceci._41 = 0 ;
ceci._42 = 0 ;
ce._43 = z_near*z_far/(z_near-z_far);
ceci._44 = 0 ;
retourner ceci ;
},
lookAtLH : fonction(aUp, aFrom, aAt) {
var aX = nouveau Vec3();
var aY = nouveau Vec3();
var aZ = nouveau Vec3(aAt.x, aAt.y, aAt.z);
aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
ceci._11 = aX.x; ce._12 = aY.x; ce._13 = aZ.x; ce._14 = 0;
ceci._21 = aX.y; ce._22 = aY.y; ce._23 = aZ.y; ce._24 = 0 ;
ce._31 = aX.z; ce._32 = aY.z; ce._33 = aZ.z; ce._34 = 0;
ce._41 = -aFrom.dpWith(aX);
ceci._42 = -aFrom.dpWith(aY);
ceci._43 = -aFrom.dpWith(aZ);
ceci._44 = 1 ;
retourner ceci ;
},
mul : fonction(A, B) {
ce._11 = A._11*B._11 A._12*B._21 A._13*B._31 A._14*B._41 ;
ce._12 = A._11*B._12 A._12*B._22 A._13*B._32 A._14*B._42 ;
ceci._13 = A._11*B._13 A._12*B._23 A._13*B._33 A._14*B._43 ;
ceci._14 = A._11*B._14 A._12*B._24 A._13*B._34 A._14*B._44 ;
ce._21 = A._21*B._11 A._22*B._21 A._23*B._31 A._24*B._41 ;
ceci._22 = A._21*B._12 A._22*B._22 A._23*B._32 A._24*B._42 ;
ceci._23 = A._21*B._13 A._22*B._23 A._23*B._33 A._24*B._43 ;
ceci._24 = A._21*B._14 A._22*B._24 A._23*B._34 A._24*B._44 ;
ceci._31 = A._31*B._11 A._32*B._21 A._33*B._31 A._34*B._41 ;
ceci._32 = A._31*B._12 A._32*B._22 A._33*B._32 A._34*B._42 ;
ceci._33 = A._31*B._13 A._32*B._23 A._33*B._33 A._34*B._43 ;
ceci._34 = A._31*B._14 A._32*B._24 A._33*B._34 A._34*B._44 ;
ceci._41 = A._41*B._11 A._42*B._21 A._43*B._31 A._44*B._41 ;
ce._42 = A._41*B._12 A._42*B._22 A._43*B._32 A._44*B._42 ;
ceci._43 = A._41*B._13 A._42*B._23 A._43*B._33 A._44*B._43 ;
ceci._44 = A._41*B._14 A._42*B._24 A._43*B._34 A._44*B._44 ;
retourner ceci ;
},
翻譯：函數(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 スタイルの回転
glRotate: 関数(角度, 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;