html 衣服特效,详细介绍HTML5 3D衣服摇摆动画特效如何实现

这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。

在线演示源码下载

HTML代码

"3D on 2D Canvas" demo

move cursor to pan / click to swing

P3D库JS代码，主要用来处理3D效果的window.P3D = {

texture: null,

g: null

};

P3D.clear = function(f, w, h) {

var g = this.g;

g.beginPath();

g.fillStyle = f;

g.fillRect(0, 0, w, h);

}

P3D.num_cmp = function(a,b){return a-b;}

P3D.drawTriangle = function(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);

// bounds

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) <= (w-1)) 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 = function(pos_buf, ix_buf, culling) {

var g = this.g;

if ((ix_buf.length%3) != 0)

throw "invalid index buffer length!";

var len = ix_buf.length/3;

var i, ibase, vbase;

var poss = [{},{},{}];

g.strokeWidth = 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 component of cross product < 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 = 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 = function(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 (!culling) culling = 0;

if ((ix_buf.length%3) != 0)

throw "invalid index buffer length!";

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; continue;}

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; continue;}

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)) {continue;}

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 component of cross product < 0 ?

if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < 0)

continue;

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();

continue;

}

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) { continue;}

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);

// bounds

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) <= (w-1)) 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();

}

}

function Vec3(_x, _y, _z)

{

this.x = _x || 0;

this.y = _y || 0;

this.z = _z || 0;

}

Vec3.prototype = {

zero: function() {

this.x = this.y = this.z = 0;

},

sub: function(v) {

this.x -= v.x;

this.y -= v.y;

this.z -= v.z;

return this;

},

add: function(v) {

this.x += v.x;

this.y += v.y;

this.z += v.z;

return this;

},

copyFrom: function(v) {

this.x = v.x;

this.y = v.y;

this.z = v.z;

return this;

},

norm:function() {

return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);

},

normalize: function() {

var nrm = Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);

if (nrm != 0)

{

this.x /= nrm;

this.y /= nrm;

this.z /= nrm;

}

return this;

},

smul: function(k) {

this.x *= k;

this.y *= k;

this.z *= k;

return this;

},

dpWith: function(v){

return this.x*v.x + this.y*v.y + this.z*v.z;

},

cp: function(v, w) {

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

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

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

return this;

},

toString: function() {

return this.x + ", " + this.y + "," + this.z;

}

}

function M44(cpy)

{

if (cpy)

this.copyFrom(cpy);

else {

this.ident();

}

}

M44.prototype = {

ident: function() {

this._12 = this._13 = this._14 = 0;

this._21 = this._23 = this._24 = 0;

this._31 = this._32 = this._34 = 0;

this._41 = this._42 = this._43 = 0;

this._11 = this._22 = this._33 = this._44 = 1;

return this;

},

copyFrom: function(m) {

this._11 = m._11;

this._12 = m._12;

this._13 = m._13;

this._14 = m._14;

this._21 = m._21;

this._22 = m._22;

this._23 = m._23;

this._24 = m._24;

this._31 = m._31;

this._32 = m._32;

this._33 = m._33;

this._34 = m._34;

this._41 = m._41;

this._42 = m._42;

this._43 = m._43;

this._44 = m._44;

return this;

},

transVec3: function(out, x, y, z) {

out[0] = x * this._11 + y * this._21 + z * this._31 + this._41;

out[1] = x * this._12 + y * this._22 + z * this._32 + this._42;

out[2] = x * this._13 + y * this._23 + z * this._33 + this._43;

out[3] = x * this._14 + y * this._24 + z * this._34 + this._44;

},

transVec3Rot: function(out, x, y, z) {

out[0] = x * this._11 + y * this._21 + z * this._31;

out[1] = x * this._12 + y * this._22 + z * this._32;

out[2] = x * this._13 + y * this._23 + z * this._33;

},

perspectiveLH: function(vw, vh, z_near, z_far) {

this._11 = 2.0*z_near/vw;

this._12 = 0;

this._13 = 0;

this._14 = 0;

this._21 = 0;

this._22 = 2*z_near/vh;

this._23 = 0;

this._24 = 0;

this._31 = 0;

this._32 = 0;

this._33 = z_far/(z_far-z_near);

this._34 = 1;

this._41 = 0;

this._42 = 0;

this._43 = z_near*z_far/(z_near-z_far);

this._44 = 0;

return this;

},

lookAtLH: function(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);

this._11 = aX.x; this._12 = aY.x; this._13 = aZ.x; this._14 = 0;

this._21 = aX.y; this._22 = aY.y; this._23 = aZ.y; this._24 = 0;

this._31 = aX.z; this._32 = aY.z; this._33 = aZ.z; this._34 = 0;

this._41 = -aFrom.dpWith(aX);

this._42 = -aFrom.dpWith(aY);

this._43 = -aFrom.dpWith(aZ);

this._44 = 1;

return this;

},

