HTML5 3D衣服摇摆动画特效

互联网
江山十日雪，雪深江雾浓。开时刻的牵绊，邀阳光作伴，约清风同行，收拾起行囊，咱们去亲近草原吧，去亲近辽阔无边的草原。

这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divstyle="width:500px;margin:10pxauto">
  2. <canvasid="cv"width="480"height="300"></canvas>
  3. <p>"3Don2DCanvas"demo</p>
  4. <p>movecursortopan/clicktoswing</p>
  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. varg=this.g;
  8. g.beginPath();
  9. g.fillStyle=f;
  10. g.fillRect(0,0,w,h);
  12. }
  14. P3D.num_cmp=function(a,b){returna-b;}
  16. P3D.drawTriangle=function(poss,uvs,shade_clr){
  17. varw=this.texture.width;
  18. varh=this.texture.height;
  20. varg=this.g;
  22. varvAd=[poss[1].x-poss[0].x,poss[1].y-poss[0].y];
  23. varvBd=[poss[2].x-poss[0].x,poss[2].y-poss[0].y];
  25. varvA=[uvs[1].u-uvs[0].u,uvs[1].v-uvs[0].v];
  26. varvB=[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. varm=newM22();
  35. m._11=vA[0];
  36. m._12=vA[1];
  37. m._21=vB[0];
  38. m._22=vB[1];
  40. varim=m.getInvert();
  41. if(!im)returnfalse;
  43. vara=im._11*vAd[0]+im._12*vBd[0];
  44. varb=im._21*vAd[0]+im._22*vBd[0];
  46. varc=im._11*vAd[1]+im._12*vBd[1];
  47. vard=im._21*vAd[1]+im._22*vBd[1];
  49. varwu=uvs[0].u*w;
  50. varhv=uvs[0].v*h;
  51. vardu=wu*a+hv*b;
  52. vardv=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. varbx=[wu,wu+vA[0],wu+vB[0]];
  66. varby=[hv,hv+vA[1],hv+vB[1]];
  68. bx.sort(P3D.num_cmp);
  69. by.sort(P3D.num_cmp);
  71. varbw=bx[2]-bx[0];
  72. varbh=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. returntrue;
  89. }
  91. P3D.drawTestByIndexBuffer=function(pos_buf,ix_buf,culling){
  92. varg=this.g;
  94. if((ix_buf.length%3)!=0)
  95. throw"invalidindexbufferlength!";
  97. varlen=ix_buf.length/3;
  99. vari,ibase,vbase;
  100. varposs=[{},{},{}];
  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];
  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. //zcomponentofcrossproduct<0?
  118. varAx=poss[1].x-poss[0].x;
  119. varAy=poss[1].y-poss[0].y;
  120. varCx=poss[2].x-poss[1].x;
  121. varCy=poss[2].y-poss[1].y;
  123. varcull=((((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. varw,h;
  137. varcolor_polygon=!this.texture;
  138. if(this.texture){
  139. w=this.texture.width;
  140. h=this.texture.height;
  141. }
  143. varg=this.g;
  144. varm=newM22();
  146. if(!culling)culling=0;
  148. if((ix_buf.length%3)!=0)
  149. throw"invalidindexbufferlength!";
  151. vari,ibase,vbase,tbase,poss=[{},{},{}];
  152. varlen=ix_buf.length/3;
  153. varuv_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;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. varvAd=[poss[1].x-poss[0].x,poss[1].y-poss[0].y];
  176. varvBd=[poss[2].x-poss[0].x,poss[2].y-poss[0].y];
  178. varvCd=[poss[2].x-poss[1].x,poss[2].y-poss[1].y];
  180. //zcomponentofcrossproduct<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. varvA=[uv_1u-uv_0u,uv_1v-uv_0v];
  196. varvB=[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. varim=m.getInvert();
  210. if(!im){continue;}
  212. vara=im._11*vAd[0]+im._12*vBd[0];
  213. varb=im._21*vAd[0]+im._22*vBd[0];
  215. varc=im._11*vAd[1]+im._12*vBd[1];
  216. vard=im._21*vAd[1]+im._22*vBd[1];
  218. varwu=uv_0u*w;
  219. varhv=uv_0v*h;
  220. vardu=wu*a+hv*b;
  221. vardv=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. varbx=[wu,wu+vA[0],wu+vB[0]];
  234. varby=[hv,hv+vA[1],hv+vB[1]];
  236. bx.sort(P3D.num_cmp);
  237. by.sort(P3D.num_cmp);
  239. varbw=bx[2]-bx[0];
  240. varbh=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. functionVec3(_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. returnthis;
  278. },
  280. add:function(v){
  281. this.x+=v.x;
  282. this.y+=v.y;
  283. this.z+=v.z;
  285. returnthis;
  286. },
  288. copyFrom:function(v){
  289. this.x=v.x;
  290. this.y=v.y;
  291. this.z=v.z;
  293. returnthis;
  294. },
  296. norm:function(){
  297. returnMath.sqrt(this.x*this.x+this.y*this.y+this.z*this.z);
  298. },
  300. normalize:function(){
  301. varnrm=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. returnthis;
  309. },
  311. smul:function(k){
  312. this.x*=k;
  313. this.y*=k;
  314. this.z*=k;
  316. returnthis;
  317. },
  319. dpWith:function(v){
  320. returnthis.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. returnthis;
  329. },
  331. toString:function(){
  332. returnthis.x+","+this.y+","+this.z;
  333. }
  334. }
  336. functionM44(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. returnthis;
  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. returnthis;
  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. returnthis;
  416. },
  418. lookAtLH:function(aUp,aFrom,aAt){
  419. varaX=newVec3();
  420. varaY=newVec3();
  422. varaZ=newVec3(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. returnthis;
  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. returnthis;
  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. returnthis;
  471. },
  473. transpose33:function(){
  474. vart;
  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. returnthis;
  489. },
  491. //OpenGLstylerotation
  492. glRotate:function(angle,x,y,z){
  493. vars=Math.sin(angle);
  494. varc=Math.cos(angle);
  496. varxx=x*x;
  497. varyy=y*y;
  498. varzz=z*z;
  499. varxy=x*y;
  500. varyz=y*z;
  501. varzx=z*x;
  502. varxs=x*s;
  503. varys=y*s;
  504. varzs=z*s;
  505. varone_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. this._14=0;
  523. this._24=0;
  524. this._34=0;
  525. this._44=1;
  526. */
  528. this._11=(one_c*xx)+c;
  529. this._12=(one_c*xy)-zs;
  530. this._13=(one_c*zx)+ys;
  531. this._14=0;
  533. this._21=(one_c*xy)+zs;
  534. this._22=(one_c*yy)+c;
  535. this._23=(one_c*yz)-xs;
  536. this._24=0;
  538. this._31=(one_c*zx)-ys;
  539. this._32=(one_c*yz)+xs;
  540. this._33=(one_c*zz)+c;
  541. this._34=0;
  543. this._41=0;
  544. this._42=0;
  545. this._43=0;
  546. this._44=1;
  548. returnthis;
  549. }
  551. }
  553. //matrix2x2
  554. functionM22()
  555. {
  556. this._11=1;
  557. this._12=0;
  558. this._21=0;
  559. this._22=1;
  560. }
  562. M22.prototype.getInvert=function()
  563. {
  564. varout=newM22();
  565. vardet=this._11*this._22-this._12*this._21;
  566. if(det>-0.0001&&det<0.0001)
  567. returnnull;
  569. out._11=this._22/det;
  570. out._22=this._11/det;
  572. out._12=-this._12/det;
  573. out._21=-this._21/det;
  575. returnout;
  576. }

3D衣服动画JS代码

JavaScript Code复制内容到剪贴板
  1. functionClothApp()
  2. {
  3. this.canvas=document.getElementById("cv");
  5. P3D.g=this.canvas.getContext("2d");
  7. vartex=newImage();
  8. this.texture1=tex;
  9. tex.onload=function(){_this.start();};
  10. tex.src="20090226032826.gif";
  12. tex=newImage();
  13. this.texture2=tex;
  14. tex.onload=function(){_this.start();};
  15. tex.src="20090226032825.png";
  17. this.mLoadCount=2;
  18. this.mTickCount=0;
  20. this.G=0.53;
  21. this.G1=0.45;
  22. this.mProjMat=null;
  23. this.mViewMat=null;
  24. this.mViewFrom=newVec3();
  25. this.mViewFrom.y=-150;
  26. this.mViewFrom.z=1000;
  27. this.mViewFromA=(newVec3()).copyFrom(this.mViewFrom);
  29. this.mViewAngle=0;
  31. this.mNLen=0;
  32. this.mNodes=[];
  33. this.mRenderTris=null;
  35. this.mLTNode=null;
  36. this.mRTNode=null;
  38. this.mLTNodeV=newVec3();
  39. this.mRTNodeV=newVec3();
  41. this.mWForce=newVec3();
  42. this.frate=15;
  44. var_this=this;
  45. }
  47. ClothApp.zsortCmp=function(t1,t2){
  48. returnt2.sortKey-t1.sortKey;
  49. }
  51. ClothApp.prototype={
  52. start:function(){
  53. if(--this.mLoadCount!=0)return;
  55. this.vUP=newVec3(0,1,0);
  56. this.vAT=newVec3(0,80,0);
  58. this.mViewport={};
  59. this.mViewport.w=480;
  60. this.mViewport.h=300;
  61. this.mViewport.ow=240;
  62. this.mViewport.oh=150;
  63. this.setupTransforms();
  65. this.generateCloth(180);
  66. this.generateRenderTriangles();
  68. var_this=this;
  69. this.canvas.addEventListener("mousemove",function(e){_this.onMouseMove(e);},false);
  70. this.canvas.addEventListener("mousedown",function(e){_this.onClick(e);},false);
  72. window.setTimeout(function(){_this.onInterval();},this.frate);
  73. },
  75. onInterval:function(){
  76. this.mTickCount++;
  78. //this.mLTNodeV.z=Math.cos(this.mTickCount*0.1)*2;
  80. this.tick();
  81. this.updatePosition();
  82. this.draw();
  84. var_this=this;
  85. window.setTimeout(function(){_this.onInterval();},this.frate);
  86. },
  88. onMouseMove:function(e){
  89. if(e.clientX||e.clientX==0)
  90. this.mViewAngle=(e.clientX-240)*0.004;
  92. if(e.clientY||e.clientY==0)
  93. this.mViewFromA.y=90-(e.clientY-0)*0.8;
  94. },
  96. onClick:function(e){
  97. if(e.clientX||e.clientX==0)
  98. {
  99. this.mWForce.z=-4;
  100. this.mWForce.x=(e.clientX-240)*-0.03;
  101. }
  102. },
  104. tick:function(){
  105. this.updateViewTrans(this.mViewAngle);
  107. varnlen=this.mNodes.length;
  108. vari,nd;
  109. for(i=0;i<nlen;i++)
  110. {
  111. nd=this.mNodes[i];
  112. nd.F.x=0;
  113. nd.F.z=0;
  114. if(nd.flags&4)
  115. nd.F.y=-this.G1;
  116. else
  117. nd.F.y=-this.G;
  119. nd.F.add(this.mWForce);
  120. }
  122. this.mWForce.zero();
  123. this.applyTension();
  125. for(i=0;i<nlen;i++)
  126. {
  127. nd=this.mNodes[i];
  129. if((nd.flags&1)!=0){
  130. nd.F.sub(nd.F);
  131. }
  133. nd.velo.add(nd.F);
  134. }
  136. this.mLTNode.velo.copyFrom(this.mLTNodeV);
  137. this.mRTNode.velo.copyFrom(this.mRTNodeV);
  138. },
  140. updatePosition:function(){
  141. varnlen=this.mNodes.length;
  142. vari,nd;
  143. for(i=0;i<nlen;i++)
  144. {
  145. nd=this.mNodes[i];
  147. if((nd.flags&1)!=0){
  148. nd.cv.x=0;
  149. nd.cv.y=0;
  150. nd.cv.z=0;
  151. }
  153. nd.pos.add(nd.velo);
  154. nd.velo.sub(nd.cv);
  155. nd.cv.x=0;
  156. nd.cv.y=0;
  157. nd.cv.z=0;
  159. nd.velo.smul(0.95);
  160. }
  161. },
  163. draw:function(){
  164. P3D.clear("#000",this.mViewport.w,this.mViewport.h);
  165. this.transformPolygons();
  167. this.mRenderTris.sort(ClothApp.zsortCmp);
  168. varlen=this.mRenderTris.length;
  169. vart,sh;
  170. for(vari=0;i<len;i++){
  171. t=this.mRenderTris[i];
  173. if(P3D.texture!=t.texture)
  174. P3D.texture=t.texture;
  176. sh=undefined;
  177. if(t.lighting&&t.shade>0.01)
  178. sh="rgba(0,0,0,"+t.shade+")";
  179. P3D.drawTriangle(t.tposs,t.uvs,sh);
  180. }
  181. },
  183. applyTension:function(){
  184. vari,k,nd;
  185. varv=newVec3();
  186. varnlen=this.mNodes.length;
  187. varnaturalLen=this.mNLen;
  189. for(k=0;k<nlen;k++)
  190. {
  191. nd=this.mNodes[k];
  192. varF=nd.F;
  194. for(i=0;i<4;i++)
  195. {
  196. varnbr=nd.links[i];
  197. if(!nbr)continue;
  199. varlen=v.copyFrom(nbr.pos).sub(nd.pos).norm();
  200. vardlen=len-naturalLen;
  201. if(dlen>0){
  202. v.smul(dlen*0.5/len);
  204. F.x+=v.x;
  205. F.y+=v.y;
  206. F.z+=v.z;
  207. nd.cv.add(v.smul(0.8));
  208. }
  209. }
  210. }
  211. },
  213. setupTransforms:function(){
  214. this.mProjMat=newM44();
  215. this.mProjMat.perspectiveLH(24,15,10,9000);
  217. this.mViewMat=newM44();
  218. this.updateViewTrans(0);
  219. },
  221. updateViewTrans:function(ry){
  222. this.mViewFromA.z=Math.cos(ry)*380;
  223. this.mViewFromA.x=Math.sin(ry)*380;
  225. this.mViewFrom.smul(0.7);
  226. this.mViewFrom.x+=this.mViewFromA.x*0.3;
  227. this.mViewFrom.y+=this.mViewFromA.y*0.3;
  228. this.mViewFrom.z+=this.mViewFromA.z*0.3;
  230. this.mViewMat.lookAtLH(this.vUP,this.mViewFrom,this.vAT);
  231. },
  233. generateCloth:function(base_y){
  234. varcols=9;
  235. varrows=8;
  237. varstep=22;
  238. this.mNLen=step*0.9;
  239. varw=(cols-1)*step;
  241. vari,k;
  242. for(k=0;k<rows;k++)
  243. {
  244. for(i=0;i<cols;i++)
  245. {
  246. varnd=newClothNode();
  247. nd.pos.x=-(w/2)+i*step;
  248. nd.pos.y=base_y-k*step/2;
  249. nd.pos.z=k*16;
  251. nd.uv.u=i/(cols-1);
  252. nd.uv.v=k/(rows-1);
  254. if(i>0){
  255. varprv_nd=this.mNodes[this.mNodes.length-1];
  256. prv_nd.links[1]=nd;
  257. nd.links[0]=prv_nd;
  258. }
  260. if(k>0){
  261. varup_nd=this.mNodes[this.mNodes.length-cols];
  262. up_nd.links[4]=nd;
  263. nd.links[3]=up_nd;
  264. }
  266. if(i!=0&&i!=4&&i!=(cols-1))
  267. nd.flags|=4;
  269. this.mNodes.push(nd);
  270. }
  271. }
  273. //fixleft-topandright-top
  274. this.mNodes[0].flags|=1;
  275. this.mNodes[4].flags|=1;
  276. this.mNodes[cols-1].flags|=1;
  278. this.mLTNode=this.mNodes[0];
  279. this.mRTNode=this.mNodes[cols-1];
  280. },
  282. generateRenderTriangles:function()
  283. {
  284. if(!this.mRenderTris)this.mRenderTris=[];
  286. vari;
  287. varnd;
  288. varnlen=this.mNodes.length;
  290. for(i=0;i<nlen;i++)
  291. {
  292. nd=this.mNodes[i];
  293. if(nd.links[1]&&nd.links[1].links[4]){
  294. vart=newRenderTriangle();
  295. t.texture=this.texture1;
  297. t.poss[0]=nd.pos;
  298. t.poss[1]=nd.links[1].pos;
  299. t.poss[2]=nd.links[1].links[4].pos;
  301. t.uvs[0]=nd.uv;
  302. t.uvs[1]=nd.links[1].uv;
  303. t.uvs[2]=nd.links[1].links[4].uv;
  305. this.mRenderTris.push(t);
  307. t=newRenderTriangle();
  308. t.texture=this.texture1;
  310. t.poss[0]=nd.pos;
  311. t.poss[1]=nd.links[1].links[4].pos;
  312. t.poss[2]=nd.links[4].pos;
  314. t.uvs[0]=nd.uv;
  315. t.uvs[1]=nd.links[1].links[4].uv;
  316. t.uvs[2]=nd.links[4].uv;
  318. this.mRenderTris.push(t);
  319. }
  320. }
  322. this.addBGTriangles(this.mNodes[0].pos.y);
  323. },
  325. addBGTriangles:function(by){
  326. varcols=4;
  327. vart,x,y,sz=110;
  328. varox=-(cols*sz)/2;
  329. varoz=-(cols*sz)/2;
  331. for(y=0;y<cols;y++){
  332. for(x=0;x<cols;x++){
  333. varbv=((x+y)&1)*0.5;
  334. t=newRenderTriangle();
  335. t.texture=this.texture2;
  337. t.poss[0]=newVec3(ox+x*sz,by,oz+y*sz);
  338. t.poss[1]=newVec3(ox+x*sz+sz,by,oz+y*sz);
  339. t.poss[2]=newVec3(ox+x*sz,by,oz+y*sz+sz);
  341. t.uvs[0]={u:0,v:bv};
  342. t.uvs[1]={u:0.5,v:bv};
  343. t.uvs[2]={u:0,v:bv+0.5};
  345. if((x==1||x==2)&&(y==1||y==2))
  346. this.modifyRoofUV(t,x==2,bv);
  348. t.lighting=false;
  349. t.zBias=0.5;
  350. this.mRenderTris.push(t);
  352. t=newRenderTriangle();
  353. t.texture=this.texture2;
  355. t.poss[0]=newVec3(ox+x*sz,by,oz+y*sz+sz);
  356. t.poss[1]=newVec3(ox+x*sz+sz,by,oz+y*sz);
  357. t.poss[2]=newVec3(ox+x*sz+sz,by,oz+y*sz+sz);
  359. t.uvs[0]={u:0,v:bv+0.5};
  360. t.uvs[1]={u:0.5,v:bv};
  361. t.uvs[2]={u:0.5,v:bv+0.5};
  363. if((x==1||x==2)&&(y==1||y==2))
  364. this.modifyRoofUV(t,x==2,bv);
  366. t.lighting=false;
  367. t.zBias=0.5;
  368. this.mRenderTris.push(t);
  370. }
  371. }
  372. },
  374. modifyRoofUV:function(t,rv,bv){
  375. if(rv){
  376. t.uvs[0].u=0.5-t.uvs[0].u;
  377. t.uvs[1].u=0.5-t.uvs[1].u;
  378. t.uvs[2].u=0.5-t.uvs[2].u;
  379. }
  381. t.uvs[0].u+=0.5;
  382. t.uvs[1].u+=0.5;
  383. t.uvs[2].u+=0.5;
  385. if(rv){
  386. t.uvs[0].v=0.5-t.uvs[0].v+bv+bv;
  387. t.uvs[1].v=0.5-t.uvs[1].v+bv+bv;
  388. t.uvs[2].v=0.5-t.uvs[2].v+bv+bv;
  389. }
  391. },
  393. transformPolygons:function(){
  394. vartrans=newM44();
  395. trans.mul(this.mViewMat,this.mProjMat);
  397. varhw=this.mViewport.ow;
  398. varhh=this.mViewport.oh;
  400. varlen=this.mRenderTris.length;
  401. vart;
  402. varspos=[0,0,0,0];
  403. for(vari=0;i<len;i++){
  404. t=this.mRenderTris[i];
  405. for(vark=0;k<3;k++){
  406. trans.transVec3(spos,t.poss[k].x,t.poss[k].y,t.poss[k].z);
  408. varW=spos[3];
  409. spos[0]/=W;
  410. spos[1]/=W;
  411. spos[2]/=W;
  413. spos[0]*=this.mViewport.w;
  414. spos[1]*=-this.mViewport.h;
  415. spos[0]+=hw;
  416. spos[1]+=hh;
  418. t.tposs[k].x=spos[0];
  419. t.tposs[k].y=spos[1];
  420. t.tposs[k].z=spos[2];
  421. }
  423. varv1=(newVec3()).copyFrom(t.poss[1]).sub(t.poss[0]).normalize();
  424. varv2=(newVec3()).copyFrom(t.poss[2]).sub(t.poss[1]).normalize();
  425. varN=(newVec3()).cp(v1,v2);
  427. trans.transVec3Rot(spos,N.x,N.y,N.z);
  429. if(t.lighting){
  430. if(spos[2]>0)
  431. t.shade=0.8
  432. else{
  433. t.shade=0.1-N.y*0.6;
  434. if(t.shade<0)t.shade=0;
  435. }
  436. }
  438. t.sortKey=Math.floor((t.tposs[0].z+t.tposs[1].z+t.tposs[2].z+t.zBias)*1000);
  439. }
  440. }
  441. }
  443. functionClothNode()
  444. {
  445. this.flags=0;
  446. this.pos=newVec3();
  447. this.velo=newVec3();
  448. this.cv=newVec3();
  449. this.F=newVec3();
  450. this.links=[null,null,null,null];
  451. this.uv={u:0,v:0};
  452. }
  454. functionRenderTriangle()
  455. {
  456. this.texture=null;
  457. this.poss=newArray(3);
  458. this.tposs=[newVec3(),newVec3(),newVec3()];
  459. this.uvs=[{u:0,v:0},{u:0,v:0},{u:0,v:0}];
  460. this.shade=0;
  461. this.lighting=true;
  462. this.zBias=0;
  464. this.sortKey=0;
  465. }

以上就是HTML5 3D衣服摇摆动画特效的源码介绍，需要更为深入学习的下载源代码来研究。