HTML5 3D 服スイングアニメーション特殊効果_html5 チュートリアル スキル

これも HTML5 キャンバスに基づいた 3D アニメーションの傑作です。風になびく 3D の服のスイング アニメーションの特殊効果で、非常にリアルです。服の上でマウスをスライドさせると、服が揺れるアニメーションが表示されます。マウスをクリックすると、服がさらに激しく揺れます。

オンラインデモ ソースコードのダウンロード

HTML コード

XML/HTML コードコンテンツをクリップボードにコピー

1. <div style="width:500px;margin :10px 自動">
2. <キャンバス id="cv" 幅="480" 高さ="300">キャンバス>
3. <p>「2D キャンバス上の 3D」デモ< /p>
4. <p>カーソルを移動してパン/クリックしてスイング< ;/p>
5. div>

P3D ライブラリ JS コード。主に 3D 効果の処理に使用されます

JavaScript コードコンテンツをクリップボードにコピーします

1. window.P3D = {
2. テクスチャ: null、
3. g: null
4. };   
6. P3D.clear = 関数(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 = 関数(a,b){return a-b;}  
16. P3D.drawTriangle = 関数(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. // 境界
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) <= (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 = 関数(pos_buf, ix_buf, culling) {
92. var g = this.g;   
94. if ((ix_buf.length%3) != 0)
95. throw 「インデックスバッファの長さが無効です!」;   
97. var len = ix_buf.length/3;   
99. var i, ibase, vbase;   
100. var poss = [{},{},{}];   
101. g.ストローク幅 = 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 ];   
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 コンポーネント 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.ストロークスタイル = カリング ? "#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.ストローク();   
132. }
133. }
135. P3D.drawByIndexBuffer = 関数(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 (!カリング) カリング = 0;   
148. if ((ix_buf.length%3) != 0)
149. throw 「インデックスバッファの長さが無効です!」;   
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 < 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; 続行;}
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; 続行;}
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)) {続き;}  
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 コンポーネント 0?
181. if((((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*カリング) < ; 0)
182. 続行;   
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. 続行;   
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) { 続行;}  
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. // 境界
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 ブラジャー = 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]--; ブラ ;}
247. g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw、ブラ）;   
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. 関数 Vec3(_x, _y, _z)
261. {
262. これ.x = _x || 0;   
263. これ.y = _y || 0;   
264. これ.z = _z || 0;   
265. }
267. Vec3.prototype = {
268. ゼロ: 関数() {
269. これ.x = これ.y = これ.z = 0;   
270. }、
272. sub: 関数(v) {
273. これ.x -= v.x;   
274. これ.y -= v.y;   
275. これ.z -= v.z;   
277. 返却 これ;   
278. }、
280. 追加: 関数(v) {
281. これ.x = v.x;   
282. これ.y = v.y;   
283. これ.z = v.z;   
285. 返却 これ;   
286. }、
288. copyFrom: 関数(v) {
289. これ.x = v.x;   
290. これ.y = v.y;   
291. これ.z = v.z;   
293. 返却 これ;   
294. }、
296. ノルム:関数() {
297. return Math.sqrt(this.x*this.x これ.y*これ.y これ.z *これ.z);   
298. },
300. 正規化: 関数() {
301. var nrm = Math.sqrt(this.x*this.x これ.y*これ.y これ .z*これ.z);   
302. if (nrm != 0)
303. {
304. これ.x /= nrm;   
305. これ.y /= nrm;   
306. これ.z /= nrm;   
307. }
308. 返却 これ;   
309. }、
311. smul: 関数(k) {
312. これ.x *= k;   
313. これ.y *= k;   
314. これ.z *= k;   
316. 返却 これ;   
317. }、
319. dpWith: 関数(v) {
320. return this.x*v.x this。 y*v.y これ.z*v.z;   
321. }、
323. cp: 関数(v, w) {
324. これ.x = (w.y * v.z) - (w.z * v.y);   
325. これ.y = (w.z * v.x) - (w.x * v.z);   
326. これ.z = (w.x * v.y) - (w.y * v.x);   
328. 返却 これ;   
329. }、
331. toString: function() {
332. return this.x ", " これ.y "," これ.z;   
333. }
334. }  
336. 関数 M44(cpy)
337. {
338. if (cpy)
339. this.copyFrom(cpy);   
340. else {
341. this.ident();   
342. }
343. }
345. M44.prototype = {
346. ident: 関数() {
347. これ._12 = これ._13 = これ._14 = 0;   
348. これ._21 = これ._23 = これ._24 = 0;   
349. これ._31 = これ._32 = これ._34 = 0;   
350. これ._41 = これ._42 = これ._43 = 0;   
352. これ._11 = これ._22 = これ._33 = これ._44 = 1;   
354. 返却 これ;   
355. },
357. copyFrom: 関数(m) {
358. これ._11 = m._11;   
359. これ._12 = m._12;   
360. これ._13 = m._13;   
361. これ._14 = m._14;   
363. これ._21 = m._21;   
364. これ._22 = m._22;   
365. これ._23 = m._23;   
366. これ._24 = m._24;   
368. これ._31 = m._31;   
369. これ._32 = m._32;   
370. これ._33 = m._33;   
371. これ._34 = m._34;   
373. これ._41 = m._41;   
374. これ._42 = m._42;   
375. これ._43 = m._43;   
376. これ._44 = m._44;   
378. 返却 これ;   
379. }、
381. transVec3: 関数(out, x, y, z) {
382. out[0] = x * これ._11 y * これ._21 z * これ._31 これ._41;   
383. out[1] = x * これ._12 y * これ._22 z * これ._32 これ._42;   
384. out[2] = x * これ._13 y * これ._23 z * これ._33 これ._43;   
385. out[3] = x * これ._14 y * これ._24 z * これ._34 これ._44;   
386. },
388. transVec3Rot: 関数(out, x, y, z) {
389. out[0] = x * これ._11 y * これ._21 z * これ._31;   
390. out[1] = x * これ._12 y * これ._22 z * これ._32;   
391. out[2] = x * これ._13 y * これ._23 z * これ._33;   
392. }、
394. perspectiveLH: 関数(vw, vh, z_near, z_far) {
395. これ._11 = 2.0*z_near/vw;   
396. これ._12 = 0;   
397. これ._13 = 0;   
398. これ._14 = 0;   
400. これ._21 = 0;   
401. これ._22 = 2*z_near/vh;   
402. これ._23 = 0;   
403. これ._24 = 0;   
405. これ._31 = 0;   
406. これ._32 = 0;   
407. これ._33 = z_far/(z_far-z_near);   
408. これ._34 = 1;   
410. これ._41 = 0;   
411. これ._42 = 0;   
412. これ._43 = z_near*z_far/(z_near-z_far);   
413. これ._44 = 0;   
415. 返却 これ;   
416. },
418. lookAtLH: 関数(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. これ._11 = aX.x;  これ._12 = aY.x;  これ._13 = aZ.x;  これ._14 = 0;   
429. これ._21 = aX.y;  これ._22 = aY.y;  これ._23 = aZ.y;  これ._24 = 0;   
430. これ._31 = aX.z;  これ._32 = aY.z;  これ._33 = aZ.z;  これ._34 = 0;   
432. これ._41 = -aFrom.dpWith(aX);   
433. これ._42 = -aFrom.dpWith(aY);   
434. これ._43 = -aFrom.dpWith(aZ);   
435. これ._44 = 1;   
437. 戻る これ;   
438. },
440. mul: 関数(A, B) {
441. これ._11 = A._11*B._11 A._12*B._21 A._13*B._31 A._14*B._41 ;   
442. これ._12 = A._11*B._12 A._12*B._22 A._13*B._32 A._14*B._42 ;   
443. これ._13 = A._11*B._13 A._12*B._23 A._13*B._33 A._14*B._43 ;   
444. これ._14 = A._11*B._14 A._12*B._24 A._13*B._34 A._14*B._44 ;   
446. これ._21 = A._21*B._11 A._22*B._21 A._23*B._31 A._24*B._41 ;   
447. これ._22 = A._21*B._12 A._22*B._22 A._23*B._32 A._24*B._42 ;   
448. これ._23 = A._21*B._13 A._22*B._23 A._23*B._33 A._24*B._43 ;   
449. これ._24 = A._21*B._14 A._22*B._24 A._23*B._34 A._24*B._44 ;   
451. これ._31 = A._31*B._11 A._32*B._21 A._33*B._31 A._34*B._41 ;   
452. これ._32 = A._31*B._12 A._32*B._22 A._33*B._32 A._34*B._42 ;   
453. これ._33 = A._31*B._13 A._32*B._23 A._33*B._33 A._34*B._43 ;   
454. これ._34 = A._31*B._14 A._32*B._24 A._33*B._34 A._34*B._44 ;   
456. これ._41 = A._41*B._11 A._42*B._21 A._43*B._31 A._44*B._41 ;   
457. これ._42 = A._41*B._12 A._42*B._22 A._43*B._32 A._44*B._42 ;   
458. これ._43 = A._41*B._13 A._42*B._23 A._43*B._33 A._44*B._43 ;   
459. これ._44 = A._41*B._14 A._42*B._24 A._43*B._34 A._44*B._44 ;   
461. 返却 これ;   
462. },
464. translate: 関数(x, y, z) {
465. これ._11 = 1;  これ._12 = 0;  これ._13 = 0;  これ._14 = 0;   
466. これ._21 = 0;  これ._22 = 1;  これ._23 = 0;  これ._24 = 0;   
467. これ._31 = 0;  これ._32 = 0;  これ._33 = 1;  これ._34 = 0;   
469. これ._41 = x;  これ._42 = y;  これ._43 = z;  これ._44 = 1;   
470. 返却 これ;   
471. }、
473. transpose33: 関数() {
474. var t;   
476. t = これ._12;   
477. これ._12 = これ._21;   
478. これ._21 = t;   
480. t = これ._13;   
481. これ._13 = これ._31;   
482. これ._31 = t;   
484. t = これ._23;   
485. これ._23 = これ._32;   
486. これ._32 = t;   
488. 返却 これ;   
489. },   
490.   
491.  //OpenGL 風格旋轉   
492.  gl旋轉： 函數(角, x, y, z) {   
493.   var s = Math.sin( 角度 );   
494.   var c = Math.cos( 角度 );   
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.   這個._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.