HTML5 3D clothes swing animation special effects_html5 tutorial skills

This is another 3D animation masterpiece based on HTML5 Canvas. It is a 3D clothes swing animation special effect that can flutter in the wind, which is very realistic. When we slide the mouse over the clothes, the clothes will have a swaying animation. When we click the mouse, the clothes will swing more violently.

Online demo Source code download

HTML code

XML/HTML CodeCopy content to clipboard

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 library JS code, mainly used to process 3D effects

JavaScript CodeCopy content to clipboard

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.   
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.  // bounds   
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.  return true;   
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 "invalid index buffer length!";   
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 component of cross product < 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 = new M22();   
145.   
146.  if (!culling) culling = 0;   
147.   
148.  if ((ix_buf.length%3) != 0)   
149.   throw "invalid index buffer length!";   
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; continue;}   
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; continue;}   
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 component of cross product < 0 ?   
181.   if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < 0)   
182.    continue;   
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.    continue;   
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.   // bounds   
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]--; bra ;}   
247.   g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bra);   
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. function Vec3(_x, _y, _z)   
261. {   
262.  this.x = _x || 0;   
263.  this.y = _y || 0;   
264.  this.z = _z || 0;   
265. }   
266.   
267. Vec3.prototype = {   
268.  zero: function() {   
269.   this.x = this.y = this.z = 0;   
270.  },   
271.   
272.  sub: function(v) {   
273.   this.x -= v.x;   
274.   this.y -= v.y;   
275.   this.z -= v.z;   
276.   
277.   return this;   
278.  },   
279.   
280.  add: function(v) {   
281.   this.x  = v.x;   
282.   this.y  = v.y;   
283.   this.z  = v.z;   
284.   
285.   return this;   
286.  },   
287.   
288.  copyFrom: function(v) {   
289.   this.x = v.x;   
290.   this.y = v.y;   
291.   this.z = v.z;   
292.   
293.   return this;   
294.  },   
295.   
296.  norm:function() {   
297.   return Math.sqrt(this.x*this.x   this.y*this.y   this.z*this.z);   
298.  },   
299.   
300.  normalize: function() {   
301.   var nrm = Math.sqrt(this.x*this.x   this.y*this.y   this.z*this.z);   
302.   if (nrm != 0)   
303.   {   
304.    this.x /= nrm;   
305.    this.y /= nrm;   
306.    this.z /= nrm;   
307.   }   
308.   return this;   
309.  },   
310.   
311.  smul: function(k) {   
312.   this.x *= k;   
313.   this.y *= k;   
314.   this.z *= k;   
315.   
316.   return this;   
317.  },   
318.   
319.  dpWith: function(v) {   
320.   return this.x*v.x   this.y*v.y   this.z*v.z;   
321.  },   
322.   
323.  cp: function(v, w) {   
324.   this.x = (w.y * v.z) - (w.z * v.y);   
325.   this.y = (w.z * v.x) - (w.x * v.z);   
326.   this.z = (w.x * v.y) - (w.y * v.x);   
327.   
328.   return this;   
329.  },   
330.   
331.  toString: function() {   
332.   return this.x   ", "   this.y   ","   this.z;   
333.  }   
334. }  
335.   
336. function M44(cpy)   
337. {   
338.  if (cpy)   
339.   this.copyFrom(cpy);   
340.  else {   
341.   this.ident();   
342.  }   
343. }   
344.   
345. M44.prototype = {   
346.  ident: function() {   
347.      this._12 = this._13 = this._14 = 0;   
348.   this._21 =       this._23 = this._24 = 0;   
349.   this._31 = this._32 =       this._34 = 0;   
350.   this._41 = this._42 = this._43 =       0;   
351.   
352.   this._11 = this._22 = this._33 = this._44 = 1;   
353.   
354.   return this;   
355.  },   
356.   
357.  copyFrom: function(m) {   
358.   this._11 = m._11;   
359.   this._12 = m._12;   
360.   this._13 = m._13;   
361.   this._14 = m._14;   
362.   
363.   this._21 = m._21;   
364.   this._22 = m._22;   
365.   this._23 = m._23;   
366.   this._24 = m._24;   
367.   
368.   this._31 = m._31;   
369.   this._32 = m._32;   
370.   this._33 = m._33;   
371.   this._34 = m._34;   
372.   
373.   this._41 = m._41;   
374.   this._42 = m._42;   
375.   this._43 = m._43;   
376.   this._44 = m._44;   
377.   
378.   return this;   
379.  },   
380.   
381.  transVec3: function(out, x, y, z) {   
382.   out[0] = x * this._11   y * this._21   z * this._31   this._41;   
383.   out[1] = x * this._12   y * this._22   z * this._32   this._42;   
384.   out[2] = x * this._13   y * this._23   z * this._33   this._43;   
385.   out[3] = x * this._14   y * this._24   z * this._34   this._44;   
386.  },   
387.   
388.  transVec3Rot: function(out, x, y, z) {   
389.   out[0] = x * this._11   y * this._21   z * this._31;   
390.   out[1] = x * this._12   y * this._22   z * this._32;   
391.   out[2] = x * this._13   y * this._23   z * this._33;   
392.  },   
393.   
394.  perspectiveLH: function(vw, vh, z_near, z_far) {   
395.   this._11 = 2.0*z_near/vw;   
396.   this._12 = 0;   
397.   this._13 = 0;   
398.   this._14 = 0;   
399.   
400.   this._21 = 0;   
401.   this._22 = 2*z_near/vh;   
402.   this._23 = 0;   
403.   this._24 = 0;   
404.   
405.   this._31 = 0;   
406.   this._32 = 0;   
407.   this._33 = z_far/(z_far-z_near);   
408.   this._34 = 1;   
409.   
410.   this._41 = 0;   
411.   this._42 = 0;   
412.   this._43 = z_near*z_far/(z_near-z_far);   
413.   this._44 = 0;   
414.   
415.   return this;   
416.  },   
417.   
418.  lookAtLH: function(aUp, aFrom, aAt) {   
419.   var aX = new Vec3();   
420.   var aY = new Vec3();   
421.   
422.   var aZ = new 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.   this._11 = aX.x;  this._12 = aY.x;  this._13 = aZ.x;  this._14 = 0;   
429.   this._21 = aX.y;  this._22 = aY.y;  this._23 = aZ.y;  this._24 = 0;   
430.   this._31 = aX.z;  this._32 = aY.z;  this._33 = aZ.z;  this._34 = 0;   
431.   
432.   this._41 = -aFrom.dpWith(aX);   
433.   this._42 = -aFrom.dpWith(aY);   
434.   this._43 = -aFrom.dpWith(aZ);   
435.   this._44 = 1;   
436.   
437.      return this;   
438.  },   
439.   
440.  mul: function(A, B) {   
441.   this._11 = A._11*B._11     A._12*B._21     A._13*B._31     A._14*B._41;   
442.   this._12 = A._11*B._12     A._12*B._22     A._13*B._32     A._14*B._42;   
443.   this._13 = A._11*B._13     A._12*B._23     A._13*B._33     A._14*B._43;   
444.   this._14 = A._11*B._14     A._12*B._24     A._13*B._34     A._14*B._44;   
445.   
446.   this._21 = A._21*B._11     A._22*B._21     A._23*B._31     A._24*B._41;   
447.   this._22 = A._21*B._12     A._22*B._22     A._23*B._32     A._24*B._42;   
448.   this._23 = A._21*B._13     A._22*B._23     A._23*B._33     A._24*B._43;   
449.   this._24 = A._21*B._14     A._22*B._24     A._23*B._34     A._24*B._44;   
450.   
451.   this._31 = A._31*B._11     A._32*B._21     A._33*B._31     A._34*B._41;   
452.   this._32 = A._31*B._12     A._32*B._22     A._33*B._32     A._34*B._42;   
453.   this._33 = A._31*B._13     A._32*B._23     A._33*B._33     A._34*B._43;   
454.   this._34 = A._31*B._14     A._32*B._24     A._33*B._34     A._34*B._44;   
455.   
456.   this._41 = A._41*B._11     A._42*B._21     A._43*B._31     A._44*B._41;   
457.   this._42 = A._41*B._12     A._42*B._22     A._43*B._32     A._44*B._42;   
458.   this._43 = A._41*B._13     A._42*B._23     A._43*B._33     A._44*B._43;   
459.   this._44 = A._41*B._14     A._42*B._24     A._43*B._34     A._44*B._44;   
460.   
461.   return this;   
462.  },   
463.   
464.  translate: function(x, y, z) {   
465.   this._11 = 1;  this._12 = 0;  this._13 = 0;  this._14 = 0;   
466.   this._21 = 0;  this._22 = 1;  this._23 = 0;  this._24 = 0;   
467.   this._31 = 0;  this._32 = 0;  this._33 = 1;  this._34 = 0;   
468.   
469.   this._41 = x;  this._42 = y;  this._43 = z;  this._44 = 1;   
470.   return this;   
471.  },   
472.   
473.  transpose33: function() {   
474.   var t;   
475.   
476.   t = this._12;   
477.   this._12 = this._21;   
478.   this._21 = t;   
479.   
480.   t = this._13;   
481.   this._13 = this._31;   
482.   this._31 = t;   
483.   
484.   t = this._23;   
485.   this._23 = this._32;   
486.   this._32 = t;   
487.   
488.   return this;   
489.  },   
490.   
491.  // OpenGL 스타일 회전   
492.  glRotate: 함수(각도, 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)   ys;  
510.   이._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.   이._42 = 0;  
516.  
517.   this._13 = (one_c * zx) - ys;  
518.   this._23 = (one_c * yz)   xs;  
519.   this._33 = (one_c * zz)   c;  
520.   이._43 = 0;  
521.