The Rotation (function remx ()) is recorded by updating the transformation matrix.
Using the matrix to calculate the rotation of the cube vertex coordinates,
The space coordinates of each vertex are converted into planar coordinates (function p2d ()) by "near large and far small".
Using the z-coordinate of the normal vectors of each surface of the cube to determine whether the surface is visible,
Use a 1px div layer to simulate a quadrilateral (function gra2htm ()).
Mouse drag code modified by someone else's code.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>Cube</title> <script type=" Text/javascript "> Function gra2htm (clr,a,b , c,d) {var result= '; var Maxx=math.max (a[0],b[0],c[0],d[0]), Minx=math.min (a[0],b[0],c[0],d[0)); var Maxy=math.max (a[1],b[1],c[1],d[1]), Miny=math.min (a[1],b[1],c[1],d[1)); X=new Array (a[0],b[0],c[0],d[0],a[0],b[0],c[0],d[0],a[0],b[0]); Y=new Array (a[1],b[1],c[1],d[1],a[1],b[1],c[1],d[1],a[1],b[1]); /*/begin for (Var i=0;i<=3;i++) {result+= ' <div +x[i]+ ' px; top: ' +y[i]+ ' px; width:2px; height:2px; backgr Ound-color: #FFF "></div>"; }//end*/if (Maxx-minx>=maxy-miny) {for (Var i=3;i<=6;i++) if (y[i]==miny) {var k=l=i; Break } if (y[k]==y[k-1]) k--; Xa= (X[k-1]-x[k])/(Y[k-1]-y[k]); if (y[l]==y[l+1]) l++; Xb= (X[l+1]-x[l])/(Y[l+1]-y[l]); PL=X[K];p w=x[l]-x[k]; for (Var i=miny+1;i<=maxy;i++) {if (i>y[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+= ' <div +i + ' px; Left: ' +math.round (pl+=xa) + ' px; Width: ' +math.round (pw+=xb-xa) + ' px; height:1px; Position:absolute; Background-color: ' +CLR + '; ></div> '; } else {for (Var i=3;i<=6;i++) if (X[i]==minx) {var k=l=i; Break } if (x[k]==x[k+1]) k++; Ya= (Y[k+1]-y[k])/(X[k+1]-x[k]); if (X[l]==x[l-1]) l--; Yb= (Y[l-1]-y[l])/(X[l-1]-x[l]); PT=Y[K];p h=y[l]-y[k]; for (Var i=minx+1;i<=maxx;i++) {if (i>x[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+= ' <div +i + ' px; Top: ' +math.round (Pt+=ya) + ' px; Height: ' +math.round (Ph+=yb-ya) + ' px; width:1px; Position:absolute; Background-color: ' +CLR + '; ></div> '; } 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; } </script> <script type= "Text/javascript" >//const var pa=new Array (); Pa[1]=new Array (50,50,-50); Pa[2]=new Array (50,50,50); Pa[3]=new Array (50,-50,50); Pa[4]=new Array (50,-50,-50); Pa[5]=new Array ( -50,50,-50); Pa[6]=new Array ( -50,50,50); Pa[7]=new Array ( -50,-50,50); Pa[8]=new Array ( -50,-50,-50); var idx=new Array (); Idx[0]=new Array (1,2,3,4); Idx[1]=new Array (1,4,8,5); Idx[2]=new Array (1,5,6,2); Idx[3]=new Array (7,3,2,6); Idx[4]=new Array (7,8,4,3); Idx[5]=new Array (7,6,5,8); var clr=new Array (' #03c ', ' #c00 ', ' #fc0 ', ' #f60 ', ' #fff ', ' #090 '); The End Function cube (ID) {if (!document.getelementbyid (ID)) is return false; This.id=document.getelementbyid (ID); This.angle=new Array (); This.angle2=new Array (); for (i=1;i<=8;i++) this.angle[i]=new Array (3); Alert (' success '); } cube.prototype={matrix:new Array (1,0,0,0,1,0,0,0,1), paint:function () {var result= '; for (i=1;i<=8;i++) {this.angle[i][0]=this.matrix[0]*pa[i][0]+this.matrix[1]*pa[i][1]+this.matrix[2]*pa[i][2]; THIS.ANGLE[I][1]=THIS.MATRIX[3]*PA[I][0]+THIS.MATRIX[4]*PA[I][1]+THIS.MATRIX[5]*PA[I][2]; THIS.ANGLE[I][2]=THIS.MATRIX[6]*PA[I][0]+THIS.MATRIX[7]*PA[I][1]+THIS.MATRIX[8]*PA[I][2]; This.angle2[i]=p2d (this.angle[i][0],this.angle[i][1],this.angle[i][2]); for (i=0;i<6;i++) {if (this.angle2[idx[i][2]][0]-this.angle2[idx[i][1]][0]) * (this.angle2[idx[i][ 0]][1]-THIS.ANGLE2[IDX[I][1]][1])-(this.angle2[idx[i][2]][1]-this.angle2[idx[i][1]][1]) * (this.angle2[i Dx[i][0]][0]-this.angle2[idx[i][1]][0] <0) {result+=gra2htm (clr[i],this.angle2[idx[i][3]],this.angle2[idx[i) [2]],this.angle2[idx[i][1]], this.angle2[idx[i][0]); }//Document.getelementByid (' AA '). Value=result; This.id.innerhtml=result; }, Roll:function (Type,theta) {this.matrix=remx (Type,theta,this.matrix); This.paint (); } </script> <script type= "Text/javascript" > var tmr= (New Date ()). GetTime (); function drag (obj,e) {e=e?e:window.event; var Setx=e.clientx,sety=e.clienty; if (Document.addeventlistener) {document.addeventlistener (' MouseMove ', Infmove, true); Document.addeventlistener (' MouseUp ', infup, true); else if (document.attachevent) {document.attachevent (' onmousemove ', infmove); Document.attachevent (' onmouseup ', infup); function Infmove (e) {tmr2= (new Date). GetTime (); if (tmr2-tmr<100) return false; TMR=TMR2; Cc.roll (' Ry ', (E.CLIENTX-SETX)/50); Setx=e.clientx; Cc.roll (' Rx ', (e.clienty-sety)/50); Sety=e.clienty; Cc.paint (); return false; function Infup () { if (Document.removeeventlistener) {document.removeeventlistener (' MouseMove ', Infmove, true); Document.removeeventlistener (' MouseUp ', infup, true); else if (document.detachevent) {document.detachevent (' onmousemove ', infmove); Document.detachevent (' onmouseup ', infup); }//Shawl.qiu script} </script> </pead> <body> <div id= "T" oncontextmenu= "return False "Onmousedown=" Drag (this,event) ></div> <input type= "button" onclick= "Clearinterval (TT)" value= "Stop"/& Gt <input type= "button" onclick= "Clearinterval (TT); Tt=setinterval (' Cc.roll" (' rx\ ', 0.2); Cc.paint (); ', M ' value= ' Down "/> <input type=" button "onclick=" Clearinterval (TT); Tt=setinterval (' Cc.roll (\ ' ry\ ', 0.2); Cc.paint (); ', "Value=" right "/> <script type=" Text/javascript "> var tt,cc=new cube (' t '); Cc.roll (' ry ', 1); Cc.paint (); </script> </body&Gt </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
