欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

HTML5 3D衣服摇摆动画特效_html5教程技巧

程序员文章站 2022-03-20 18:11:02
...
这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。

HTML5 3D衣服摇摆动画特效_html5教程技巧

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板
  1. div style="width:500px;margin:10px auto">
  2. canvas id="cv" width="480" height="300">canvas>
  3. p>"3D on 2D Canvas" demop>
  4. p>move cursor to pan / click to swingp>
  5. div>

P3D库JS代码，主要用来处理3D效果的

JavaScript Code复制内容到剪贴板
  1. window.P3D = {
  2. texture: null,
  3. g: null
  4. };
  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);
  12. }
  14. P3D.num_cmp = function(a,b){return a-b;}
  16. P3D.drawTriangle = function(poss, uvs, shade_clr) {
  17. var w = this.texture.width;
  18. var h = this.texture.height;
  20. var g = this.g;
  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 ];
  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 ];
  28. vA[0] *= w;
  29. vA[1] *= h;
  31. vB[0] *= w;
  32. vB[1] *= h;
  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];
  40. var im = m.getInvert();
  41. if (!im) return false;
  43. var a = im._11 * vAd[0] + im._12 * vBd[0];
  44. var b = im._21 * vAd[0] + im._22 * vBd[0];
  46. var c = im._11 * vAd[1] + im._12 * vBd[1];
  47. var d = im._21 * vAd[1] + im._22 * vBd[1];
  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;
  54. g.save();
  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();
  62. g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
  64. // bounds
  65. var bx = [wu, wu+vA[0], wu+vB[0]];
  66. var by = [hv, hv+vA[1], hv+vB[1]];
  68. bx.sort(P3D.num_cmp);
  69. by.sort(P3D.num_cmp);
  71. var bw = bx[2] - bx[0];
  72. var bh = by[2] - by[0];
  74. if ((bx[0]+bw)
  75. if ((by[0]+bh)
  76. if (bx[0] >= 1) {bx[0]--; bw++;}
  77. if (by[0] >= 1) {by[0]--; bh++;}
  79. g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);
  81. if (shade_clr) {
  82. g.fillStyle = shade_clr;
  83. g.fillRect(bx[0], by[0], bw, bh);
  84. }
  86. g.restore();
  88. return true;
  89. }
  91. P3D.drawTestByIndexBuffer = function(pos_buf, ix_buf, culling) {
  92. var g = this.g;
  94. if ((ix_buf.length%3) != 0)
  95. throw "invalid index buffer length!";
  97. var len = ix_buf.length/3;
  99. var i, ibase, vbase;
  100. var poss = [{},{},{}];
  101. g.strokeWidth = 1;
  102. for (i = 0, ibase = 0;i
  103. {
  104. vbase = ix_buf[ibase++]
  105. poss[0].x = pos_buf[vbase++];
  106. poss[0].y = pos_buf[vbase ];
  108. vbase = ix_buf[ibase++]
  109. poss[1].x = pos_buf[vbase++];
  110. poss[1].y = pos_buf[vbase ];
  112. vbase = ix_buf[ibase++]
  113. poss[2].x = pos_buf[vbase++];
  114. poss[2].y = pos_buf[vbase ];
  116. // z component of cross product
  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;
  123. var cull = ( (((Ax * Cy) - (Ay * Cx))*culling)
  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. }
  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. }
  143. var g = this.g;
  144. var m = new M22();
  146. if (!culling) culling = 0;
  148. if ((ix_buf.length%3) != 0)
  149. throw "invalid index buffer length!";
  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;
  155. for (i = 0, ibase = 0;i
  156. {
  157. tbase = ix_buf[ibase++]
  158. vbase = tbase
  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] 1)) {ibase += 2; continue;}
  163. tbase = ix_buf[ibase++]
  164. vbase = tbase
  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] 1)) {++ibase; continue;}
  169. tbase = ix_buf[ibase++]
  170. vbase = tbase
  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] 1)) {continue;}
  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 ];
  178. var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ];
  180. // z component of cross product
  181. if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling)
  182. continue;
  184. if (color_polygon) {
  185. g.fillStyle = uv_0u;
  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. }
  195. var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];
  196. var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];
  198. vA[0] *= w;
  199. vA[1] *= h;
  201. vB[0] *= w;
  202. vB[1] *= h;
  204. m._11 = vA[0];
  205. m._12 = vA[1];
  206. m._21 = vB[0];
  207. m._22 = vB[1];
  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 bh = by[2] - by[0];
  242. if ((bx[0]+bw)
  243. if ((by[0]+bh)
  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. }
  258. }
  260. function Vec3(_x, _y, _z)
  261. {
  262. this.x = _x || 0;
  263. this.y = _y || 0;
  264. this.z = _z || 0;
  265. }
  267. Vec3.prototype = {
  268. zero: function() {
  269. this.x = this.y = this.z = 0;
  270. },
  272. sub: function(v) {
  273. this.x -= v.x;
  274. this.y -= v.y;
  275. this.z -= v.z;
  277. return this;
  278. },
  280. add: function(v) {
  281. this.x += v.x;
  282. this.y += v.y;
  283. this.z += v.z;
  285. return this;
  286. },
  288. copyFrom: function(v) {
  289. this.x = v.x;
  290. this.y = v.y;
  291. this.z = v.z;
  293. return this;
  294. },
  296. norm:function() {
  297. return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
  298. },
  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. },
  311. smul: function(k) {
  312. this.x *= k;
  313. this.y *= k;
  314. this.z *= k;
  316. return this;
  317. },
  319. dpWith: function(v) {
  320. return this.x*v.x + this.y*v.y + this.z*v.z;
  321. },
  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);
  328. return this;
  329. },
  331. toString: function() {
  332. return this.x + ", " + this.y + "," + this.z;
  333. }
  334. }
  336. function M44(cpy)
  337. {
  338. if (cpy)
  339. this.copyFrom(cpy);
  340. else {
  341. this.ident();
  342. }
  343. }
  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;
  352. this._11 = this._22 = this._33 = this._44 = 1;
  354. return this;
  355. },
  357. copyFrom: function(m) {
  358. this._11 = m._11;
  359. this._12 = m._12;
  360. this._13 = m._13;
  361. this._14 = m._14;
  363. this._21 = m._21;
  364. this._22 = m._22;
  365. this._23 = m._23;
  366. this._24 = m._24;
  368. this._31 = m._31;
  369. this._32 = m._32;
  370. this._33 = m._33;
  371. this._34 = m._34;
  373. this._41 = m._41;
  374. this._42 = m._42;
  375. this._43 = m._43;
  376. this._44 = m._44;
  378. return this;
  379. },
  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. },
  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. },
  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;
  400. this._21 = 0;
  401. this._22 = 2*z_near/vh;
  402. this._23 = 0;
  403. this._24 = 0;
  405. this._31 = 0;
  406. this._32 = 0;
  407. this._33 = z_far/(z_far-z_near);
  408. this._34 = 1;
  410. this._41 = 0;
  411. this._42 = 0;
  412. this._43 = z_near*z_far/(z_near-z_far);
  413. this._44 = 0;
  415. return this;
  416. },
  418. lookAtLH: function(aUp, aFrom, aAt) {
  419. var aX = new Vec3();
  420. var aY = new Vec3();
  422. var aZ = new Vec3(aAt.x, aAt.y, aAt.z);
  423. aZ.sub(aFrom).normalize();
  425. aX.cp(aUp, aZ).normalize();
  426. aY.cp(aZ, aX);
  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;
  432. this._41 = -aFrom.dpWith(aX);
  433. this._42 = -aFrom.dpWith(aY);
  434. this._43 = -aFrom.dpWith(aZ);
  435. this._44 = 1;
  437. return this;
  438. },
  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;
  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;
  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;
  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;
  461. return this;
  462. },
  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;
  469. this._41 = x; this._42 = y; this._43 = z; this._44 = 1;
  470. return this;
  471. },
  473. transpose33: function() {
  474. var t;
  476. t = this._12;
  477. this._12 = this._21;
  478. this._21 = t;
  480. t = this._13;
  481. this._13 = this._31;
  482. this._31 = t;
  484. t = this._23;
  485. this._23 = this._32;
  486. this._32 = t;
  488. return this;
  489. },
  491. // OpenGL style rotation
  492. glRotate: function(angle, x, y, z) {
  493. var s = Math.sin( angle );
  494. var c = Math.cos( angle );
  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. this._41 = 0;
  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;
  517. this._13 = (one_c * zx) - ys;
  518. this._23 = (one_c * yz) + xs;
  519. this._33 = (one_c * zz) + c;
  520. this._43 = 0;
  522. HTML5 3D衣服摇摆动画特效_html5教程技巧

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • HTML5 3D衣服摇摆动画特效_html5教程技巧

    • 专题推荐

    相关标签： HTML5 3D 衣服摇摆

    上一篇： 探索HTML5本地存储功能运用技巧

    下一篇： 深入探究HTML5的History API_html5教程技巧

    推荐阅读