HTML5 3D 服スイングアニメーション特殊効果_html5 チュートリアルスキル-H5 チュートリアル-php.cn

これも HTML5 キャンバスに基づいた 3D アニメーションの傑作です。風になびく 3D の服のスイングアニメーションの特殊効果で、非常にリアルです。服の上でマウスをスライドさせると、服が揺れるアニメーションが表示されます。マウスをクリックすると、服がさらに激しく揺れます。

オンラインデモ ソースコードのダウンロード

HTML コード

XML/HTML コードコンテンツをクリップボードにコピー

<div style="width:500px;margin :10px 自動">
<キャンバス id="cv" 幅="480" 高さ="300">キャンバス>
<p>「2D キャンバス上の 3D」デモ< /p>
<p>カーソルを移動してパン/クリックしてスイング< ;/p>
div>

P3D ライブラリ JS コード。主に 3D 効果の処理に使用されます

JavaScript コードコンテンツをクリップボードにコピーします

window.P3D = {
テクスチャ: null、
g: null
};
P3D.clear = 関数(f, w, h) {
var g = this.g;
g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = 関数(a,b){return a-b;}
P3D.drawTriangle = 関数(poss, uvs, shade_clr) {
var w = this.texture.width;
var h = this.texture.height;
var g = this.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 = new M22();
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
if (!im) return false;
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);
// 境界
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) <= (h-1)) bh ;
if (bx[0] >= 1) {bx[0]--; bw;}
if (by[0] >= 1) {by[0]--; bh ;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw、bh);
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
g.restore();
return true;
}
P3D.drawTestByIndexBuffer = 関数(pos_buf, ix_buf, culling) {
var g = this.g;
if ((ix_buf.length%3) != 0)
throw 「インデックスバッファの長さが無効です!」;
var len = ix_buf.length/3;
var i, ibase, vbase;
var poss = [{},{},{}];
g.ストローク幅 = 1;
for (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 コンポーネント 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.ストロークスタイル = カリング ? "#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.ストローク();
}
}
P3D.drawByIndexBuffer = 関数(pos_buf, ix_buf, tx_buf, culling, z_clip) {
var w, h;
var color_polygon = !this.texture;
if (this.texture) {
w = this.texture.width;
h = this.texture.height;
<🎜> }
var g = this.g;
var m = new M22();
if (!カリング) カリング = 0;
if ((ix_buf.length%3) != 0)
throw 「インデックスバッファの長さが無効です!」;
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;
for (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; 続行;}
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; 続行;}
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)) {続き;}
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 コンポーネント 0?
if((((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*カリング) < ; 0)
続行;
if (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_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();
if (!im) { 続行;}
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);
// 境界
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) <= (w-1)) bw ;
if ((by[0] bra) <= (h-1)) bra ;
if (bx[0] >= 1) {bx[0]--; bw;}
if (by[0] >= 1) {by[0]--; ブラ ;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw、ブラ）;
/*
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 = これ.y = これ.z = 0;
}、
sub: 関数(v) {
これ.x -= v.x;
これ.y -= v.y;
これ.z -= v.z;
返却これ;
}、
追加: 関数(v) {
これ.x = v.x;
これ.y = v.y;
これ.z = v.z;
返却これ;
}、
copyFrom: 関数(v) {
これ.x = v.x;
これ.y = v.y;
これ.z = v.z;
返却これ;
}、
ノルム:関数() {
return Math.sqrt(this.x*this.x これ.y*これ.y これ.z *これ.z);
},
正規化: 関数() {
var nrm = Math.sqrt(this.x*this.x これ.y*これ.y これ .z*これ.z);
if (nrm != 0)
{
これ.x /= nrm;
これ.y /= nrm;
これ.z /= nrm;
}
返却これ;
}、
smul: 関数(k) {
これ.x *= k;
これ.y *= k;
これ.z *= k;
返却これ;
}、
dpWith: 関数(v) {
return this.x*v.x this。 y*v.y これ.z*v.z;
}、
cp: 関数(v, w) {
これ.x = (w.y * v.z) - (w.z * v.y);
これ.y = (w.z * v.x) - (w.x * v.z);
これ.z = (w.x * v.y) - (w.y * v.x);
返却これ;
}、
toString: function() {
return this.x ", " これ.y "," これ.z;
}
}
関数 M44(cpy)
{
if (cpy)
this.copyFrom(cpy);
else {
this.ident();
}
}
M44.prototype = {
ident: 関数() {
これ._12 = これ._13 = これ._14 = 0;
これ._21 = これ._23 = これ._24 = 0;
これ._31 = これ._32 = これ._34 = 0;
これ._41 = これ._42 = これ._43 = 0;
これ._11 = これ._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 * これ._21 z * これ._31 これ._41;
out[1] = x * これ._12 y * これ._22 z * これ._32 これ._42;
out[2] = x * これ._13 y * これ._23 z * これ._33 これ._43;
out[3] = x * これ._14 y * これ._24 z * これ._34 これ._44;
},
transVec3Rot: 関数(out, x, y, z) {
out[0] = x * これ._11 y * これ._21 z * これ._31;
out[1] = x * これ._12 y * これ._22 z * これ._32;
out[2] = x * これ._13 y * これ._23 z * これ._33;
}、
perspectiveLH: 関数(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);
これ._44 = 0;
返却これ;
},
lookAtLH: 関数(aUp, aFrom, aAt) {
var aX = new Vec3();
var aY = new Vec3();
var aZ = new Vec3(aAt.x, aAt.y, aAt.z);
aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
これ._11 = aX.x; これ._12 = aY.x; これ._13 = aZ.x; これ._14 = 0;
これ._21 = aX.y; これ._22 = aY.y; これ._23 = aZ.y; これ._24 = 0;
これ._31 = aX.z; これ._32 = aY.z; これ._33 = aZ.z; これ._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 A._13*B._31 A._14*B._41 ;
これ._12 = A._11*B._12 A._12*B._22 A._13*B._32 A._14*B._42 ;
これ._13 = A._11*B._13 A._12*B._23 A._13*B._33 A._14*B._43 ;
これ._14 = A._11*B._14 A._12*B._24 A._13*B._34 A._14*B._44 ;
これ._21 = A._21*B._11 A._22*B._21 A._23*B._31 A._24*B._41 ;
これ._22 = A._21*B._12 A._22*B._22 A._23*B._32 A._24*B._42 ;
これ._23 = A._21*B._13 A._22*B._23 A._23*B._33 A._24*B._43 ;
これ._24 = A._21*B._14 A._22*B._24 A._23*B._34 A._24*B._44 ;
これ._31 = A._31*B._11 A._32*B._21 A._33*B._31 A._34*B._41 ;
これ._32 = A._31*B._12 A._32*B._22 A._33*B._32 A._34*B._42 ;
これ._33 = A._31*B._13 A._32*B._23 A._33*B._33 A._34*B._43 ;
これ._34 = A._31*B._14 A._32*B._24 A._33*B._34 A._34*B._44 ;
これ._41 = A._41*B._11 A._42*B._21 A._43*B._31 A._44*B._41 ;
これ._42 = A._41*B._12 A._42*B._22 A._43*B._32 A._44*B._42 ;
これ._43 = A._41*B._13 A._42*B._23 A._43*B._33 A._44*B._43 ;
これ._44 = A._41*B._14 A._42*B._24 A._43*B._34 A._44*B._44 ;
返却これ;
},
translate: 関数(x, y, z) {
これ._11 = 1; これ._12 = 0; これ._13 = 0; これ._14 = 0;
これ._21 = 0; これ._22 = 1; これ._23 = 0; これ._24 = 0;
これ._31 = 0; これ._32 = 0; これ._33 = 1; これ._34 = 0;
これ._41 = x; これ._42 = y; これ._43 = z; これ._44 = 1;
返却これ;
}、
transpose33: 関数() {
var t;
t = これ._12;
これ._12 = これ._21;
これ._21 = t;
t = これ._13;
これ._13 = これ._31;
これ._31 = t;
t = これ._23;
これ._23 = これ._32;
これ._32 = t;
返却これ;
},
//OpenGL 風格旋轉
gl旋轉：函數(角, x, y, z) {
var s = Math.sin( 角度 );
var c = Math.cos( 角度 );
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;
/*
這個._11 = (one_c * xx) c;
this._21 = (one_c * xy) - zs;
this._31 = (one_c * zx) ys;
這._41 = 0;
this._12 = (one_c * xy) zs;
this._22 = (one_c * yy) c;
this._32 = (one_c * yz) - xs;
這._42 = 0;
this._13 = (one_c * zx) - ys;
this._23 = (one_c * yz) xs;
this._33 = (one_c * zz) c;
這._43 = 0;

HTML5 3D 服スイングアニメーション特殊効果_html5 チュートリアル スキル

HTML5 3D 服スイングアニメーション特殊効果_html5 チュートリアルスキル