mul: function(A, B) {

this._11 = A._11*B._11 + A._12*B._21 + A._13*B._31 + A._14*B._41;

this._12 = A._11*B._12 + A._12*B._22 + A._13*B._32 + A._14*B._42;

this._13 = A._11*B._13 + A._12*B._23 + A._13*B._33 + A._14*B._43;

this._14 = A._11*B._14 + A._12*B._24 + A._13*B._34 + A._14*B._44;

this._21 = A._21*B._11 + A._22*B._21 + A._23*B._31 + A._24*B._41;

this._22 = A._21*B._12 + A._22*B._22 + A._23*B._32 + A._24*B._42;

this._23 = A._21*B._13 + A._22*B._23 + A._23*B._33 + A._24*B._43;

this._24 = A._21*B._14 + A._22*B._24 + A._23*B._34 + A._24*B._44;

this._31 = A._31*B._11 + A._32*B._21 + A._33*B._31 + A._34*B._41;

this._32 = A._31*B._12 + A._32*B._22 + A._33*B._32 + A._34*B._42;

this._33 = A._31*B._13 + A._32*B._23 + A._33*B._33 + A._34*B._43;

this._34 = A._31*B._14 + A._32*B._24 + A._33*B._34 + A._34*B._44;

this._41 = A._41*B._11 + A._42*B._21 + A._43*B._31 + A._44*B._41;

this._42 = A._41*B._12 + A._42*B._22 + A._43*B._32 + A._44*B._42;

this._43 = A._41*B._13 + A._42*B._23 + A._43*B._33 + A._44*B._43;

this._44 = A._41*B._14 + A._42*B._24 + A._43*B._34 + A._44*B._44;

return this;

},

translate: function(x, y, z) {

this._11 = 1; this._12 = 0; this._13 = 0; this._14 = 0;

this._21 = 0; this._22 = 1; this._23 = 0; this._24 = 0;

this._31 = 0; this._32 = 0; this._33 = 1; this._34 = 0;

this._41 = x; this._42 = y; this._43 = z; this._44 = 1;

return this;

},

transpose33: function() {

var t;

t = this._12;

this._12 = this._21;

this._21 = t;

t = this._13;

this._13 = this._31;

this._31 = t;

t = this._23;

this._23 = this._32;

this._32 = t;

return this;

},

// 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;

this._14 = 0;

this._24 = 0;

this._34 = 0;

this._44 = 1;

*/

this._11 = (one_c * xx) + c;

this._12 = (one_c * xy) - zs;

this._13 = (one_c * zx) + ys;

this._14 = 0;

this._21 = (one_c * xy) + zs;

this._22 = (one_c * yy) + c;

this._23 = (one_c * yz) - xs;

this._24 = 0;

this._31 = (one_c * zx) - ys;

this._32 = (one_c * yz) + xs;

this._33 = (one_c * zz) + c;

this._34 = 0;

this._41 = 0;

this._42 = 0;

this._43 = 0;

this._44 = 1;

return this;

}

}

// matrix 2x2

function M22()

{

this._11 = 1;

this._12 = 0;

this._21 = 0;

this._22 = 1;

}

M22.prototype.getInvert = function()

{

var out = new M22();

var det = this._11 * this._22 - this._12 * this._21;

if (det > -0.0001 && det < 0.0001)

return null;

out._11 = this._22 / det;

out._22 = this._11 / det;

out._12 = -this._12 / det;

out._21 = -this._21 / det;

return out;

}

3D衣服动画JS代码function ClothApp()

