HTML5 3D vêtements swing animation effets spéciaux_html5 compétences tutoriel

Il s'agit d'un autre chef-d'œuvre d'animation 3D basé sur HTML5 Canvas. Il s'agit d'un effet spécial d'animation de balançoire de vêtements 3D qui peut flotter dans le vent, ce qui est très réaliste. Lorsque nous passons la souris sur les vêtements, les vêtements auront une animation de balancement. Lorsque nous cliquons sur la souris, les vêtements se balanceront plus violemment.

Démo en ligne Téléchargement du code source

Code HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div style="largeur : 500 px ; marge :10px auto">
2. <toile id="cv" largeur="480" hauteur="300">toile> 
3. <p>Démo "3D sur toile 2D"< /p>
4. <p>déplacer le curseur pour faire un panoramique / cliquer pour balancer< ;/p> 
5. div>

Code JS de la bibliothèque P3D, principalement utilisé pour traiter les effets 3D

Code JavaScriptCopier le contenu dans le presse-papiers

1. window.P3D = {   
2.  texture : null,   
3.  g : null  
4. } ;   
5.   
6. P3D.clear = fonction(f, w, h) {   
7.  var g = ceci.g;   
8.  g.beginPath();   
9.  g.fillStyle = f;   
10.  g.fillRect(0, 0, w, h);   
11.   
12. }   
13.   
14. P3D.num_cmp = fonction(a,b){retour a-b;}  
15.   
16. P3D.drawTriangle = fonction(poss, uvs, shade_clr) {   
17.  var w = ce.texture.width;   
18.  var h = ce.texture.height;   
19.   
20.  var g = ceci.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 = nouveau 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.  si (!im) retour faux;   
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.  // limites   
65.  var bx = [wu, wu vA[0], wu vB[0]];   
66.  var par = [hv, hv vA[1], hv vB[1]];   
67.   
68.  bx.sort(P3D.num_cmp);   
69.  by.sort(P3D.num_cmp);   
70.   
71.  var bw = bx[2] - bx[0];   
72.  var bh = par[2] - par[0];   
73.   
74.  if ((bx[0] bw) <= (w-1)) bw ;   
75.  if ((by[0] bh) <= (h-1)) bh ;   
76.  si (bx[0] >= 1) {bx[0]--; p.c. ;}   
77.  if (par[0] >= 1) {par[0]--; bh ;}   
78.   
79.  g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], pc, bh );   
80.   
81.  si (shade_clr) {   
82.   g.fillStyle = shade_clr;   
83.   g.fillRect(bx[0], by[0], bw, bh);   
84.  }   
85.   
86.  g.restore();   
87.   
88.  retour vrai ;   
89. }   
90.   
91. P3D.drawTestByIndexBuffer = fonction(pos_buf, ix_buf, culling) {   
92.  var g = ceci.g;   
93.   
94.  if ((ix_buf.length%3) != 0)   
95.   lancer "longueur du tampon d'index invalide !" ;   
96.   
97.  var len = ix_buf.length/3;   
98.   
99.  var i, ibase, vbase ;   
100.  var poss = [{},{},{}];   
101.  g.StrokeWidth = 1 ;   
102.  pour (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 composant de produits croisés < 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))*culling) < 0);   
124.   
125.   g.beginPath();   
126.   g.StrokeStyle = élimination ? "#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 = fonction(pos_buf, ix_buf, tx_buf, culling, z_clip) {   
136.  var w, h;   
137.  var color_polygon = !ce.texture;   
138.  si (ce.texture) {   
139.   w = ce.texture.width;   
140.   h = ce.texture.height;   
141.  }  
142.   
143.  var g = ceci.g;   
144.  var m = nouveau M22();   
145.   
146.  if (!culling) culling = 0 ;   
147.   
148.  if ((ix_buf.length%3) != 0)   
149.   lancer "longueur du tampon d'index invalide !" ;   
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.  pour (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.   if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {ibase  = 2; continuer;}   
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.   if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) { ibase; continuer;}   
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.   if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {continuer;}  
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 composant de produits croisés < 0 ?   
181.   if( ((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*abattage) < ; 0)   
182.    continuer ;   
183.   
184.   si (color_polygon) {   
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.    continuer ;   
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.   si (!im) { continuer;}  
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.   // limites   
233.   var bx = [wu, wu vA[0], wu vB[0]];   
234.   var par = [hv, hv vA[1], hv vB[1]];   
236.   bx.sort(P3D.num_cmp);   
237.   by.sort(P3D.num_cmp);   
239.   var bw = bx[2] - bx[0];   
240.   var soutien-gorge = by[2] - by[0];   
242.   if ((bx[0] bw) <= (w-1)) bw ;   
243.   if ((by[0] soutien-gorge) <= (h-1)) soutien-gorge ;   
244.   si (bx[0] >= 1) {bx[0]--; p.c. ;}   
245.   if (par[0] >= 1) {par[0]--; soutien-gorge ;}   
247.   g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], pc, soutien-gorge);   
248. /*
249.   si (shade_clr) {  
250.    g.fillStyle = shade_clr;  
251.    g.fillRect(bx[0], by[0], bw, bh);  
252.   }  
253. */
254.   g.restore();   
256. }  
257.   
258. }   
259.   
260. fonction Vec3(_x, _y, _z)   
261. {   
262.  ce.x = _x || 0 ;   
263.  ce.y = _y || 0 ;   
264.  ce.z = _z || 0 ;   
265. }   
266.   
267. Vec3.prototype = {   
268.  zéro : fonction() {   
269.   ce.x = ce.y = ce.z = 0 ;   
270.  }, ​​  
271.   
272.  sous : fonction(v) {   
273.   ce.x -= v.x;   
274.   ce.y -= v.y;   
275.   ce.z -= v.z;   
276.   
277.   retourner ceci ;   
278.  }, ​​  
279.   
280.  ajouter : fonction(v) {   
281.   ceci.x  = v.x;   
282.   ce.y  = v.y;   
283.   ce.z  = v.z;   
284.   
285.   retourner ceci ;   
286.  }, ​​  
287.   
288.  copyFrom : fonction(v) {   
289.   ce.x = v.x;   
290.   ce.y = v.y;   
291.   ce.z = v.z;   
292.   
293.   retourner ceci ;   
294.  }, ​​  
295.   
296.  norme :fonction() {   
297.   return Math.sqrt(this.x*this.x   ce.y*ce.y   ce.z *ce.z);   
298.  },   
299.   
300.  normaliser : fonction() {   
301.   var nrm = Math.sqrt(ce.x*ce.x   ce.y*ce.y   ce .z*ce.z);   
302.   si (nrm != 0)   
303.   {   
304.    ce.x /= nrm;   
305.    ce.y /= nrm;   
306.    ceci.z /= nrm;   
307.   }   
308.   retourner ceci ;   
309.  }, ​​  
310.   
311.  smul : fonction(k) {   
312.   ce.x *= k ;   
313.   ce.y *= k ;   
314.   ce.z *= k ;   
315.   
316.   retourner ceci ;   
317.  }, ​​  
318.   
319.  dpWith : fonction(v) {   
320.   retourner ce.x*v.x   ce. y*v.y   ceci.z*v.z;   
321.  }, ​​  
322.   
323.  cp : fonction(v, w) {   
324.   ce.x = (w.y * v.z) - (w.z * v.y);   
325.   ce.y = (w.z * v.x) - (w.x * v.z);   
326.   ce.z = (w.x * v.y) - (w.y * v.x);   
327.   
328.   retourner ceci ;   
329.  }, ​​  
330.   
331.  toString : fonction() {   
332.   retourner ce.x   ", "   ce.y   ","   ce.z;   
333.  }   
334. }  
335.   
336. fonction M44(cpy)   
337. {   
338.  si (cpy)   
339.   ceci.copyFrom(cpy);   
340.  autre {   
341.   ce.ident();   
342.  }   
343. }   
344.   
345. M44.prototype = {   
346.  ident : fonction() {   
347.      ceci._12 = ceci._13 = ceci._14 = 0 ;   
348.   ceci._21 =       ceci._23 = ceci._24 = 0 ;   
349.   ceci._31 = ceci._32 =       ceci._34 = 0 ;   
350.   ceci._41 = ceci._42 = ceci._43 =       0 ;   
351.   
352.   ceci._11 = ceci._22 = ceci._33 = ceci._44 = 1 ;   
353.   
354.   retourner ceci ;   
355.  },   
356.   
357.  copyFrom : fonction(m) {   
358.   ce._11 = m._11;   
359.   ceci._12 = m._12;   
360.   ce._13 = m._13;   
361.   ceci._14 = m._14;   
362.   
363.   ceci._21 = m._21;   
364.   ceci._22 = m._22;   
365.   ceci._23 = m._23;   
366.   ceci._24 = m._24;   
367.   
368.   ce._31 = m._31;   
369.   ceci._32 = m._32;   
370.   ceci._33 = m._33;   
371.   ceci._34 = m._34;   
372.   
373.   ceci._41 = m._41;   
374.   ceci._42 = m._42;   
375.   ceci._43 = m._43;   
376.   ceci._44 = m._44;   
377.   
378.   retourner ceci ;   
379.  }, ​​  
380.   
381.  transVec3 : fonction(out, x, y, z) {   
382.   out[0] = x * ceci._11   y * ceci._21   z *  ce._31   ce._41;   
383.   out[1] = x * ce._12   y * ce._22   z *  ce._32   ce._42;   
384.   out[2] = x * ce._13   y * ce._23   z *  ce._33   ce._43;   
385.   out[3] = x * ceci._14   y * ceci._24   z *  ce._34   ce._44;   
386.  },   
387.   
388.  transVec3Rot : fonction(out, x, y, z) {   
389.   out[0] = x * ceci._11   y * ceci._21   z *  ce._31;   
390.   out[1] = x * ce._12   y * ce._22   z *  ce._32;   
391.   out[2] = x * ce._13   y * ce._23   z *  ce._33;   
392.  }, ​​  
393.   
394.  perspectiveLH : fonction(vw, vh, z_near, z_far) {   
395.   ce._11 = 2.0*z_near/vw;   
396.   ce._12 = 0 ;   
397.   ceci._13 = 0 ;   
398.   ceci._14 = 0 ;   
399.   
400.   ceci._21 = 0 ;   
401.   ce._22 = 2*z_near/vh;   
402.   ceci._23 = 0 ;   
403.   ceci._24 = 0 ;   
404.   
405.   ce._31 = 0 ;   
406.   ce._32 = 0 ;   
407.   ce._33 = z_far/(z_far-z_near);   
408.   ce._34 = 1 ;   
409.   
410.   ceci._41 = 0 ;   
411.   ceci._42 = 0 ;   
412.   ce._43 = z_near*z_far/(z_near-z_far);   
413.   ceci._44 = 0 ;   
414.   
415.   retourner ceci ;   
416.  },   
417.   
418.  lookAtLH : fonction(aUp, aFrom, aAt) {   
419.   var aX = nouveau Vec3();   
420.   var aY = nouveau Vec3();   
421.   
422.   var aZ = nouveau Vec3(aAt.x, aAt.y, aAt.z);   
423.   aZ.sub(aFrom).normalize();   
424.   
425.   aX.cp(aUp, aZ).normalize();   
426.   aY.cp(aZ, aX);   
427.   
428.   ceci._11 = aX.x;  ce._12 = aY.x;  ce._13 = aZ.x;  ce._14 = 0;   
429.   ceci._21 = aX.y;  ce._22 = aY.y;  ce._23 = aZ.y;  ce._24 = 0 ;   
430.   ce._31 = aX.z;  ce._32 = aY.z;  ce._33 = aZ.z;  ce._34 = 0;   
431.   
432.   ce._41 = -aFrom.dpWith(aX);   
433.   ceci._42 = -aFrom.dpWith(aY);   
434.   ceci._43 = -aFrom.dpWith(aZ);   
435.   ceci._44 = 1 ;   
436.   
437.      retourner ceci ;   
438.  },   
439.   
440.  mul : fonction(A, B) {   
441.   ce._11 = A._11*B._11     A._12*B._21     A._13*B._31     A._14*B._41 ;   
442.   ce._12 = A._11*B._12     A._12*B._22     A._13*B._32     A._14*B._42 ;   
443.   ceci._13 = A._11*B._13     A._12*B._23     A._13*B._33     A._14*B._43 ;   
444.   ceci._14 = A._11*B._14     A._12*B._24     A._13*B._34     A._14*B._44 ;   
445.   
446.   ce._21 = A._21*B._11     A._22*B._21     A._23*B._31     A._24*B._41 ;   
447.   ceci._22 = A._21*B._12     A._22*B._22     A._23*B._32     A._24*B._42 ;   
448.   ceci._23 = A._21*B._13     A._22*B._23     A._23*B._33     A._24*B._43 ;   
449.   ceci._24 = A._21*B._14     A._22*B._24     A._23*B._34     A._24*B._44 ;   
450.   
451.   ceci._31 = A._31*B._11     A._32*B._21     A._33*B._31     A._34*B._41 ;   
452.   ceci._32 = A._31*B._12     A._32*B._22     A._33*B._32     A._34*B._42 ;   
453.   ceci._33 = A._31*B._13     A._32*B._23     A._33*B._33     A._34*B._43 ;   
454.   ceci._34 = A._31*B._14     A._32*B._24     A._33*B._34     A._34*B._44 ;   
455.   
456.   ceci._41 = A._41*B._11     A._42*B._21     A._43*B._31     A._44*B._41 ;   
457.   ce._42 = A._41*B._12     A._42*B._22     A._43*B._32     A._44*B._42 ;   
458.   ceci._43 = A._41*B._13     A._42*B._23     A._43*B._33     A._44*B._43 ;   
459.   ceci._44 = A._41*B._14     A._42*B._24     A._43*B._34     A._44*B._44 ;   
460.   
461.   retourner ceci ;   
462.  },   
463.   
464.  翻譯： 函數(x, y, z) {   
465.   這._11 = 1;  這. 🎜>._13 = 0;  這._14 = 0；      
這
466. ._21 = 0;  ._23 = 0;  這._24 = 0;      這._31 = 0；  這._32 = 0； 🎜>
._33 = 1；  
467. 這._34 = 0;         這._41 = x；  這個._🎜>
._43 = z;  
468. 這
._44 = 1；   
469.   回 這;     }、  
470.     transpose33: 函數() {   
471.   var
472.  t;   
473.      t = 這
474. ._12;      這個
475. ._12 = 這
476. ._21；     這._21 = t;   
477.      t = 這._13;   
478.   這個._13 = 
479. 這個._31；  
480.   這._31 = t;   
481.      t = 這._23;   
482.   這._23 = 這
483. ._32；     
484. 這._32 = t;      
485.   回 這;   
486.  },
488. // OpenGL スタイルの回転
489. glRotate: 関数(角度, x, y, z) {
490. var s = Math.sin( angle );   
491. var c = Math.cos( angle );   
493. var xx = x * x;   
494. var yy = y * y;   
495. var zz = z * z;   
496. var xy = x * y;   
497. var yz = y * z;   
498. var zx = z * x;   
499. var xs = x * s;   
500. var ys = y * s;   
501. var zs = z * s;   
502. var one_c = 1.0 - c;   
503. /*
504. this._11 = (one_c * xx) c;
505. this._21 = (one_c * xy) - zs;
506. this._31 = (one_c * zx) ys;
507. this._41 = 0;
509. this._12 = (one_c * xy) zs;
510. this._22 = (one_c * yy) c;
511. this._32 = (one_c * yz) - xs;
512. this._42 = 0;
514. this._13 = (one_c * zx) - ys;
515. this._23 = (one_c * yz) xs;
516. this._33 = (one_c * zz) c;
517. this._43 = 0;