HTML5 3D衣服搖擺動畫特效_html5教學技巧

這又是一款基於HTML5 Canvas的3D動畫傑作，它是一個可以隨風飄動的3D衣服搖擺動畫特效，非常逼真。當我們將老鼠滑過衣服時，衣服將會出現搖擺的動畫，點擊滑鼠時，衣服將會更加劇烈地擺動。

線上展示  原始碼下載

HTML程式碼

XML/HTML Code複製內容到剪貼簿

1. div style=style=style=
"wid:5000p; 10px auto"
2. >    canvas id=id==> width="480"  >"300">
3. canvas>   p>"3D on 2D Canvas" demo"3D on 2D Canvas" demop
>
4.     p>move cursor to 🎜>p>  
5. div>  

P3D庫JS程式碼，主要用來處理3D效果的

JavaScript Code複製內容到剪貼簿

1. window.P3D = {   
2.  紋理： null、  
3.  g： null  
4. }；   
5.   
6. P3D.clear = 函數(f, w, h) {   
7.  var g = 這.g;  這個
8. .g；  g.beginPath();   
9. g.fillStyle = f;   
10. g.fillRect(0, 0, w, h);   
11.   
12. }   
13.   
14. P3D.num_cmp = 函數(a,b){回傳 a-b;  
15.   
16. P3D.drawTriangle = 函數(poss, uvs, shade_clr) {   
17.  var w = 這.
18.  var h = 這.texture.height;  >這個.texture.height;   
  
19.  var g = 這.g;  這個
20. .g；   
21.  var vAd = [ poss[1].x - poss[0].x , poss[1].y - posy ;   
22.  var vBd = [ poss[2].x - poss[0].x , poss[2].y -骨].y ;   
23.   
24.  var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].u , uvs[1].v - ;   
25.  var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].u , uvs[2].v - s[0]. ;   
26.   
27.  vA[0] *= w;   
28.  vA[1] *= h；   
29.   
30.  vB[0] *= w;   
31.  vB[1] *= h;   
32.   
33.  var m = 新 
34. 新 
;   
35.  m._11 = vA[0];   
36.  m._12 = vA[1];   
37.  m._21 = vB[0];   
38.  m._22 = vB[1];   
39.     
var
40.  im = m.getInvert();     如果 (!im) 返回 
假
41. ;
42.     
var
43.  a = im._11 * vAd[0]   im._12 * vBd[0];    var
 b = im._21 * vAd[0]   im._22 * vBd[0];  
44.   
45.  var c = im._11 * vAd[1]   im._12 * vBd[1];  
 
46. var d = im._21 * vAd[1]   im._22 * vBd[1];     
47.  
var
48.  wu = uvs[0].u * w;     
var
49.  hv = uvs[0].v * h;     
var
50.  du = wu * a   hv * b;     
var
51.  dv = wu * c   hv * d;      
52.  g.save();   
53.   
54.  g.beginPath();   
55. g.moveTo(poss[0].x, poss[0].y);   
56. g.lineTo(poss[1].x, poss[1].y);   
57. g.lineTo(poss[2].x, poss[2].y);   
58.  g.clip();   
59.   
60. g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);   
61.   
62.  // 邊界  
63.  var bx = [wu, wu vA[0], wu vB[0]];   
64.  var by = [hv, hv vA[1], hv vB[1]];   
65.   
66.  bx.sort(P3D.num_cmp);   
67.  by.sort(P3D.num_cmp);   
68.   
69.  var bw = bx[2] - bx[0];   
70.  var bh = by[2] - by[0];   
71.   
72.  if ((bx[0] bw) 
73.  if ((by[0] bh) 
74.  if (bx[0] >= 1) {bx[0]--; 體重;}   
75.  如果 (by[0] >= 1) {by[0]--; bh ;}   
76.   
77. g.drawImage(這個.texture, bx[0], by[0], bw, bh, bx[0], 由[0], bw、bh)；   
78.   
79.  若 (shade_clr) {   
80.   g.fillStyle = shade_clr;   
81.   g.fillRect(bx[0], by[0], bw, bh);   
82.  }   
83.   
84.  g.restore();   
85.   
86.  回傳 true;   
87. }   
88.   
89. P3D.drawTestByIndexBuffer = (pos_buf, ix_buf, 清晰除) {  
90. var g = 這.g;  這個.g；
  
 
92. 如果 ((ix_buf.length%3) != 0)   
  
93. 推 「索引藍牙長度表！」;   
  
 
95. var len = ix_buf.length/3;   
  
 
97. var i、 ibase、 vbase；   
 
98. var poss = [{},{},{}];   
99. g.linesWidth = 1;   
100.   對於  (i = 0, ibase = 0;i 
101.  {   
102.   vbase = ix_buf[ibase ] 
103.   poss[0].x = pos_buf[vbase ];   
104.   poss[0].y = pos_buf[vbase  ];   
105.   
106.   vbase = ix_buf[ibase ] 
107.   poss[1].x = pos_buf[vbase ];   
108.   poss[1].y = pos_buf[vbase  ];   
109.   
110.   vbase = ix_buf[ibase ] 
111.   poss[2].x = pos_buf[vbase ];   
112.   poss[2].y = pos_buf[vbase  ];   
113.   
114.   //叉積的 z 數量  
115.   
116. var Ax = poss[1].x - poss[0].x；   
  
117. var Ay = poss[1].y - poss[0].y；   
118.   var Cx = poss[2].x - poss[1].x；   
119.   var Cy = poss[2].y - poss[1].y；   
120.   
121.   var 剔除 = ( (((Ax * Cy) - (Ay * Cx))*剔除時);   
122.   
123.   g.beginPath();   
124.   g.linesStyle = 清晰除？      g.moveTo(poss[0].x, poss[0].y);      g.lineTo(poss[1].x, poss[1].y);   
125.   g.lineTo(poss[2].x, poss[2].y);   
126.   g.lineTo(poss[0].x, poss[0].y);   
127.   g.中風();   
128.  }   
129. }   
130.   
131. P3D.drawByIndexBuffer = 
132. 函數(pos_buf, ix_buf, tx_buf culling, z_clip)>
133.  var w， h；   
134.  var color_polygon = !這
135. .texture;     if (這
136. .texture) {   .texture) {      w = 這
.texture.width;   
137.   h = 這
.texture.height;   
138.  }  
139.   
140.  var g = 這.g;  這個
141. .g；  var m = 新 
142. 新 
;   
143.     
如果
144. （！剔除）剔除= 0;   
145.     
如果
146.  ((ix_buf.length%3) != 0)      拋出 
「索引緩衝區長度無效！」
147. ;   
148.     var
149.  i, ibase, vbase, tbase, poss = [{},{},{}];  var len = ix_buf.length/3;   
150.  var uv_0u、 uv_0v、 uv_1u、 uv_1v、 uv_2u、 uv_2v;   
151.   
152.  對於  (i = 0, ibase = 0;i 
153.  {   
154.   tbase = ix_buf[ibase ] 
155.   vbase = tbase 
156.   poss[0].x = pos_buf[vbase ]; uv_0u = tx_buf[tbase];   
157.   poss[0].y = pos_buf[vbase ]; uv_0v = tx_buf[tbase];   
158.   if (z_clip && (pos_buf[vbase] ;}   
159.   
160.   tbase = ix_buf[ibase ] 
161.   vbase = tbase 
162.   poss[1].x = pos_buf[vbase ]; uv_1u = tx_buf[tbase];   
163.   poss[1].y = pos_buf[vbase ]; uv_1v = tx_buf[tbase];   
164.   if (z_clip && (pos_buf[vbase] ;}      
165.   tbase = ix_buf[ibase ] 
166.   vbase = tbase 
167.   poss[2].x = pos_buf[vbase ]; uv_2u = tx_buf[tbase];   
168.   poss[2].y = pos_buf[vbase ]; uv_2v = tx_buf[tbase];   
169.   
if
170.  (z_clip && (pos_buf[vbase] ;}  
171.   
172.   var vAd = [ poss[1].x - poss[0].x , poss[1].y ;   
173.   var vBd = [ poss[2].x - poss[0].x , poss[2].. ;   
174.   
175.   var vCd = [ poss[2].x - poss[1].x , poss[2].y ;   
176.   
177.   //叉積的 z 分量  
178.   if( (((vAd[0] * vCd[1]) - (vAd[1] * vC剔除[0]))*) ; 0)   
179.    繼續;   
180.   
181.   若 (color_polygon) {   
182.    g.fillStyle = uv_0u;   
183.   
184.    g.beginPath();   
185.    g.moveTo(poss[0].x, poss[0].y);   
186.    g.lineTo(poss[1].x, poss[1].y);   
187.    g.lineTo(poss[2].x, poss[2].y);   
188.    g.fill();   
189.    繼續;   
190.   }   
191.   
192.   var vA = [ uv_1u - uv_0u , uv_1v - uv_0u - uv_0u , uv_1v - 
  
193. var vB = [ uv_2u - uv_0u , uv_2v - uv_2u - uv_0u , uv_2v - uv_00v    
194.   vA[0] *= w;   
195.   vA[1] *= h；   
196.   
197.   vB[0] *= w;   
198.   vB[1] *= h;   
199.   
200.   m._11 = vA[0];   
201.   m._12 = vA[1];   
202.   m._21 = vB[0];   
203.   m._22 = vB[1];   
204.   
205.   
var
206.  im = m.getInvert();      
若
207.  (!im) { 繼續;}}  
209.   var a = im._11 * vAd[0]   im._12 * vBd* vAd[0]   im._12 * vBd[0];   
210.   var b = im._21 * vAd[0]   im._22 * vBd* vAd[0]   im._22 * vBd[0];   
212.   var c = im._11 * vAd[1]   im._12 * vBd[1];   
213.   var d = im._21 * vAd[1]   im._22 * vBd[1];   
215.   var wu = uv_0u * w;   
216.   var hv = uv_0v * h;   
217.   var du = wu * a   hv * b;   
218.   var dv = wu * c  hv * d;   
220.   g.save();   
222.   g.beginPath();   
223.   g.moveTo(poss[0].x, poss[0].y);   
224.   g.lineTo(poss[1].x, poss[1].y);   
225.   g.lineTo(poss[2].x, poss[2].y);   
226.   g.clip();   
227.   g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);   
229.   var bx = [wu, wu vA[0], wu vB[0]];   
230.   var by = [hv, hv vA[1], hv vB[1]];   
231.   bx.sort(P3D.num_cmp);   
232.   by.sort(P3D.num_cmp);   
234.   
235. var bw = bx[2] - bx[0];   
236.   var 胸集 = by[2] - by[0];   
237.   
238. if ((bx[0] bw) 
239.   如果 ((by[0] 好) 
240.   if (bx[0] >= 1) {bx[0]--; 體重；}   
241.   如果 (by[0] >= 1) {by[0]--; 胸集 ;}   
242.   g.drawImage(
243. 使用.texture, bx[0], by[0], bw, bh, bx[0], by[0], 能部、電梯）；   
244. /*
245.   if (shade_clr) {  
246.    g.fillStyle = shade_clr;  
247.    g.fillRect(bx[0], by[0], bw, bh);  
248.   }  
249. */
250.   g.restore();   
251. }  
252.   
253. }   
254.   
255. 函數 Vec3(_x, _y, _z)   
256. {   
257.  這.x = _x || 0;   
258.  這.y = _y || 0;   
259.  這個.z = _z || 0;   
260. }   
261.   
262. Vec3.prototype = {   
263.  零： 函數() {   
264.   這個.x = 這個.z = 0;     }、  
265.   
266.  子： 
函數
267. (v) {      
這
268. .x -= v.x;      
這
269. .y -= v.y;      
這
270. .z -= v.z;      
271.   
回
272.  這;     }、  
273.   
274.  新增： 
275. 函數(v) {      
276. 這.x  = v.x;      
277. 這.y  = v.y;      
278. 這.z  = v.z;      
279.   
280. 回 這;   
 }、  
  
 copyFrom：
283. 函數(v) {   
  
284. 這.x = v.x；  
  
285. 這.y = v.y;   
  
286. 這.z = v.z；  
  
  
288. 回 這;   
289.  }、  
290.   
291.  範數：函數() {   
292.   返回 Math.sqrt(這個.x*這個.x   這個.y*這.y   這個.y   這個. *這.z);   
293.  },   
294.   
295.  標準化： 函數() {   
296.   var nrm = Math.sqrt(這個.x >.x   這個.y*這.y   這個.y   這個.y   這個. .z*這.z);   
297.   若 (nrm != 0)   
298.   {   
299.    這.x /= nrm;   
300.    這.y /= nrm;   
301.    這.z /= nrm;   
302.   }   
303.   回 這;   
 }、  
  
306.  smul: 函數
(k) {   
307.   這
.x *= k;   
308.   這
.y *= k;   
309.   這
.z *= k;   
  
311.   回 這
;   
313.  }、  
314.     dpWith: 函數
315. (v) {      回 這.x*v.x   這個.x*v.x  >這個這個。 y*v.y   
這
316. .z*v.z；   
317.  }、  
318.     cp: 
函數
319. (v, w) {      
這個
320. .x = (w.y * v.z) - (w.z * v.y);  v.z) - (w.z * v.y);  v.z) - (w.z * v.y);     這個
.y = (w.z * v.x) - (w.x * v.z);  v.x) - (w.x * v.z);  v.x) - (w.x * v.z);     這個.z = (w.x * v.y) - (w.y * v.x);  v.y) - (w.y * v.x);  v.y) - (w.y * v.x);     
  
322. 回 這;   
323.  }、  
324.   
325.  toString: 函數() {   
326.   回來 這個.x   這個.x   .x     🎜>這個.y   ","   這個
327. >  }   
328. }  
329.   
330. 函數 M44(cpy)   
331. {   
332.  若 (cpy)   
333.   這.copyFrom(cpy);   
334.  其他 {   
335.   這.ident();   
336.  }   
337. }   
338.   
339. M44.prototype = {   
340.  ident: 函數() {   
341.      這個._12 = 這個._135> >._14 = 0;      
這個
342. ._21 =       這._24 = 0;      這個._31 = 
343. 這._34 = 0;      這個._41 = 這._42 = >._43 =       0;   
344.      這._11 = 這._22 = 這個
345. ._22 = >._33 = 這
346. ._44 = 1；         回 這;   
347.  },   
348.   
349.  copyFrom: 函數(m) {   
350.   這._11 = m._11;   
351.   這._12 = m._12;   
352.   這._13 = m._13;   
353.   這._14 = m._14;   
354.   
355.   這._21 = m._21;   
356.   這._22 = m._22;   
357.   這._23 = m._23;   
358.   這._24 = m._24;   
359.   
360.   這._31 = m._31;   
361.   這._32 = m._32;   
362.   這._33 = m._33;   
363.   這._34 = m._34；   
364.   
365.   這._41 = m._41；   
366.   這._42 = m._42;   
367.   這._43 = m._43；   
368.   這._44 = m._44；   
369.   
370.   回 這;   
371.  }、  
372.   
373.  transVec3: 函數(out, x, y, z) {   
374.   out[0] = x * 這._11   y * ._11   y * 這這個
._31   這個._41；  
375.   out[1] = x * 這._12   y * 。 這個._32   這個._42；     out[2] = x * 
376. 這個._13   y * 。 這個._33   這個._43；     out[3] = x * 這
._14   y * 
377. 。 這個._34   這個._44；    },   
378.   
379.  transVec3Rot：函數(out, x, y, z) {   
380.   out[0] = x * 這._11   y * ._11   y * 這這._31；   
381.   out[1] = x * 這._12   y * 。 這._32；      out[2] = x * 
這個
382. ._13   y * 。 這._33；     }、     
383.  視角LH：
384. 函數(vw, vh, z_near, z_far) {   
385.   這._11 = 2.0*z_near/vw;   
386.   這._12 = 0;   
387.   這._13 = 0;   
388.   這._14 = 0;   
389.      
390. 這._21 = 0;   
391.   這._22 = 2*z_near/vh;   
392.   這._23 = 0;   
393.   這._24 = 0;   
394.      
395. 這._31 = 0;   
396.   這._32 = 0;   
397.   這._33 = z_far/(z_far-z_near);   
398.   這._34 = 1；  
399.      
400. 這._41 = 0;   
401.   這._42 = 0;   
402.   這._43 = z_near*z_far/(z_near-z_far);   
403.   這
._44 = 0;   
404.   
  
405. 回
 
406. 這;     },   
407.   
408.  lookAtLH：函數(aUp, aFrom, aAt) {   
409.   var aX = new Vec3(); 🎜>new
 Vec3(); 🎠🎜
410.   var aY = new Vec3(); 🎜>new
 Vec3(); 🎠🎜
411.   
412.   var aZ = 新   aZ.sub(aFrom).normalize();   
413.   
414.   aX.cp(aUp, aZ).normalize();   
415.   aY.cp(aZ, aX);   
416.   
417.   
418. 這._11 = aX.x；  這這個._13 = aZ.x；  這._14 = 0；   ._14 = 0；   
419.   這._21 = aX.y;  這. 🎜>這個._23 = aZ.y；  這._24 = 0;   
._24 = 0;   
420.   這._31 = aX.z;  這. 🎜>這個._33 = aZ.z；  這._34 = 0；  
421. ._34 = 0；  
422.      這
423. ._41 = -aFrom.dpWith(aX);      這
424. ._42 = -aFrom.dpWith(aY);      這
425. ._43 = -aFrom.dpWith(aZ);      這
426. ._44 = 1；  
427.         回來 這個
428. ;  ;    },   
429.   
430.  mul: 函數(A, B) {   
431.   這._11 = A._11*B._11     A._12*B._21 ;   
432.   這個._12 = A._11*B._12     A._12*B._2222222    ;   
433.   這._13 = A._11*B._13     A._ ;   
434.   這個._14 = A._11*B._14     A._ ;   
435.   
436.   這個._21 = A._21*B._11     A._22*B._21  21 ;   
437.   這._22 = A._21*B._12     A._ ;   
438.   這個._23 = A._21*B._13     A._ ;   
439.   這個._24 = A._21*B._14     A._ ;   
440.   
441.   這個._31 = A._31*B._11     A._32*B._21  3. ;   
442.   這個._32 = A._31*B._12     A._32*B._222222  ;   
443.   這個._33 = A._31*B._13     A._32*B._231*B._13     A._32*B._231*B._13     A._32*B._231*B._13     A._32*B._2331*B._13     A._32*B._23,321_31.A. ;   
444.   這個._34 = A._31*B._14     A._32*B._24)14 ;   
445.   
446.   這個._41 = A._41*B._11     A._42*B._21  41.A. ;   
447.   這個._42 = A._41*B._12     A._ ;   
448.   這個._43 = A._41*B._13     A._ ;   
449.   這個._44 = A._41*B._14     A._ ;   
450.   
451.   回 這;   
452.  },   
453.   
454.  翻譯： 函數(x, y, z) {   
455.   這._11 = 1;  這. 🎜>._13 = 0;  這._14 = 0；      
這
456. ._21 = 0;  ._23 = 0;  這._24 = 0;      這._31 = 0；  這._32 = 0； 🎜>
._33 = 1；  
457. 這._34 = 0;         這._41 = x；  這個._🎜>
._43 = z;  
458. 這
._44 = 1；   
459.   回 這;     }、  
460.     transpose33: 函數() {   
461.   var
462.  t;   
463.      t = 這
464. ._12;      這個
465. ._12 = 這
466. ._21；     這._21 = t;   
467.      t = 這._13;   
468.   這個._13 = 
469. 這個._31；  
470.   這._31 = t;   
471.      t = 這._23;   
472.   這._23 = 這
473. ._32；     
474. 這._32 = t;      
475.   回 這;   
476.  },   
477.   
478.  // OpenGL style rotation   
479.  glRotate: function(angle, x, y, z) {   
480.   var s = Math.sin( angle );   
481.   var c = Math.cos( angle );   
482.   
483.   var xx = x * x;   
484.   var yy = y * y;   
485.   var zz = z * z;   
486.   var xy = x * y;   
487.   var yz = y * z;   
488.   var zx = z * x;   
489.   var xs = x * s;   
490.   var ys = y * s;   
491.   var zs = z * s;   
492.   var one_c = 1.0 - c;   
493. /*  
494.   this._11 = (one_c * xx)   c;  
495.   this._21 = (one_c * xy) - zs;  
496.   this._31 = (one_c * zx)   ys;  
497.   this._41 = 0;  
498.  
499.   this._12 = (one_c * xy)   zs;  
500.   this._22 = (one_c * yy)   c;  
501.   this._32 = (one_c * yz) - xs;  
502.   this._42 = 0;  
503.  
504.   this._13 = (one_c * zx) - ys;  
505.   this._23 = (one_c * yz)   xs;  
506.   this._33 = (one_c * zz)   c;  
507.   this._43 = 0;  
508.