HTML5 3D衣服摇摆动画特效

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

在线演示  源码下载

HTML代码

1. <div style="width:500px;margin:10px auto">  
2.  <canvas id="cv" width="480" height="300"></canvas>  
3.  <p>"3D on 2D Canvas" demo</p>  
4.  <p>move cursor to pan / click to swing</p>  
5. </div>  

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

1. window.P3D = {   
2.  texture: null,   
3.  g: null  
4. };   
5.   
6. P3D.clear = function(f, w, h) {   
7.  var g = this.g;   
8.  g.beginPath();   
9.  g.fillStyle = f;   
10.  g.fillRect(0, 0, w, h);   
11.   
12. }   
13.   
14. P3D.num_cmp = function(a,b){return a-b;}   
15.   
16. P3D.drawTriangle = function(poss, uvs, shade_clr) {   
17.  var w = this.texture.width;   
18.  var h = this.texture.height;   
19.   
20.  var g = this.g;   
21.   
22.  var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];   
23.  var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];   
24.   
25.  var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ];   
26.  var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ];   
27.   
28.  vA[0] *= w;   
29.  vA[1] *= h;   
30.   
31.  vB[0] *= w;   
32.  vB[1] *= h;   
33.   
34.  var m = new M22();   
35.  m._11 = vA[0];   
36.  m._12 = vA[1];   
37.  m._21 = vB[0];   
38.  m._22 = vB[1];   
39.   
40.  var im = m.getInvert();   
41.  if (!im) return false;   
42.   
43.  var a = im._11 * vAd[0] + im._12 * vBd[0];   
44.  var b = im._21 * vAd[0] + im._22 * vBd[0];   
45.   
46.  var c = im._11 * vAd[1] + im._12 * vBd[1];   
47.  var d = im._21 * vAd[1] + im._22 * vBd[1];   
48.