HTML5 3D衣服摇摆动画特效

2020-03-24 17:06:34

字体：大中小

来源：转载

供稿：网友

这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。在线演示源码下载HTML代码XML/HTML Code复制内容到剪贴板
P3D.clear=function(f,w,h){ varg=this.g; g.beginPath(); g.fillStyle=f; g.fillRect(0,0,w,h); } P3D.num_cmp=function(a,b){returna-b;} P3D.drawTriangle=function(poss,uvs,shade_clr){ varw=this.texture.width; varh=this.texture.height; varg=this.g; varvAd=[poss[1].x-poss[0].x,poss[1].y-poss[0].y]; varvBd=[poss[2].x-poss[0].x,poss[2].y-poss[0].y]; varvA=[uvs[1].u-uvs[0].u,uvs[1].v-uvs[0].v]; varvB=[uvs[2].u-uvs[0].u,uvs[2].v-uvs[0].v]; vA[0]*=w; vA[1]*=h; vB[0]*=w; vB[1]*=h; varm=newM22(); m._11=vA[0]; m._12=vA[1]; m._21=vB[0]; m._22=vB[1]; varim=m.getInvert(); if(!im)returnfalse; vara=im._11*vAd[0]+im._12*vBd[0]; varb=im._21*vAd[0]+im._22*vBd[0]; varc=im._11*vAd[1]+im._12*vBd[1]; vard=im._21*vAd[1]+im._22*vBd[1]; varwu=uvs[0].u*w; varhv=uvs[0].v*h; vardu=wu*a+hv*b; vardv=wu*c+hv*d; g.save(); g.beginPath(); g.moveTo(poss[0].x,poss[0].y); g.lineTo(poss[1].x,poss[1].y); g.lineTo(poss[2].x,poss[2].y); g.clip(); g.transform(a,c,b,d,poss[0].x-du,poss[0].y-dv); //bounds varbx=[wu,wu+vA[0],wu+vB[0]]; varby=[hv,hv+vA[1],hv+vB[1]]; bx.sort(P3D.num_cmp); by.sort(P3D.num_cmp); varbw=bx[2]-bx[0]; varbh=by[2]-by[0]; if((bx[0]+bw) =(w-1))bw++; if((by[0]+bh) =(h-1))bh++; if(bx[0] =1){bx[0]--;bw++;} if(by[0] =1){by[0]--;bh++;} g.drawImage(this.texture,bx[0],by[0],bw,bh,bx[0],by[0],bw,bh); if(shade_clr){ g.fillStyle=shade_clr; g.fillRect(bx[0],by[0],bw,bh); } g.restore(); returntrue; } P3D.drawTestByIndexBuffer=function(pos_buf,ix_buf,culling){ varg=this.g; if((ix_buf.length%3)!=0) throw invalidindexbufferlength! ; varlen=ix_buf.length/3; vari,ibase,vbase; varposs=[{},{},{}]; g.strokeWidth=1; for(i=0,ibase=0;i len;++i) { vbase=ix_buf[ibase++] 2; poss[0].x=pos_buf[vbase++]; poss[0].y=pos_buf[vbase]; vbase=ix_buf[ibase++] 2; poss[1].x=pos_buf[vbase++]; poss[1].y=pos_buf[vbase]; vbase=ix_buf[ibase++] 2; poss[2].x=pos_buf[vbase++]; poss[2].y=pos_buf[vbase]; //zcomponentofcrossproduct 0? varAx=poss[1].x-poss[0].x; varAy=poss[1].y-poss[0].y; varCx=poss[2].x-poss[1].x; varCy=poss[2].y-poss[1].y; varcull=((((Ax*Cy)-(Ay*Cx))*culling) 0); g.beginPath(); g.strokeStyle=cull? #592 : #0f0 ; g.moveTo(poss[0].x,poss[0].y); g.lineTo(poss[1].x,poss[1].y); g.lineTo(poss[2].x,poss[2].y); g.lineTo(poss[0].x,poss[0].y); g.stroke(); } } P3D.drawByIndexBuffer=function(pos_buf,ix_buf,tx_buf,culling,z_clip){ varw,h; varcolor_polygon=!this.texture; if(this.texture){ w=this.texture.width; h=this.texture.height; } varg=this.g; varm=newM22(); if(!culling)culling=0; if((ix_buf.length%3)!=0) throw invalidindexbufferlength! ; vari,ibase,vbase,tbase,poss=[{},{},{}]; varlen=ix_buf.length/3; varuv_0u,uv_0v,uv_1u,uv_1v,uv_2u,uv_2v; for(i=0,ibase=0;i len;++i) { tbase=ix_buf[ibase++] 1 vbase=tbase 1; poss[0].x=pos_buf[vbase++];uv_0u=tx_buf[tbase++]; poss[0].y=pos_buf[vbase++];uv_0v=tx_buf[tbase]; if(z_clip (pos_buf[vbase] 0||pos_buf[vbase] 1)){ibase+=2;continue;} tbase=ix_buf[ibase++] 1 vbase=tbase 1; poss[1].x=pos_buf[vbase++];uv_1u=tx_buf[tbase++]; poss[1].y=pos_buf[vbase++];uv_1v=tx_buf[tbase]; if(z_clip (pos_buf[vbase] 0||pos_buf[vbase] 1)){++ibase;continue;} tbase=ix_buf[ibase++] 1 vbase=tbase 1; poss[2].x=pos_buf[vbase++];uv_2u=tx_buf[tbase++]; poss[2].y=pos_buf[vbase++];uv_2v=tx_buf[tbase]; if(z_clip (pos_buf[vbase] 0||pos_buf[vbase] 1)){continue;} varvAd=[poss[1].x-poss[0].x,poss[1].y-poss[0].y]; varvBd=[poss[2].x-poss[0].x,poss[2].y-poss[0].y]; varvCd=[poss[2].x-poss[1].x,poss[2].y-poss[1].y]; //zcomponentofcrossproduct 0? if((((vAd[0]*vCd[1])-(vAd[1]*vCd[0]))*culling) 0) continue; if(color_polygon){ g.fillStyle=uv_0u; g.beginPath(); g.moveTo(poss[0].x,poss[0].y); g.lineTo(poss[1].x,poss[1].y); g.lineTo(poss[2].x,poss[2].y); g.fill(); continue; } varvA=[uv_1u-uv_0u,uv_1v-uv_0v]; varvB=[uv_2u-uv_0u,uv_2v-uv_0v]; vA[0]*=w; vA[1]*=h; vB[0]*=w; vB[1]*=h; m._11=vA[0]; m._12=vA[1]; m._21=vB[0]; m._22=vB[1]; varim=m.getInvert(); if(!im){continue;} vara=im._11*vAd[0]+im._12*vBd[0]; varb=im._21*vAd[0]+im._22*vBd[0]; varc=im._11*vAd[1]+im._12*vBd[1]; vard=im._21*vAd[1]+im._22*vBd[1]; varwu=uv_0u*w; varhv=uv_0v*h; vardu=wu*a+hv*b; vardv=wu*c+hv*d; g.save(); g.beginPath(); g.moveTo(poss[0].x,poss[0].y); g.lineTo(poss[1].x,poss[1].y); g.lineTo(poss[2].x,poss[2].y); g.clip(); g.transform(a,c,b,d,poss[0].x-du,poss[0].y-dv); //bounds varbx=[wu,wu+vA[0],wu+vB[0]]; varby=[hv,hv+vA[1],hv+vB[1]]; bx.sort(P3D.num_cmp); by.sort(P3D.num_cmp); varbw=bx[2]-bx[0]; varbh=by[2]-by[0]; if((bx[0]+bw) =(w-1))bw++; if((by[0]+bh) =(h-1))bh++; if(bx[0] =1){bx[0]--;bw++;} if(by[0] =1){by[0]--;bh++;} g.drawImage(this.texture,bx[0],by[0],bw,bh,bx[0],by[0],bw,bh); /* if(shade_clr){ g.fillStyle=shade_clr; g.fillRect(bx[0],by[0],bw,bh); } */ g.restore(); } } functionVec3(_x,_y,_z) { this.x=_x||0; this.y=_y||0; this.z=_z||0; } Vec3.prototype={ zero:function(){ this.x=this.y=this.z=0; }, sub:function(v){ this.x-=v.x; this.y-=v.y; this.z-=v.z; returnthis; }, add:function(v){ this.x+=v.x; this.y+=v.y; this.z+=v.z; returnthis; }, copyFrom:function(v){ this.x=v.x; this.y=v.y; this.z=v.z; returnthis; }, norm:function(){ returnMath.sqrt(this.x*this.x+this.y*this.y+this.z*this.z); }, normalize:function(){ varnrm=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z); if(nrm!=0) { this.x/=nrm; this.y/=nrm; this.z/=nrm; } returnthis; }, smul:function(k){ this.x*=k; this.y*=k; this.z*=k; returnthis; }, dpWith:function(v){ returnthis.x*v.x+this.y*v.y+this.z*v.z; }, cp:function(v,w){ this.x=(w.y*v.z)-(w.z*v.y); this.y=(w.z*v.x)-(w.x*v.z); this.z=(w.x*v.y)-(w.y*v.x); returnthis; }, toString:function(){ returnthis.x+ , +this.y+ , +this.z; } } functionM44(cpy) { if(cpy) this.copyFrom(cpy); else{ this.ident(); } } M44.prototype={ ident:function(){ this._12=this._13=this._14=0; this._21=this._23=this._24=0; this._31=this._32=this._34=0; this._41=this._42=this._43=0; this._11=this._22=this._33=this._44=1; returnthis; }, copyFrom:function(m){ this._11=m._11; this._12=m._12; this._13=m._13; this._14=m._14; this._21=m._21; this._22=m._22; this._23=m._23; this._24=m._24; this._31=m._31; this._32=m._32; this._33=m._33; this._34=m._34; this._41=m._41; this._42=m._42; this._43=m._43; this._44=m._44; returnthis; }, transVec3:function(out,x,y,z){ out[0]=x*this._11+y*this._21+z*this._31+this._41; out[1]=x*this._12+y*this._22+z*this._32+this._42; out[2]=x*this._13+y*this._23+z*this._33+this._43; out[3]=x*this._14+y*this._24+z*this._34+this._44; }, transVec3Rot:function(out,x,y,z){ out[0]=x*this._11+y*this._21+z*this._31; out[1]=x*this._12+y*this._22+z*this._32; out[2]=x*this._13+y*this._23+z*this._33; }, perspectiveLH:function(vw,vh,z_near,z_far){ this._11=2.0*z_near/vw; this._12=0; this._13=0; this._14=0; this._21=0; this._22=2*z_near/vh; this._23=0; this._24=0; this._31=0; this._32=0; this._33=z_far/(z_far-z_near); this._34=1; this._41=0; this._42=0; this._43=z_near*z_far/(z_near-z_far); this._44=0; returnthis; }, lookAtLH:function(aUp,aFrom,aAt){ varaX=newVec3(); varaY=newVec3(); varaZ=newVec3(aAt.x,aAt.y,aAt.z); aZ.sub(aFrom).normalize(); aX.cp(aUp,aZ).normalize(); aY.cp(aZ,aX); this._11=aX.x;this._12=aY.x;this._13=aZ.x;this._14=0; this._21=aX.y;this._22=aY.y;this._23=aZ.y;this._24=0; this._31=aX.z;this._32=aY.z;this._33=aZ.z;this._34=0; this._41=-aFrom.dpWith(aX); this._42=-aFrom.dpWith(aY); this._43=-aFrom.dpWith(aZ); this._44=1; returnthis; }, mul:function(A,B){ this._11=A._11*B._11+A._12*B._21+A._13*B._31+A._14*B._41; this._12=A._11*B._12+A._12*B._22+A._13*B._32+A._14*B._42; this._13=A._11*B._13+A._12*B._23+A._13*B._33+A._14*B._43; this._14=A._11*B._14+A._12*B._24+A._13*B._34+A._14*B._44; this._21=A._21*B._11+A._22*B._21+A._23*B._31+A._24*B._41; this._22=A._21*B._12+A._22*B._22+A._23*B._32+A._24*B._42; this._23=A._21*B._13+A._22*B._23+A._23*B._33+A._24*B._43; this._24=A._21*B._14+A._22*B._24+A._23*B._34+A._24*B._44; this._31=A._31*B._11+A._32*B._21+A._33*B._31+A._34*B._41; this._32=A._31*B._12+A._32*B._22+A._33*B._32+A._34*B._42; this._33=A._31*B._13+A._32*B._23+A._33*B._33+A._34*B._43; this._34=A._31*B._14+A._32*B._24+A._33*B._34+A._34*B._44; this._41=A._41*B._11+A._42*B._21+A._43*B._31+A._44*B._41; this._42=A._41*B._12+A._42*B._22+A._43*B._32+A._44*B._42; this._43=A._41*B._13+A._42*B._23+A._43*B._33+A._44*B._43; this._44=A._41*B._14+A._42*B._24+A._43*B._34+A._44*B._44; returnthis; }, translate:function(x,y,z){ this._11=1;this._12=0;this._13=0;this._14=0; this._21=0;this._22=1;this._23=0;this._24=0; this._31=0;this._32=0;this._33=1;this._34=0; this._41=x;this._42=y;this._43=z;this._44=1; returnthis; }, transpose33:function(){ vart; t=this._12; this._12=this._21; this._21=t; t=this._13; this._13=this._31; this._31=t; t=this._23; this._23=this._32; this._32=t; returnthis; }, //OpenGLstylerotation glRotate:function(angle,x,y,z){ vars=Math.sin(angle); varc=Math.cos(angle); varxx=x*x; varyy=y*y; varzz=z*z; varxy=x*y; varyz=y*z; varzx=z*x; varxs=x*s; varys=y*s; varzs=z*s; varone_c=1.0-c; /* this._11=(one_c*xx)+c; this._21=(one_c*xy)-zs; this._31=(one_c*zx)+ys; this._41=0; this._12=(one_c*xy)+zs; this._22=(one_c*yy)+c; this._32=(one_c*yz)-xs; this._42=0; this._13=(one_c*zx)-ys; this._23=(one_c*yz)+xs;html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html select标签的用法你知道吗？html select标签属性介绍

下一篇：怎样使用html网页中的锚点