HTML5 3D衣服摇摆动画特效

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

在线演示

 

源码下载

HTML代码

XML/HTML Code复制内容到剪贴板 <div style="width:500px;margin:10px auto">    <canvas id="cv" width="480" height="300"></canvas>    <p>"3D on 2D Canvas" demo</p>    <p>move cursor to pan / click to swing</p>   </div>  

P3D库JS代码,主要用来处理3D效果的

JavaScript Code复制内容到剪贴板 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 =&n

HTML5 3D衣服摇摆动画特效