HTML5 animasi hayunan pakaian 3D kesan khas_html5 kemahiran tutorial

Ini adalah satu lagi karya animasi 3D berdasarkan HTML5 Canvas Ia adalah kesan khas animasi hayunan pakaian 3D yang boleh berkibar ditiup angin, yang sangat realistik. Apabila kita meluncurkan tetikus ke atas pakaian, pakaian akan mempunyai animasi bergoyang Apabila kita mengklik tetikus, pakaian akan dihayun dengan lebih ganas.

Demo dalam talian Muat turun kod sumber

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div gaya="lebar:500px;margin :10px auto">
2. <kanvas id="cv" lebar="480" tinggi="300">kanvas> 
3. <p>demo "3D on 2D Canvas"< /p>
4. <p>gerakkan kursor ke pan / klik untuk mengayun< ;/p> 
5. div>

Kod JS perpustakaan P3D, terutamanya digunakan untuk memproses kesan 3D

Kod JavaScriptSalin kandungan ke papan keratan

1. tetingkap.P3D = {   
2.  tekstur: null,   
3.  g: null  
4. };   
5.   
6. P3D.clear = fungsi(f, w, h) {   
7.  var g = ini.g;   
8.  g.beginPath();   
9.  g.fillStyle = f;   
10.  g.fillRect(0, 0, w, h);   
11.   
12. }   
13.   
14. P3D.num_cmp = fungsi(a,b){kembali a-b;}  
15.   
16. P3D.drawTriangle = fungsi(poss, uvs, shade_clr) {   
17.  var w = ini.texture.width;   
18.  var h = ini.texture.height;   
19.   
20.  var g = ini.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 = baharu 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.  jika (!im) kembali palsu;   
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.   
49.  var wu = uvs[0].u * w;   
50.  var hv = uvs[0].v * h;   
51.  var du = wu * a   hv * b;   
52.  var dv = wu * c   hv * d;   
53.   
54.  g.save();   
55.   
56.  g.beginPath();   
57.  g.moveTo(poss[0].x, poss[0].y);   
58.  g.lineTo(poss[1].x, poss[1].y);   
59.  g.lineTo(poss[2].x, poss[2].y);   
60.  g.clip();   
61.   
62.  g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);   
63.   
64.  // sempadan   
65.  var bx = [wu, wu vA[0], wu vB[0]];   
66.  var oleh = [hv, hv vA[1], hv vB[1]];   
67.   
68.  bx.sort(P3D.num_cmp);   
69.  mengikut.sort(P3D.num_cmp);   
70.   
71.  var bw = bx[2] - bx[0];   
72.  var bh = oleh[2] - oleh[0];   
73.   
74.  jika ((bx[0] bw) <= (w-1)) bw ;   
75.  jika ((oleh[0] bh) <= (h-1)) bh ;   
76.  jika (bx[0] >= 1) {bx[0]--; bw ;}   
77.  jika (oleh[0] >= 1) {oleh[0]--; bh ;}   
78.   
79.  g.drawImage(ini.tekstur, bx[0], oleh[0], bw, bh, bx[0], oleh[0], bw, bh);   
80.   
81.  jika (shade_clr) {   
82.   g.fillStyle = shade_clr;   
83.   g.fillRect(bx[0], oleh[0], bw, bh);   
84.  }   
85.   
86.  g.restore();   
87.   
88.  kembali benar;   
89. }   
90.   
91. P3D.drawTestByIndexBuffer = fungsi(pos_buf, ix_buf, pemusnahan) {   
92.  var g = ini.g;   
93.   
94.  jika ((ix_buf.length%3) != 0)   
95.   lontar "panjang penampan indeks tidak sah!";   
96.   
97.  var len = ix_buf.length/3;   
98.   
99.  var i, ibase, vbase;   
100.  var poss = [{},{},{}];   
101.  g.strokeWidth = 1;   
102.  untuk (i = 0, ibase = 0;i < len; i)   
103.  {   
104.   vbase = ix_buf[ibase ] << 2;   
105.   poss[0].x = pos_buf[vbase ];   
106.   poss[0].y = pos_buf[vbase  ];   
107.   
108.   vbase = ix_buf[ibase ] << 2;   
109.   poss[1].x = pos_buf[vbase ];   
110.   poss[1].y = pos_buf[vbase  ];   
111.   
112.   vbase = ix_buf[ibase ] << 2;   
113.   poss[2].x = pos_buf[vbase ];   
114.   poss[2].y = pos_buf[vbase  ];   
115.   
116.   // z komponen produk bersilang < 0 ?   
117.   
118.   var Ax = poss[1].x - poss[0].x;   
119.   var Ay = poss[1].y - poss[0].y;   
120.   var Cx = poss[2].x - poss[1].x;   
121.   var Cy = poss[2].y - poss[1].y;   
122.   
123.   var cull = ( (((Ax * Cy) - (Ay * Cx))*cull) < 0);   
124.   
125.   g.beginPath();   
126.   g.strokeStyle = cull ? "#592" : "#0f0";   
127.   g.moveTo(poss[0].x, poss[0].y);   
128.   g.lineTo(poss[1].x, poss[1].y);   
129.   g.lineTo(poss[2].x, poss[2].y);   
130.   g.lineTo(poss[0].x, poss[0].y);   
131.   g.stroke();   
132.  }   
133. }   
134.   
135. P3D.drawByIndexBuffer = fungsi(pos_buf, ix_buf, tx_buf, culling, z_clip) {   
136.  var w, h;   
137.  var color_polygon = !ini.tekstur;   
138.  jika (ini.tekstur) {   
139.   w = ini.tekstur.lebar;   
140.   h = ini.tekstur.tinggi;   
141.  }  
142.   
143.  var g = ini.g;   
144.  var m = baharu M22();   
145.   
146.  jika (!pemusnahan) pemusnahan = 0;   
147.   
148.  jika ((ix_buf.length%3) != 0)   
149.   lontar "panjang penampan indeks tidak sah!";   
150.   
151.  var i, ibase, vbase, tbase, poss = [{},{},{}];   
152.  var len = ix_buf.length/3;   
153.  var uv_0u, uv_0v, uv_1u, uv_1v, uv_2u, uv_2v;   
154.   
155.  untuk (i = 0, ibase = 0;i < len; i)   
156.  {   
157.   tbase = ix_buf[ibase ] << 1  
158.   vbase = tbase << 1;   
159.   poss[0].x = pos_buf[vbase ]; uv_0u = tx_buf[tbase ];   
160.   poss[0].y = pos_buf[vbase ]; uv_0v = tx_buf[tbase];   
161.   jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {ibase  = 2; teruskan;}   
162.   
163.   tbase = ix_buf[ibase ] << 1  
164.   vbase = tbase << 1;   
165.   poss[1].x = pos_buf[vbase ]; uv_1u = tx_buf[tbase ];   
166.   poss[1].y = pos_buf[vbase ]; uv_1v = tx_buf[tbase];   
167.   jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) { ibase; teruskan;}   
168.   
169.   tbase = ix_buf[ibase ] << 1  
170.   vbase = tbase << 1;   
171.   poss[2].x = pos_buf[vbase ]; uv_2u = tx_buf[tbase ];   
172.   poss[2].y = pos_buf[vbase ]; uv_2v = tx_buf[tbase];   
173.   jika (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {teruskan 🎜>;}  
174.   
175.   var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ] ;   
176.   var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ] ;   
177.   
178.   var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ] ;   
179.   
180.   // z komponen produk bersilang < 0 ?   
181.   jika( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < ;  0)   
182.    teruskan;   
183.   
184.   jika (warna_poligon) {   
185.    g.fillStyle = uv_0u;   
186.   
187.    g.beginPath();   
188.    g.moveTo(poss[0].x, poss[0].y);   
189.    g.lineTo(poss[1].x, poss[1].y);   
190.    g.lineTo(poss[2].x, poss[2].y);   
191.    g.fill();   
192.    teruskan;   
193.   }   
194.   
195.   var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];   
196.   var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];   
197.   
198.   vA[0] *= w;   
199.   vA[1] *= h;   
200.   
201.   vB[0] *= w;   
202.   vB[1] *= h;   
203.   
204.   m._11 = vA[0];   
205.   m._12 = vA[1];   
206.   m._21 = vB[0];   
207.   m._22 = vB[1];   
208.   
209.   var im = m.getInvert();   
210.   jika (!im) { teruskan;}  
212.   var a = im._11 * vAd[0]   im._12 * vBd[0];   
213.   var b = im._21 * vAd[0]   im._22 * vBd[0];   
215.   var c = im._11 * vAd[1]   im._12 * vBd[1];   
216.   var d = im._21 * vAd[1]   im._22 * vBd[1];   
218.   var wu = uv_0u * w;   
219.   var hv = uv_0v * h;   
220.   var du = wu * a   hv * b;   
221.   var dv = wu * c   hv * d;   
223.   g.save();   
225.   g.beginPath();   
226.   g.moveTo(poss[0].x, poss[0].y);   
227.   g.lineTo(poss[1].x, poss[1].y);   
228.   g.lineTo(poss[2].x, poss[2].y);   
229.   g.clip();   
230.   g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);   
232.   // sempadan   
233.   var bx = [wu, wu vA[0], wu vB[0]];   
234.   var oleh = [hv, hv vA[1], hv vB[1]];   
236.   bx.sort(P3D.num_cmp);   
237.   mengikut.sort(P3D.num_cmp);   
239.   var bw = bx[2] - bx[0];   
240.   var bra = oleh[2] - oleh[0];   
242.   jika ((bx[0] bw) <= (w-1)) bw ;   
243.   jika ((oleh[0] coli) <= (h-1)) bra ;   
244.   jika (bx[0] >= 1) {bx[0]--; bw ;}   
245.   jika (oleh[0] >= 1) {oleh[0]--; coli ;}   
247.   g.drawImage(ini.tekstur, bx[0], oleh[0], bw, bh, bx[0], oleh[0], bw, coli);   
248. /*
249.   jika (shade_clr) {  
250.    g.fillStyle = shade_clr;  
251.    g.fillRect(bx[0], oleh[0], bw, bh);  
252.   }  
253. */
254.   g.restore();   
256. }  
257.   
258. }   
259.   
260. fungsi Vec3(_x, _y, _z)   
261. {   
262.  ini.x = _x || 0;   
263.  ini.y = _y || 0;   
264.  ini.z = _z || 0;   
265. }   
266.   
267. Vec3.prototype = {   
268.  sifar: fungsi() {   
269.   ini.x = ini.y = ini.z = 0;   
270.  }, ​​  
271.   
272.  sub: fungsi(v) {   
273.   ini.x -= v.x;   
274.   ini.y -= v.y;   
275.   ini.z -= v.z;   
276.   
277.   kembali ini;   
278.  }, ​​  
279.   
280.  tambah: fungsi(v) {   
281.   ini.x  = v.x;   
282.   ini.y  = v.y;   
283.   ini.z  = v.z;   
284.   
285.   kembali ini;   
286.  }, ​​  
287.   
288.  salinan Daripada: fungsi(v) {   
289.   ini.x = v.x;   
290.   ini.y = v.y;   
291.   ini.z = v.z;   
292.   
293.   kembali ini;   
294.  }, ​​  
295.   
296.  norma:fungsi() {   
297.   kembali Math.sqrt(ini.x*ini.x   ini.y*ini.y   ini.z *ini.z);   
298.  },   
299.   
300.  normalkan: fungsi() {   
301.   var nrm = Math.sqrt(ini.x*ini.x   ini.y*ini.y   ini .z*ini.z);   
302.   jika (nrm != 0)   
303.   {   
304.    ini.x /= nrm;   
305.    ini.y /= nrm;   
306.    ini.z /= nrm;   
307.   }   
308.   kembali ini;   
309.  }, ​​  
310.   
311.  smul: fungsi(k) {   
312.   ini.x *= k;   
313.   ini.y *= k;   
314.   ini.z *= k;   
315.   
316.   kembali ini;   
317.  }, ​​  
318.   
319.  dpDengan: fungsi(v) {   
320.   kembali ini.x*v.x   ini. y*v.y   ini.z*v.z;   
321.  }, ​​  
322.   
323.  cp: fungsi(v, w) {   
324.   ini.x = (w.y * v.z) - (w.z * v.y);   
325.   ini.y = (w.z * v.x) - (w.x * v.z);   
326.   ini.z = (w.x * v.y) - (w.y * v.x);   
327.   
328.   kembali ini;   
329.  }, ​​  
330.   
331.  kepadaString: fungsi() {   
332.   kembali ini.x   ", "   ini.y   ","   ini.z;   
333.  }   
334. }  
335.   
336. fungsi M44(cpy)   
337. {   
338.  jika (cpy)   
339.   ini.copyFrom(cpy);   
340.  lain {   
341.   ini.ident();   
342.  }   
343. }   
344.   
345. M44.prototype = {   
346.  ident: fungsi() {   
347.      ini._12 = ini._13 = iniini
._14 = 0;   
348.   ini._21 =       ini._23 = ini
ini
349. ._24 = 0;      ini._31 = ini._32 =       ini
350. iniini._34 = 0;      ini._41 = ini
._42 = 
351. ini
._43 =       0;   
352.      ini._11 = ini._22 = ini
._33 = 
353. ini
._44 = 1;   
354.      kembali
 
355. ini;     },   
356.   
357.  salinan Daripada: fungsi(m) {   
358.   ini._11 = m._11;   
359.   ini._12 = m._12;   
360.   ini._13 = m._13;   
361.   ini._14 = m._14;   
362.   
363.   ini._21 = m._21;   
364.   ini._22 = m._22;   
365.   ini._23 = m._23;   
366.   ini._24 = m._24;   
367.   
368.   ini._31 = m._31;   
369.   ini._32 = m._32;   
370.   ini._33 = m._33;   
371.   ini._34 = m._34;   
372.   
373.   ini._41 = m._41;   
374.   ini._42 = m._42;   
375.   ini._43 = m._43;   
376.   ini._44 = m._44;   
377.   
378.   kembali ini;   
379.  }, ​​  
380.   
381.  transVec3: fungsi(keluar, x, y, z) {   
382.   keluar[0] = x * ini._11   y * ini._21   z > ini._31   ini._41;   
383.   keluar[1] = x * ini._12   y * ini._22   z > ini._32   ini._42;   
  keluar[2] = x * 
384. ini._13   y * ini._23   z > ini._33   ini._43;      keluar[3] = x * 
385. ini._14   y * ini._24   z > ini._34   ini._44;     },   
386.   
387.  transVec3Rot: fungsi(keluar, x, y, z) {   
388.   keluar[0] = x * ini._11   y * ini._21   z > ini._31;   
389.   keluar[1] = x * ini._12   y * ini._22   z > ini._32;   
  keluar[2] = x * 
390. ini._13   y * ini._23   z > ini._33;     }, ​​  
391.   
392.  perspektifLH: 
393. fungsi(vw, vh, z_near, z_far) {      
394. ini._11 = 2.0*z_near/vw;      
395. ini._12 = 0;      
396. ini._13 = 0;      
397. ini._14 = 0;      
398.   
399. ini._21 = 0;      
400. ini._22 = 2*z_near/vh;      
401. ini._23 = 0;      
402. ini._24 = 0;      
403.   
404. ini._31 = 0;      
405. ini._32 = 0;      
406. ini._33 = z_far/(z_far-z_near);      
407. ini._34 = 1;      
408.   
409. ini._41 = 0;      
410. ini._42 = 0;      
411. ini._43 = z_near*z_far/(z_near-z_far);      
412. ini._44 = 0;      
413.   
414. kembali ini;     },   
415.   
416.  lookAtLH: fungsi(aUp, aFrom, aAt) {   
417.   var aX = baharu Vec3();   
418.   var aY = baharu Vec3();   
419.   
420.   var aZ = baharu Vec3(aAt.x, aAt.y, aAt.z);   
421.   aZ.sub(aFrom).normalize();   
422.   
423.   aX.cp(aUp, aZ).normalize();   
424.   aY.cp(aZ, aX);   
425.   
426.   ini._11 = aX.x;  ini._12 = aY.x;  ini._13 = aZ.x;  ini._14 = 0;   
427.   ini._21 = aX.y;  ini._22 = aY.y;  ini._23 = aZ.y;  ini._24 = 0;   
428.   ini._31 = aX.z;  ini._32 = aY.z;  ini._33 = aZ.z;  ini._34 = 0;   
429.   
430.   ini._41 = -aFrom.dpWith(aX);   
431.   ini._42 = -aFrom.dpWith(aY);   
432.   ini._43 = -aFrom.dpWith(aZ);   
433.   ini._44 = 1;   
434.   
435.      kembali ini;   
436.  },   
437.   
438.  mul: fungsi(A, B) {   
439.   ini._11 = A._11*B._11     A._12*B._21     A._13*B._31     A._11     A._12*B._21     A._13*B._31     A._14 ;   
440.   ini._12 = A._11*B._12     A._12*B._22     A._13*B._32     A._12     A._12*B._22     A._13*B._32     A._12 ;   
441.   ini._13 = A._11*B._13     A._12*B._23     A._13*B._33     A._13     A._12*B._23     A._13*B._33     A._14 ;   
442.   ini._14 = A._11*B._14      A._12*B._24     A._13*B._34     A._44 ;   
443.   
444.   ini._21 = A._21*B._11     A._22*B._21     A._23*B._31     A._24 ;   
445.   ini._22 = A._21*B._12     A._22*B._22     A._23*B._32     A._24 ;   
446.   ini._23 = A._21*B._13     A._22*B._23     A._23*B._33     A._24 ;   
447.   ini._24 = A._21*B._14      A._22*B._24     A._23*B._34     A._44 ;   
448.   
449.   ini._31 = A._31*B._11     A._32*B._21     A._33*B._31     A._44 ;   
450.   ini._32 = A._31*B._12     A._32*B._22     A._33*B._32     B._44 ;   
451.   ini._33 = A._31*B._13     A._32*B._23     A._33*B._33     A._34 ;   
452.   ini._34 = A._31*B._14      A._32*B._24     A._33*B._34     A._44 ;   
453.   
454.   ini._41 = A._41*B._11     A._42*B._21     A._43*B._31     A._44 ;   
455.   ini._42 = A._41*B._12     A._42*B._22     A._43*B._32     A._44 ;   
456.   ini._43 = A._41*B._13     A._42*B._23     A._43*B._33     A._44 ;   
457.   ini._44 = A._41*B._14      A._42*B._24     A._43*B._34     A._44 ;   
458.   
459.   kembali ini;   
460.  },   
461.   
462.  übersetzen: Funktion(x, y, z) {   
463.   dieses._11 = 1;  dies._12 = 0;  dies._13 = 0;  dieses._14 = 0;   
464.   dieses._21 = 0;  dieses._22 = 1;  dieses._23 = 0;  dieses._24 = 0;   
465.   dieses._31 = 0;  dieses._32 = 0;  dieses._33 = 1;  dieses._34 = 0;   
466.   
467.   dieses._41 = x;  dies._42 = y;  dieses._43 = z;  dieses._44 = 1;   
468.   zurückgeben dies;   
469.  }, ​​  
470.   
471.  transpose33: Funktion() {   
472.   var t;   
473.   
474.   t = dieses._12;   
475.   dieses._12 = dieses._21;   
476.   dieses._21 = t;   
477.   
478.   t = dies._13;   
479.   dieses._13 = dieses._31;   
480.   dieses._31 = t;   
481.   
482.   t = dies._23;   
483.   dieses._23 = dieses._32;   
484.   dieses._32 = t;   
485.   
486.   zurückgeben dies;   
487.  },   
488.   
489.  // Rotation im OpenGL-Stil   
490.  glRotate: Funktion(Winkel, x, y, z) {   
491.   var s = Math.sin( angle );   
492.   var c = Math.cos( angle );   
493.   
494.   var xx = x * x;   
495.   var yy = y * y;   
496.   var zz = z * z;   
497.   var xy = x * y;   
498.   var yz = y * z;   
499.   var zx = z * x;   
500.   var xs = x * s;   
501.   var ys = y * s;   
502.   var zs = z * s;   
503.   var one_c = 1.0 - c;   
504. /*  
505.   this._11 = (one_c * xx)   c;  
506.   this._21 = (one_c * xy) - zs;  
507.   this._31 = (one_c * zx)   ys;  
508.   this._41 = 0;  
509.  
510.   this._12 = (one_c * xy)   zs;  
511.   this._22 = (one_c * yy)   c;  
512.   this._32 = (one_c * yz) - xs;  
513.   this._42 = 0;  
514.  
515.   this._13 = (one_c * zx) - ys;  
516.   this._23 = (one_c * yz)   xs;  
517.   this._33 = (one_c * zz)   c;  
518.   this._43 = 0;  
519.