HTML5 3D衣服摇摆动画特效
更新时间:2023-04-03 05:33:10 阅读： 评论：0
这又是一款基于html5 canvas的3d动画杰作，它是一个可以随风飘动的3d衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。
html代码
xml/html code
复制内容到剪贴板
<divstyle=“width:500px;margin:10pxauto”><canvasid=“cv”width=“480”height=“300”></canvas个人养老保险缴费查询><p>“3don2dcanvas”demo</p><p>movecursortopan/clicktoswing</p></div>p3d库js代码，主要用来处理3d效果的
javascript code
复制内容到剪贴板
window.p3d={ texture:null, g:null}; 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)returnfal; 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,iba,vba; varposs=[{},{},{}]; g.strokewidth=1; for(i=0,iba=0;i<len;++i) { vba=ix_buf[iba++]<<2; poss[0].x=pos_buf[vba++]; poss[0].y=pos_buf[vba]; vba=ix_buf[iba++]<<2; poss[1].x=pos_buf[vba++]; poss[1].y=pos_buf[vba]; vba=ix_buf[iba++]<<2; poss[2].x=pos_buf[vba++]; poss[2].y=pos_buf[vba]; //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,iba,vba,tba,poss=[{},{},{}]; varlen=ix_buf.length/3; varuv_0u,uv_0v,uv_1u,uv_1v,uv_2u,uv_2v; for(i=0,iba=0;i<len;++i) { tba=ix_buf[iba++]<<1 vba=tba<<1; poss[0].x=pos_buf[vba++];uv_0u=tx_buf[tba++]; poss[0].y=pos_buf[vba++];uv_0v=tx_buf[tba]; if(z_clip&&(pos_buf[vba]<0||pos_buf[vba]>1)){iba+=2;continue;} tba=ix_buf[iba++]<<1 vba=tba<<1; poss[1].x=pos_buf[vba++];uv_1u=tx_buf[tba++]; poss[1].y=pos_buf[vba++];uv_1v=tx_buf[tba]; if(z_clip&&(pos_buf[vba]<0||pos_buf[vba]>1)){++iba;continue;} tba=ix_buf[iba++]<<1 vba=tba<<1; poss[2].x=pos_buf[vba++];uv_2u=tx_buf[tba++]; poss[2].y=pos_buf[vba++];uv_2v=tx_buf[tba]; if(z_clip&&(pos_buf[vba]<0||pos_buf[vba]>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); el{ 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._1关于运动会的广播稿1+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; }, transpo33: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; this._33=(one_c*zz)+c; this._43=0; this._14=0; this._24=0; this._34=0; this._44=1; */this._11=(one_c*xx)+c; this._12=(one_c*xy)–zs; this._13=(one_c*zx)+ys; this._14=0; this._21=(one_c*xy)+zs; this._22=(one_c*yy)+c; this._23=(one_c*yz)–xs; this._24=0; this._31=(one_c*zx)–ys; this._32=(one_c*yz)+xs; this._33=(one_c*zz)+c; this._34=0; this._41=0; this._42=0; this._43=0; this._44=1; returnthis; } } //matrix2×2 functionm22() { this._11=1; this._12=0; this._21=0; this._22=1; } m22.prototype.getinvert=function() { varout=newm22(); vardet=this._11*this._22–this._12*this._21; if(det>-0.0001&&det<0.0001) returnnull; out._11=this._22/det; out._22=this._11/det; out._12=–this._12/det; out._21=–this._21/det; returnout; } 3d衣服动画js代码
javascript code
复制内容到剪贴板
functionclothapp() { this.canvas=document.getelementbyid(“cv”); p3d.g=this.canvas.getcontext(“2d”); vartex=newimage(); this.texture1=tex; tex.onload=function(){_this.start();}; tex.src=“20090226032826.gif”; tex=newimage(); this.texture2=tex; tex.onload=function(){_this.start();}; tex.src=“20090226032825.png”; this.mloadcount=2; this.mtickcount=0; this.g=0.53; this.g1=0.45; this.mprojmat=null; this.mviewmat=null; this.mviewfrom=newvec3(); this.mviewfrom.y=-150; this.mviewfrom.z=1000; this.mviewfroma=(newvec3()).copyfrom(this.mviewfrom); this.mviewangle=0; this.mnlen=0; this.mnodes=[]; this.mrendertris=null; this.mltnode=null; this.mrtnode=null; this.mltnodev=newvec3(); this.mrtnodev=newvec3(); this.mwforce=newvec3(); this.frate=15; var_this=this; } clothapp.zsortcmp=function(t1,t2){ returnt2.sortkey–t1.sortkey; } clothapp.prototype={ start:function(){ if(–this.mloadcount!=0)return; this.vup=newvec3(0,1,0); this.vat=newvec3(0,80,0); this.mviewport={}; this.mviewport.w=480; this.mviewport.h=300; this.mviewport.ow=240; this.mviewport.oh=150; this.tuptransforms(); this.generatecloth(180); this.generaterendertriangles(); var_this=this; this.canvas.addeventlistener(“moumove”,function(e){_this.onmoumove(e);},fal); this.canvas.addeventlistener(“moudown”,function(e){_this.onclick(e);},fal); window.ttimeout(function(){_this.oninterval();},this.frate); }, oninterval:function(){ this.mtickcount++; //this.mltnodev.z=math.cos(this.mtickcount*0.1)*2; this.tick(); this.updateposition(); this.draw(); var_this=this; window.ttimeout(function(){_this.oninterval();},this.frate); }, onmoumove:function(e){ if(e.clientx||e.clientx==0) this.mviewangle=(e.clientx–240)*0.004; if(e.clienty||e.clienty==0) this.mviewfroma.y=90–(e.clienty–0)*0.8; }, onclick:function(e){ if(e.clientx||e.clientx==0) { this.mwforce.z=-4; this.mwforce.x=(e.clientx–240)*-0.03; } }, tick:function(){ this.updateviewtrans(this.mviewangle); varnlen=this.mnodes.length; vari,nd; for(i=0;i<nlen;i++) { nd=this.mnodes[i]; nd.f.x=0; nd.f.z=0; if(nd.flags&4) nd.f.y=–this.g1; elnd.f.y=–this.g; nd.f.add(this.mwforce); } this.mwforce.zero(); this.applytension(); for(i=0;i<nlen;i++) { nd=this.mnodes[i]; if((nd.flags&1)!=0){ nd.f.sub(nd.f); } nd.velo.add(nd.f); } this.mltnode.velo.copyfrom(this.mltnodev); this.mrtnode.velo.copyfrom(this.mrtnodev); }, updateposition:function(){ varnlen=this.mnodes.length; vari,nd; for(i=0;i<nlen;i++) { nd=this.mnodes[i]; if((nd.flags&1)!=0){ nd.cv.x=0; nd.cv.y=0; nd.cv.z=0; } nd.pos.add(nd.velo); nd.velo.sub(nd.cv); nd.cv.x=0; nd.cv.y=0; nd.cv.z=0; nd.velo.smul(0.95); } }, draw:function(){ p3d.clear(“#000”,this.mviewport.w,this.mviewport.h); this.transformpolygons(); this.mrendertris.sort(clothapp.zsortcmp); varlen=this.mrendertris.length; vart,sh; for(vari=0;i<len;i++){ t=this.mrendertris[i]; if(p3d.texture!=t.texture) p3d.texture=t.texture; sh=undefined; if(t.lighting&&t.shade>0.01) sh=“rgba(0,0,0,”+t.shade+“)”; p3d.drawtriangle(t.tposs,t.uvs,sh); } }, applytension:function(){ vari,k,nd; varv=newvec3(); varnlen=this.mnodes.length; varnaturallen=this.mnlen; for(k=0;k<nlen;k++) { nd=this.mnodes[k]; varf=nd.f; for(i=0;i<4;i++) { varnbr=nd.links[i]; if(!nbr)continue; varlen=v.copyfrom(nbr.pos).sub(nd.pos).norm(); vardlen=len–naturallen; if(dlen>0){ v.smul(dlen*0.5/len); f.x+=v.x; f.y+=v.y; f.z+=v.z; nd.cv.add(v.smul(0.8)); } } } }, tuptransforms:function(){ this.mprojmat=newm44(); this.mprojmat.perspectivelh(24,15,10,9000); this.mviewmat=newm44(); this.updateviewtrans(0); }, updateviewtrans:function(ry){ this.mviewfroma.z=math.cos(ry)*380; this.mviewfroma.x=math.sin(ry)*380; this.mviewfrom.smul(0.7); this.mviewfrom.x+=this.mviewfroma.x*0.3; this.mviewfrom.y+=this.mviewfroma.y*0.3; this.mviewfrom.z+=this.mviewfroma.z*0.3; this.mviewmat.lookatlh(this.vup,this.mviewfrom,this.vat); }, generatecloth:function(ba_y){ varcols=9; varrows=8; varstep=22; this.mnlen=step*0.9; varw=(cols-1)*step; vari,k; for(k=0;k<rows;k++) { for(i=0;i<cols;i++) { varnd=newclothnode(); nd.pos.x=-(w/2)+i*step; nd.pos.y=ba_y-k*step/2; nd.pos.z=k*16; nd.uv.u=i/(cols-1); nd.uv.v=k/(rows-1); if(i>0){ varprv_nd=this.mnodes[this.mnodes.length-1]; prv_nd.links[1]=nd; nd.links[0]=prv_nd; } if(k>0){ varup_nd=this.mnodes[this.mnodes.length-cols]; up_nd.links[4]=nd; nd.links[3]=up_nd; } if(i!=0&&i!=4&&i!=(cols-1)) nd.flags|=4; this.mnodes.push(nd); } } //fixleft-topandright-top this.mnodes[0].flags|=1; this.mnodes[4].flags|=1; this.mnodes[cols-1].flags|=1; this.mltnode=this.mnodes[0]; this.mrtnode=this.mnodes[cols-1]; }, generaterendertriangles:function() { if(!this.mrendertris)this.mrendertris=[]; vari; varnd; varnlen=this.mnodes.length; for(i=0;i<nlen;i++) { nd=this.mnodes[i]; if(nd.links[1]&&nd.links[1].links[4]){ vart=newrendertriangle(); t.texture=this.texture1; t.poss[0]=nd.pos; t.poss[1]=nd.links[1].pos; t.poss[2]=nd.links[1].links[4].pos; t.uvs[0]=nd.uv; t.uvs[1]=nd.links[1].uv; t.uvs[2]=nd.links[1].links[4].uv; this.mrendertris.push(t); t=newrendertriangle(); t.texture=this.texture1; t.poss[0]=nd.pos; t.poss[1]=nd.links[1].links[4].pos; t.poss[2]=nd.links[4].pos; t.uvs[0]=nd.uv; t.uvs[1]=nd.links[1].links[4].uv; t.uvs[2]=nd.links[4].uv; this.mrendertris.push(t); } } this.addbgtriangles(this.mnodes[0].pos.y); }, addbgtriangles:function(by){ varcols=4; vart,x,y,sz=110; varox=-(cols*sz)/2; varoz=-(cols*sz)/2; for(y=0;y<cols;y++){ for(x=0;x<cols;x++){ varbv=((x+y)&1)*0.5; t=newrendertriangle(); t.texture=this.texture2; t.poss[0]=newvec3(ox+x*sz,by,oz+y*sz); t.poss[1]=newvec3(ox+x*sz+sz,by,oz+y*sz); t.poss[2]=newvec3(ox+x*sz,by,oz+y*sz+sz); t.uvs[0]={u:0,v:bv}; t.uvs[1]={u:0.5,v:bv}; t.uvs[2]={u:0,v:bv+0.5}; if((x==1||x==2)&&(民警入党申请书y==1||y==2)) this.modifyroofuv(t,x==2,bv); t.lighting=fal; t.zbias=0.5; this.mrendertris.push(t); t=newrendertriangle(); t.texture=this.texture2; t.poss[0]=newvec3(ox+x*sz,by,oz+y*sz+sz); t.poss[1]=newvec3(ox+x*sz+sz,by,oz+y*sz); t.poss[2]=newvec3(ox+x*sz+sz,by,oz+y*sz+sz); t.uvs[0]={u:0,v:bv+0.5}; t.uvs[1]={u:0.5,v:bv}; t.uvs[2]={u:0.5,v:bv+0.5}; if((x==1||x==2)&&(y==1||y==2)) this.modifyroofuv(t,x==2,bv); t.lighting=fal; t.zbias=0.5; this.mrendertris.push(t); } } }, modifyroofuv:function(t,rv,bv){ if(rv){ t.uvs[0].u=0.5–t.uvs[0].u; t.uvs[1].u=0.5–t.uvs[1].u; t.uvs[2].u=0.5–t.uvs[2].u; } t.uvs[0].u+=0.5; t.uvs[1].u+=0.5; t.uvs[2].u+=0.5; if(rv){ t.uvs[0].v=0.5–t.uvs[0].v+bv+bv; t.uvs[1].v=0.5–t.uvs[1].v+bv+bv; t.uvs[2].v=0.5–t.uvs[2].v+bv+bv; } }, transformpolygons:function(){ vartrans=newm44(); trans.mul(this.mviewmat,this.mprojmat); varhw=this.mviewport.ow; varhh=this.mviewport.oh; varlen=this.mrendertris.length; vart; varspos=[0,0,0,0]; for(vari=0;i<len;i++){ t=this.mrendertris[i]; for(vark=0;k<3;k++){ trans.transvec3(spos,t.poss[k].x,t.poss[k].y,t.poss[k].z); varw=spos[3]; spos[0]/=w; spos[1]/=w; spos[2]/=w; spos[0]*=this.mviewport.w; spos[1]*=–this.mviewport.h; spos[0]+=hw; spos[1]+=hh; t.tposs[k].x=spos[0]; t.tposs[k].y=spos[1]; t.tposs[k].z=spos[2]; } varv1=(newvec3()).copyfrom(t.poss[1]).sub(t.poss[0]).normalize(); varv2=(newvec3()).copyfrom(t.poss[2]).sub(t.poss[1]).normalize(); varn=(newvec3()).cp(v1,v2); trans.transvec3rot(spos,n.x,n.y,n.z); if(t.lighting){ if(spos[2]>0) t.shade=0.8 el{ t.shade=0.1–n.y*0.6; if(t.shade<0)t.shade=0; } } t.sortkey=math.floor((t.tposs[0].z+t.tposs[1].z+t.tposs[2].z+t.zbias)*1000); } } } functionclothnode() { this.flags=0; this.pos=newvec3(); this.velo=newvec3(); this.cv=newvec3(); this.f=newvec3(); this.links=[null,null,null,null]; this.uv={u:0,v:0}; } functionrendertriangle() { this.texture=null; this.poss=newarray(3); this.tposs=[newvec3(),newvec3(),newvec3()]; this.uvs=[{u:0,v:0},{u:0,v:0},{u:0,v:0}]; this.shade=0; this.lighting=true; this.zbias=0; this.sortkey=0; } 以上就是html5 3d衣服摇摆动画特效的源码介绍，需要更为深入学习的下载源代码来研究。
本文word下载地址：HTML5 3D衣服摇摆动画特效.doc
本文 PDF 下载地址：HTML5 3D衣服摇摆动画特效.pdf
