Heim > Web-Frontend > js-Tutorial > javascript实现的三维正方体(兼容ie7,ff)_图象特效

javascript实现的三维正方体(兼容ie7,ff)_图象特效

WBOY
Freigeben: 2016-05-16 19:06:10
Original
1277 Leute haben es durchsucht

通过更新变换矩阵来记录转动(函数remx()).
利用矩阵计算出转动后的正方体顶点坐标,
把各个顶点的空间坐标按”近大远小”转换成平面坐标(函数p2d()),
用正方体各个面的法向量的z坐标判断该面是否可见,
用高为1px的div层模拟画出四边形(函数gra2htm()).
鼠标拖曳的代码用别人的代码修改的.

'; } //end*/ if(maxx-minx>=maxy-miny){ for(var i=3;iy[k-1]){ k--; xa=(x[k-1]-x[k])/(y[k-1]-y[k]); } if(i>y[l+1]){ l++; xb=(x[l+1]-x[l])/(y[l+1]-y[l]); } result+='
'; } } else { for(var i=3;ix[k+1]){ k++; ya=(y[k+1]-y[k])/(x[k+1]-x[k]); } if(i>x[l-1]){ l--; yb=(y[l-1]-y[l])/(x[l-1]-x[l]); } result+='
'; } } return result; } function remx(type,theta,omx){ var sinA=Math.sin(theta),cosA=Math.cos(theta); var m=new Array(); switch(type){ case 'rx': m[0]=omx[0];m[1]=omx[1];m[2]=omx[2]; m[3]=omx[3]*cosA-omx[6]*sinA;m[4]=omx[4]*cosA-omx[7]*sinA;m[5]=omx[5]*cosA-omx[8]*sinA; m[6]=omx[3]*sinA+omx[6]*cosA;m[7]=omx[4]*sinA+omx[7]*cosA;m[8]=omx[5]*sinA+omx[8]*cosA; break; case 'ry': m[0]=omx[0]*cosA-omx[6]*sinA;m[1]=omx[1]*cosA-omx[7]*sinA;m[2]=omx[2]*cosA-omx[8]*sinA; m[3]=omx[3];m[4]=omx[4];m[5]=omx[5]; m[6]=omx[0]*sinA+omx[6]*cosA;m[7]=omx[1]*sinA+omx[7]*cosA;m[8]=omx[2]*sinA+omx[8]*cosA; break; } return m; } function p2d(x,y,z){ var l=100,t=100; var result=new Array(); result[0]=Math.round(l+x/(z*0.004+1.25)); result[1]=Math.round(t+y/(z*0.004+1.25)); return result; }

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage