HTML5 3D-Kleiderschaukel-Animation, Spezialeffekte_html5-Tutorial-Fähigkeiten

Dies ist ein weiteres 3D-Animationsmeisterwerk, das auf HTML5 Canvas basiert. Es handelt sich um einen 3D-Kleiderschaukel-Spezialeffekt, der im Wind flattern kann, was sehr realistisch ist. Wenn wir mit der Maus über die Kleidung fahren, schwankt die Kleidung. Wenn wir mit der Maus klicken, schwingt die Kleidung heftiger.

Online-Demo Quellcode-Download

HTML-Code

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div style="width:500px;margin :10px auto">
2. <Leinwand id="cv" Breite="480" Höhe="300">Leinwand> 
3. <p>Demo „3D auf 2D-Leinwand“< /p>
4. <p>Cursor zum Schwenken bewegen / klicken zum Schwenken< ;/p> 
5. div>

JS-Code der P3D-Bibliothek, der hauptsächlich zur Verarbeitung von 3D-Effekten verwendet wird

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. window.P3D = {   
2.  Textur: null,   
3.  g: null  
4. };   
5.   
6. P3D.clear = Funktion(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 = Funktion(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 = neu 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.   
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.  // Grenzen   
65.  var bx = [wu, wu vA[0], wu vB[0]];   
66.  var by = [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 = by[2] - by[0];   
73.   
74.  if ((bx[0] bw) <= (w-1)) bw ;   
75.  if ((by[0] bh) <= (h-1)) bh ;   
76.  if (bx[0] >= 1) {bx[0]--; bw ;}   
77.  if (by[0] >= 1) {by[0]--; bh ;}   
78.   
79.  g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);   
80.   
81.  if (shade_clr) {   
82.   g.fillStyle = shade_clr;   
83.   g.fillRect(bx[0], by[0], bw, bh);   
84.  }   
85.   
86.  g.restore();   
87.   
88.  zurück wahr;   
89. }   
90.   
91. P3D.drawTestByIndexBuffer = function(pos_buf, ix_buf, culling) {   
92.  var g = this.g;   
93.   
94.  if ((ix_buf.length%3) != 0)   
95.   throw "ungültige Indexpufferlänge!";   
96.   
97.  var len = ix_buf.length/3;   
98.   
99.  var i, ibase, vbase;   
100.  var poss = [{},{},{}];   
101.  g.StrokeWidth = 1;   
102.  for (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-Komponente des Produktübergreifenden < 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 = 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 = function(pos_buf, ix_buf, tx_buf, culling, z_clip) {   
136.  var w, h;   
137.  var color_polygon = !this.texture;   
138.  if (this.texture) {   
139.   w = this.texture.width;   
140.   h = this.texture.height;   
141.  }  
142.   
143.  var g = this.g;   
144.  var m = neu M22();   
145.   
146.  if (!culling) culling = 0;   
147.   
148.  if ((ix_buf.length%3) != 0)   
149.   throw "ungültige Indexpufferlänge!";   
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.  for (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; weiter;}   
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; weiter;}   
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)) {continue;}  
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-Komponente des Produktübergreifenden < 0 ?   
181.   if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < ;  0)   
182.    weiter;   
183.   
184.   if (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.    weiter;   
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.   if (!im) { continue;}  
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.   // Grenzen   
233.   var bx = [wu, wu vA[0], wu vB[0]];   
234.   var by = [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 bra = by[2] - by[0];   
242.   if ((bx[0] bw) <= (w-1)) bw ;   
243.   if ((by[0] bra) <= (h-1)) bra ;   
244.   if (bx[0] >= 1) {bx[0]--; bw ;}   
245.   if (by[0] >= 1) {by[0]--; BH ;}   
247.   g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);   
248. /*
249.   if (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. Funktion Vec3(_x, _y, _z)   
261. {   
262.  dieses.x = _x || 0;   
263.  dieses.y = _y || 0;   
264.  dieses.z = _z || 0;   
265. }   
266.   
267. Vec3.prototype = {   
268.  Null: Funktion() {   
269.   dieses.x = dieses.y = dieses.z = 0;   
270.  }, ​​  
271.   
272.  sub: Funktion(v) {   
273.   dieses.x -= v.x;   
274.   dieses.y -= v.y;   
275.   dieses.z -= v.z;   
276.   
277.   zurückgeben dies;   
278.  }, ​​  
279.   
280.  hinzufügen: Funktion(v) {   
281.   dieses.x  = v.x;   
282.   dieses.y  = v.y;   
283.   dieses.z  = v.z;   
284.   
285.   zurückgeben dies;   
286.  }, ​​  
287.   
288.  copyFrom: function(v) {   
289.   dieses.x = v.x;   
290.   dieses.y = v.y;   
291.   dieses.z = v.z;   
292.   
293.   zurückgeben dies;   
294.  }, ​​  
295.   
296.  norm:Funktion() {   
297.   return Math.sqrt(this.x*this.x   dieses.y*dieses.y   dieses.z *dies.z);   
298.  },   
299.   
300.  normalisieren: Funktion() {   
301.   var nrm = Math.sqrt(this.x*this.x   dieses.y*dieses.y   dieses .z*dies.z);   
302.   if (nrm != 0)   
303.   {   
304.    dieses.x /= nrm;   
305.    dieses.y /= nrm;   
306.    dieses.z /= nrm;   
307.   }   
308.   zurückgeben dies;   
309.  }, ​​  
310.   
311.  smul: Funktion(k) {   
312.   dieses.x *= k;   
313.   dieses.y *= k;   
314.   dieses.z *= k;   
315.   
316.   zurückgeben dies;   
317.  }, ​​  
318.   
319.  dpWith: function(v) {   
320.   zurückgeben dieses.x*v.x   dieses. y*v.y   dies.z*v.z;   
321.  }, ​​  
322.   
323.  cp: Funktion(v, w) {   
324.   dies.x = (w.y * v.z) - (w.z * v.y);   
325.   dies.y = (w.z * v.x) - (w.x * v.z);   
326.   dies.z = (w.x * v.y) - (w.y * v.x);   
327.   
328.   zurückgeben dies;   
329.  }, ​​  
330.   
331.  toString: function() {   
332.   zurück dies.x   ", "   dieses.y   ","   dieses.z;   
333.  }   
334. }  
335.   
336. Funktion M44(cpy)   
337. {   
338.  if (cpy)   
339.   dieses.copyFrom(cpy);   
340.  sonst {   
341.   dieses.ident();   
342.  }   
343. }   
344.   
345. M44.prototype = {   
346.  ident: function() {   
347.      dieses._12 = dieses._13 = dieses._14 = 0;   
348.   dieses._21 =       dieses._23 = dieses._24 = 0;   
349.   dieses._31 = dieses._32 =       dieses._34 = 0;   
350.   dieses._41 = dieses._42 = dieses._43 =       0;   
351.   
352.   dieses._11 = dieses._22 = dieses._33 = dieses._44 = 1;   
353.   
354.   zurückgeben dies;   
355.  },   
356.   
357.  copyFrom: function(m) {   
358.   dieses._11 = m._11;   
359.   dieses._12 = m._12;   
360.   dieses._13 = m._13;   
361.   dieses._14 = m._14;   
362.   
363.   dieses._21 = m._21;   
364.   dieses._22 = m._22;   
365.   dieses._23 = m._23;   
366.   dieses._24 = m._24;   
367.   
368.   dieses._31 = m._31;   
369.   dieses._32 = m._32;   
370.   dieses._33 = m._33;   
371.   dieses._34 = m._34;   
372.   
373.   dieses._41 = m._41;   
374.   dieses._42 = m._42;   
375.   dieses._43 = m._43;   
376.   dieses._44 = m._44;   
377.   
378.   zurückgeben dies;   
379.  }, ​​  
380.   
381.  transVec3: Funktion(out, x, y, z) {   
382.   out[0] = x * dieses._11   y * dieses._21   z *  dieses._31   dieses._41;   
383.   out[1] = x * dieses._12   y * dieses._22   z *  dieses._32   dieses._42;   
384.   out[2] = x * dieses._13   y * dieses._23   z *  dieses._33   dieses._43;   
385.   out[3] = x * dieses._14   y * dieses._24   z *  dieses._34   dieses._44;   
386.  },   
387.   
388.  transVec3Rot: Funktion(out, x, y, z) {   
389.   out[0] = x * dieses._11   y * dieses._21   z *  dieses._31;   
390.   out[1] = x * dieses._12   y * dieses._22   z *  dieses._32;   
391.   out[2] = x * dieses._13   y * dieses._23   z *  dieses._33;   
392.  }, ​​  
393.   
394.  PerspektiveLH: Funktion(vw, vh, z_near, z_far) {   
395.   dieses._11 = 2.0*z_near/vw;   
396.   dieses._12 = 0;   
397.   dieses._13 = 0;   
398.   dieses._14 = 0;   
399.   
400.   dieses._21 = 0;   
401.   dies._22 = 2*z_near/vh;   
402.   dieses._23 = 0;   
403.   dieses._24 = 0;   
404.   
405.   dieses._31 = 0;   
406.   dieses._32 = 0;   
407.   dies._33 = z_far/(z_far-z_near);   
408.   dieses._34 = 1;   
409.   
410.   dieses._41 = 0;   
411.   dieses._42 = 0;   
412.   dies._43 = z_near*z_far/(z_near-z_far);   
413.   dieses._44 = 0;   
414.   
415.   zurückgeben dies;   
416.  },   
417.   
418.  lookAtLH: function(aUp, aFrom, aAt) {   
419.   var aX = neu Vec3();   
420.   var aY = neu Vec3();   
421.   
422.   var aZ = neu 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.   dieses._11 = aX.x;  dies._12 = aY.x;  dieses._13 = aZ.x;  dieses._14 = 0;   
429.   dieses._21 = aX.y;  dieses._22 = aY.y;  dies._23 = aZ.y;  dieses._24 = 0;   
430.   dieses._31 = aX.z;  dies._32 = aY.z;  dieses._33 = aZ.z;  dieses._34 = 0;   
431.   
432.   dies._41 = -aFrom.dpWith(aX);   
433.   dies._42 = -aFrom.dpWith(aY);   
434.   dies._43 = -aFrom.dpWith(aZ);   
435.   dieses._44 = 1;   
436.   
437.      zurückgeben dies;   
438.  },   
439.   
440.  mul: Funktion(A, B) {   
441.   dieses._11 = A._11*B._11     A._12*B._21     A._13*B._31     A._14*B._41 ;   
442.   dies._12 = A._11*B._12     A._12*B._22     A._13*B._32     A._14*B._42 ;   
443.   dies._13 = A._11*B._13     A._12*B._23     A._13*B._33     A._14*B._43 ;   
444.   dies._14 = A._11*B._14     A._12*B._24     A._13*B._34     A._14*B._44 ;   
445.   
446.   dies._21 = A._21*B._11     A._22*B._21     A._23*B._31     A._24*B._41 ;   
447.   dies._22 = A._21*B._12     A._22*B._22     A._23*B._32     A._24*B._42 ;   
448.   dies._23 = A._21*B._13     A._22*B._23     A._23*B._33     A._24*B._43 ;   
449.   dies._24 = A._21*B._14     A._22*B._24     A._23*B._34     A._24*B._44 ;   
450.   
451.   dies._31 = A._31*B._11     A._32*B._21     A._33*B._31     A._34*B._41 ;   
452.   dieses._32 = A._31*B._12     A._32*B._22     A._33*B._32     A._34*B._42 ;   
453.   dies._33 = A._31*B._13     A._32*B._23     A._33*B._33     A._34*B._43 ;   
454.   dies._34 = A._31*B._14     A._32*B._24     A._33*B._34     A._34*B._44 ;   
455.   
456.   dies._41 = A._41*B._11     A._42*B._21     A._43*B._31     A._44*B._41 ;   
457.   dies._42 = A._41*B._12     A._42*B._22     A._43*B._32     A._44*B._42 ;   
458.   dies._43 = A._41*B._13     A._42*B._23     A._43*B._33     A._44*B._43 ;   
459.   dieses._44 = A._41*B._14     A._42*B._24     A._43*B._34     A._44*B._44 ;   
460.   
461.   zurückgeben dies;   
462.  },   
463.   
464.  traduire : fonction(x, y, z) {   
465.   ceci._11 = 1 ;  ce._12 = 0 ;  ce._13 = 0 ;  ce._14 = 0;   
466.   ceci._21 = 0 ;  ce._22 = 1 ;  ce._23 = 0 ;  ce._24 = 0 ;   
467.   ce._31 = 0 ;  ce._32 = 0;  ce._33 = 1 ;  ce._34 = 0;   
468.   
469.   ce._41 = x;  ce._42 = y ;  ce._43 = z ;  ce._44 = 1 ;   
470.   retourner ceci ;   
471.  }, ​​  
472.   
473.  transpose33 : fonction() {   
474.   var t;   
475.   
476.   t = ce._12;   
477.   ce._12 = ce._21;   
478.   ce._21 = t ;   
479.   
480.   t = ce._13;   
481.   ce._13 = ce._31;   
482.   ceci._31 = t ;   
483.   
484.   t = ce._23;   
485.   ce._23 = ce._32;   
486.   ceci._32 = t;   
487.   
488.   retourner ceci ;   
489.  },   
490.   
491.  // Rotation de style OpenGL   
492.  glRotate : fonction(angle, x, y, z) {   
493.   var s = Math.sin( angle );   
494.   var c = Math.cos( angle );   
495.   
496.   var xx = x * x;   
497.   var yy = y * y;   
498.   var zz = z * z;   
499.   var xy = x * y;   
500.   var yz = y * z;   
501.   var zx = z * x;   
502.   var xs = x * s;   
503.   var ys = y * s;   
504.   var zs = z * s;   
505.   var one_c = 1.0 - c;   
506. /*  
507.   this._11 = (one_c * xx)   c;  
508.   this._21 = (one_c * xy) - zs ;  
509.   this._31 = (one_c * zx)   oui ;  
510.   this._41 = 0;  
511.  
512.   this._12 = (one_c * xy)   zs;  
513.   this._22 = (one_c * yy)   c ;  
514.   this._32 = (one_c * yz) - xs ;  
515.   this._42 = 0;  
516.  
517.   this._13 = (one_c * zx) - oui ;  
518.   this._23 = (one_c * yz)   xs ;  
519.   this._33 = (one_c * zz)   c;  
520.   this._43 = 0;  
521.