HTML53D衣服摇摆动画特效_html5教程技巧

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板

1. <p 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. p>

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) <= (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++;}
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++] <<2;
105. poss[0].x = pos_buf[vbase++];
106. poss[0].y = pos_buf[vbase ];
108. vbase = ix_buf[ibase++] <<2;
109. poss[1].x = pos_buf[vbase++];
110. poss[1].y = pos_buf[vbase ];
112. vbase = ix_buf[ibase++] <<2;
113. poss[2].x = pos_buf[vbase++];
114. poss[2].y = pos_buf[vbase ];
116. // z component of cross product <0 ?
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) <0);
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++] <<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;}
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;}
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;}
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 <0 ?
181. if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) <0)
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) <= (w-1)) bw++;
243. if ((by[0]+bh) <= (h-1)) 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;