{

this.canvas = document.getElementById("cv");

P3D.g = this.canvas.getContext("2d");

var tex = new Image();

this.texture1 = tex;

tex.onload = function(){ _this.start(); };

tex.src = "20090226032826.gif";

tex = new Image();

this.texture2 = tex;

tex.onload = function(){ _this.start(); };

tex.src = "20090226032825.png";

this.mLoadCount = 2;

this.mTickCount = 0;

this.G = 0.53;

this.G1 = 0.45;

this.mProjMat = null;

this.mViewMat = null;

this.mViewFrom = new Vec3();

this.mViewFrom.y = -150;

this.mViewFrom.z = 1000;

this.mViewFromA = (new Vec3()).copyFrom(this.mViewFrom);

this.mViewAngle = 0;

this.mNLen = 0;

this.mNodes = [];

this.mRenderTris = null;

this.mLTNode = null;

this.mRTNode = null;

this.mLTNodeV = new Vec3();

this.mRTNodeV = new Vec3();

this.mWForce = new Vec3();

this.frate = 15;

var _this = this;

}

ClothApp.zsortCmp = function(t1, t2) {

return t2.sortKey - t1.sortKey;

}

ClothApp.prototype = {

start: function() {

if (--this.mLoadCount != 0) return;

this.vUP = new Vec3(0, 1, 0);

this.vAT = new Vec3(0, 80, 0);

this.mViewport = {};

this.mViewport.w = 480;

this.mViewport.h = 300;

this.mViewport.ow = 240;

this.mViewport.oh = 150;

this.setupTransforms();

this.generateCloth(180);

this.generateRenderTriangles();

var _this = this;

this.canvas.addEventListener("mousemove", function(e){_this.onMouseMove(e);}, false);

this.canvas.addEventListener("mousedown", function(e){_this.onClick(e);}, false);

window.setTimeout(function(){_this.onInterval();}, this.frate);

},

onInterval: function() {

this.mTickCount++;

// this.mLTNodeV.z = Math.cos(this.mTickCount*0.1) * 2;

this.tick();

this.updatePosition();

this.draw();

var _this = this;

window.setTimeout(function(){_this.onInterval();}, this.frate);

},

onMouseMove: function(e) {

if (e.clientX || e.clientX == 0)

this.mViewAngle = (e.clientX - 240) * 0.004;

if (e.clientY || e.clientY == 0)

this.mViewFromA.y = 90 - (e.clientY - 0) * 0.8;

},

onClick: function(e) {

if (e.clientX || e.clientX == 0)

{

this.mWForce.z = -4;

this.mWForce.x = (e.clientX - 240) * -0.03;

}

},

tick: function() {

this.updateViewTrans(this.mViewAngle);

var nlen = this.mNodes.length;

var i, nd;

for(i = 0;i < nlen;i++)

{

nd = this.mNodes[i];

nd.F.x = 0;

nd.F.z = 0;

if (nd.flags & 4)

nd.F.y = -this.G1;

else

nd.F.y = -this.G;

nd.F.add(this.mWForce);

}

this.mWForce.zero();

this.applyTension();

for(i = 0;i < nlen;i++)

{

nd = this.mNodes[i];

if ((nd.flags&1) != 0) {

nd.F.sub(nd.F);

}

nd.velo.add(nd.F);

}

this.mLTNode.velo.copyFrom(this.mLTNodeV);

this.mRTNode.velo.copyFrom(this.mRTNodeV);

},

updatePosition: function() {

var nlen = this.mNodes.length;

var i, nd;

for(i = 0;i < nlen;i++)

{

nd = this.mNodes[i];

if ((nd.flags&1) != 0) {

nd.cv.x = 0;

nd.cv.y = 0;

nd.cv.z = 0;

}

nd.pos.add(nd.velo);

nd.velo.sub(nd.cv);

nd.cv.x = 0;

nd.cv.y = 0;

nd.cv.z = 0;

nd.velo.smul(0.95);

}

},

draw: function() {

P3D.clear("#000", this.mViewport.w, this.mViewport.h);

this.transformPolygons();

this.mRenderTris.sort(ClothApp.zsortCmp);

var len = this.mRenderTris.length;

var t, sh;

for (var i = 0;i < len;i++) {

t = this.mRenderTris[i];

if (P3D.texture != t.texture)

P3D.texture = t.texture;

sh = undefined;

if (t.lighting && t.shade > 0.01)

sh = "rgba(0,0,0,"+t.shade+")";

P3D.drawTriangle(t.tposs, t.uvs, sh);

}

},

applyTension: function() {

var i, k, nd;

var v = new Vec3();

var nlen = this.mNodes.length;

var naturalLen = this.mNLen;

for (k = 0;k < nlen;k++)

{

nd = this.mNodes[k];

var F = nd.F;

for (i = 0;i < 4;i++)

{

var nbr = nd.links[i];

if (!nbr) continue;

var len = v.copyFrom(nbr.pos).sub(nd.pos).norm();

var dlen = len - naturalLen;

if (dlen > 0) {

v.smul(dlen * 0.5 / len);

F.x += v.x;

F.y += v.y;

F.z += v.z;

nd.cv.add(v.smul(0.8));

}

}

}

},

setupTransforms: function() {

this.mProjMat = new M44();

this.mProjMat.perspectiveLH(24, 15, 10, 9000);

this.mViewMat = new M44();

this.updateViewTrans(0);

},

updateViewTrans: function(ry) {

this.mViewFromA.z = Math.cos(ry) * 380;

this.mViewFromA.x = Math.sin(ry) * 380;

this.mViewFrom.smul(0.7);

this.mViewFrom.x += this.mViewFromA.x * 0.3;

this.mViewFrom.y += this.mViewFromA.y * 0.3;

this.mViewFrom.z += this.mViewFromA.z * 0.3;

this.mViewMat.lookAtLH(this.vUP, this.mViewFrom, this.vAT);

},

generateCloth: function(base_y) {

var cols = 9;

var rows = 8;

var step = 22;

this.mNLen = step*0.9;

var w = (cols-1) * step;

var i, k;

for (k = 0;k < rows;k++)

{

for (i = 0;i < cols;i++)

{

var nd = new ClothNode();

nd.pos.x = -(w/2) + i*step;

nd.pos.y = base_y -k*step/2;

nd.pos.z = k*16;

nd.uv.u = i / (cols-1);

nd.uv.v = k / (rows-1);

if (i > 0) {

var prv_nd = this.mNodes[this.mNodes.length-1];

prv_nd.links[1] = nd;

nd.links[0] = prv_nd;

}

if (k > 0) {

var up_nd = this.mNodes[this.mNodes.length-cols];

up_nd.links[4] = nd;

nd.links[3] = up_nd;

}

if (i != 0 && i != 4 && i != (cols-1))

nd.flags |= 4;

this.mNodes.push(nd);

}

}

// fix left-top and right-top

this.mNodes[0 ].flags |= 1;

this.mNodes[4 ].flags |= 1;

this.mNodes[cols-1].flags |= 1;

this.mLTNode = this.mNodes[0 ];

this.mRTNode = this.mNodes[cols-1];

},

generateRenderTriangles: function()

{

if (!this.mRenderTris) this.mRenderTris = [];

var i;

var nd;

var nlen = this.mNodes.length;

for(i = 0;i < nlen;i++)

{

nd = this.mNodes[i];

if (nd.links[1] && nd.links[1].links[4]) {

var t = new RenderTriangle();

t.texture = this.texture1;

t.poss[0] = nd.pos;

t.poss[1] = nd.links[1].pos;

t.poss[2] = nd.links[1].links[4].pos;

t.uvs[0] = nd.uv;

t.uvs[1] = nd.links[1].uv;

t.uvs[2] = nd.links[1].links[4].uv;

this.mRenderTris.push(t);

t = new RenderTriangle();

t.texture = this.texture1;

t.poss[0] = nd.pos;

t.poss[1] = nd.links[1].links[4].pos;

t.poss[2] = nd.links[4].pos;

t.uvs[0] = nd.uv;

t.uvs[1] = nd.links[1].links[4].uv;

t.uvs[2] = nd.links[4].uv;

this.mRenderTris.push(t);

}

}

this.addBGTriangles(this.mNodes[0].pos.y);

},

addBGTriangles: function(by) {

var cols = 4;

var t, x, y, sz = 110;

var ox = -(cols*sz)/2;

var oz = -(cols*sz)/2;

for (y = 0;y < cols;y++) {

for (x = 0;x < cols;x++) {

var bv = ((x+y)&1) * 0.5;

t = new RenderTriangle();

t.texture = this.texture2;

t.poss[0] = new Vec3(ox + x*sz , by, oz + y*sz );

t.poss[1] = new Vec3(ox + x*sz + sz, by, oz + y*sz );

t.poss[2] = new Vec3(ox + x*sz , by, oz + y*sz + sz);

t.uvs[0] = {u:0 , v:bv };

t.uvs[1] = {u:0.5, v:bv };

t.uvs[2] = {u:0 , v:bv+0.5};

if ((x==1 || x==2) && (y==1 || y==2))

this.modifyRoofUV(t, x == 2, bv);

t.lighting = false;

t.zBias = 0.5;

this.mRenderTris.push(t);

t = new RenderTriangle();

t.texture = this.texture2;

t.poss[0] = new Vec3(ox + x*sz , by, oz + y*sz + sz);

t.poss[1] = new Vec3(ox + x*sz + sz, by, oz + y*sz );

t.poss[2] = new Vec3(ox + x*sz + sz, by, oz + y*sz + sz);

t.uvs[0] = {u:0 , v:bv+0.5};

t.uvs[1] = {u:0.5, v:bv };

t.uvs[2] = {u:0.5, v:bv+0.5};

if ((x==1 || x==2) && (y==1 || y==2))

this.modifyRoofUV(t, x == 2, bv);

t.lighting = false;

t.zBias = 0.5;

this.mRenderTris.push(t);

}

}

},

modifyRoofUV: function(t, rv, bv) {

if (rv) {

t.uvs[0].u = 0.5 - t.uvs[0].u;

t.uvs[1].u = 0.5 - t.uvs[1].u;

t.uvs[2].u = 0.5 - t.uvs[2].u;

}

t.uvs[0].u += 0.5;

t.uvs[1].u += 0.5;

t.uvs[2].u += 0.5;

if (rv) {

t.uvs[0].v = 0.5 - t.uvs[0].v + bv + bv;

t.uvs[1].v = 0.5 - t.uvs[1].v + bv + bv;

t.uvs[2].v = 0.5 - t.uvs[2].v + bv + bv;

}

},

transformPolygons: function() {

var trans = new M44();

trans.mul(this.mViewMat, this.mProjMat);

var hw = this.mViewport.ow;

var hh = this.mViewport.oh;

var len = this.mRenderTris.length;

var t;

var spos = [0, 0, 0, 0];

for (var i = 0;i < len;i++) {

t = this.mRenderTris[i];

for (var k = 0;k < 3;k++) {

trans.transVec3(spos, t.poss[k].x, t.poss[k].y, t.poss[k].z);

var W = spos[3];

spos[0] /= W;

spos[1] /= W;

spos[2] /= W;

spos[0] *= this.mViewport.w;

spos[1] *= -this.mViewport.h;

spos[0] += hw;

spos[1] += hh;

t.tposs[k].x = spos[0];

t.tposs[k].y = spos[1];

t.tposs[k].z = spos[2];

}

var v1 = (new Vec3()).copyFrom(t.poss[1]).sub(t.poss[0]).normalize();

var v2 = (new Vec3()).copyFrom(t.poss[2]).sub(t.poss[1]).normalize();

var N = (new Vec3()).cp(v1, v2);

trans.transVec3Rot(spos, N.x, N.y, N.z);

if (t.lighting) {

if (spos[2] > 0)

t.shade = 0.8

else {

t.shade = 0.1 - N.y * 0.6;

if (t.shade < 0) t.shade = 0;

}

}

t.sortKey = Math.floor( (t.tposs[0].z + t.tposs[1].z + t.tposs[2].z + t.zBias) *1000 );

}

}

}

function ClothNode()

{

this.flags = 0;

this.pos = new Vec3();

this.velo = new Vec3();

this.cv = new Vec3();

this.F = new Vec3();

this.links = [null, null, null, null];

this.uv = {u:0, v:0};

}

function RenderTriangle()

{

this.texture = null;

this.poss = new Array(3);

this.tposs = [new Vec3(), new Vec3(), new Vec3()];

this.uvs = [{u:0, v:0}, {u:0, v:0}, {u:0, v:0}];

this.shade = 0;

this.lighting = true;

this.zBias = 0;

this.sortKey = 0;

}

在线演示源码下载

以上就是详细介绍HTML5 3D衣服摇摆动画特效如何实现的内容，更多相关内容请关注PHP中文网(www.php.cn)！

相关文章：

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理