<html xmlns:v ="urn:schemas-microsoft-com:vml">
<head>
<title>SVG-VML-3D-Example - Rubik's Cube</title>
<style>
v\:* { behavior: url(#default#VML); }
input { background-color:#c0c0ff; width:28; height:28; font-family:'Times New Roman'; font-size:14pt; }
tr { height:30px; }
td { width:30px; }
</style>
<script src="svgvml3d.js" LANGUAGE="JavaScript" TYPE="text/javascript"></script>
<script src="colorbox3d.js" LANGUAGE="JavaScript" TYPE="text/javascript"></script>
<script>
var i, j, k, n, S, X0Col, Y0Col, Z0Col, X1Col, Y1Col, Z1Col, isRotating=false;
var MoveCount=0, MaxMoveCount=0, ScrambleMove=9999, StartTime, EndTime;
History=new Array(3);
for (i=0; i<3; i++) History[i]=new Array();
ColCube=new Array(3);
for (i=0; i<3; i++) ColCube[i]=new Array(3);
for (i=0; i<3; i++)
{ for (j=0; j<3; j++)
ColCube[i][j]=new Array(3);
}
CB=new Array(27);
TempSum=new Array(6);
//useSVG=true;//you can also change this by hand
function Init()
{ if (useSVG)
{ if (! SVGObjects[0])
{ setTimeout("Init()",100);
return;
}
S=new Scene3D(SVGObjects[0],0,270,270);
}
else S=new Scene3D(document.getElementById("Scene1"),1);
n=0;
for (i=0; i<3; i++)
{ for (j=0; j<3; j++)
{ for (k=0; k<3; k++)
{ X0Col="#000000";
Y0Col="#000000";
Z0Col="#000000";
X1Col="#000000";
Y1Col="#000000";
Z1Col="#000000";
if (i==0) X0Col="#ff8800";
if (j==0) Y0Col="#00ff00";
if (k==0) Z0Col="#ffffff";
if (i==2) X1Col="#ff0000";
if (j==2) Y1Col="#0000ff";
if (k==2) Z1Col="#ffff00";
ColCube[i][j][k]=n;
CB[n]=new ColorBox3D(S,i-1.5,j-1.5,k-1.5,i-0.5,j-0.5,k-0.5,X0Col,Y0Col,Z0Col,X1Col,Y1Col,Z1Col,"#333333",2);
n++;
}
}
}
S.AutoCenter();
S.Dist*=1.8;
S.ZoomAll*=1.1;
S.ChangeViewer(-15,-22.5);
S.ChangeLight(-15,-22.5);
S.DiffuseLight=0.7;
S.Sort();
S.Draw();
}
function New()
{ if (isRotating) return;
n=0;
for (i=0; i<3; i++)
{ for (j=0; j<3; j++)
{ for (k=0; k<3; k++)
{ ColCube[i][j][k]=n;
CB[n].SetPosition(i-1.5,j-1.5,k-1.5,i-0.5,j-0.5,k-0.5);
n++;
}
}
}
S.Th=0.0;
S.Fi=0.0;
S.ThLight=0.0;
S.FiLight=0.0;
S.ChangeViewer(-15,-22.5);
S.ChangeLight(-15,-22.5);
S.Sort();
S.Draw();
MoveCount=0;
MaxMoveCount=0;
ScrambleMove=9999;
document.forms[0].MC.value=MoveCount;
}
function MoveBack()
{ if (isRotating) return;
if (MoveCount==0) return;
if (MoveCount==ScrambleMove)
{ if (! confirm("You are cheating !")) return;
else ScrambleMove=9999;
}
MoveCount--;
document.forms[0].MC.value=MoveCount;
if (History[0][MoveCount]=="V")
ChangeViewer(-History[1][MoveCount],-History[2][MoveCount], 0);
else
RotateClick(History[0][MoveCount],History[1][MoveCount],-History[2][MoveCount], 0);
}
function MoveForward()
{ if (isRotating) return;
if (MoveCount==MaxMoveCount) return;
if (History[0][MoveCount]=="V")
ChangeViewer(History[1][MoveCount],History[2][MoveCount], 0);
else
RotateClick(History[0][MoveCount],History[1][MoveCount],History[2][MoveCount], 0);
MoveCount++;
document.forms[0].MC.value=MoveCount;
}
function ChangeViewer(ttheta, ffi, bb)
{ if (isRotating) return;
if ((S.Th+ttheta>60)||(S.Th+ttheta<-60)) return;
if (bb>0)
{ if (History[0][MoveCount]!="V")
{ History[0][MoveCount]="V"; MaxMoveCount=MoveCount+1; }
if (History[1][MoveCount]!=ttheta)
{ History[1][MoveCount]=ttheta; MaxMoveCount=MoveCount+1; }
if (History[2][MoveCount]!=ffi)
{ History[2][MoveCount]=ffi; MaxMoveCount=MoveCount+1; }
MoveCount++;
document.forms[0].MC.value=MoveCount;
}
S.ChangeViewer(ttheta, ffi);
S.ChangeLight(ttheta, ffi);
if (bb<2)
{ S.Sort();
S.Draw();
}
}
function random(nn)
{ return(Math.floor(Math.random()*1000)%nn);
}
function Scramble()
{ var ii, aa, pp, dd, nn=document.forms[0].ScrambleMoves.options[document.forms[0].ScrambleMoves.selectedIndex].value;
for (ii=1; ii<=nn; ii++)
{ if (ii%2==0)
{ if (random(2)==0) ChangeViewer(0, 45, 2);
else ChangeViewer(0, -45, 2);
}
else
{ aa=random(3);
if (aa==0) aa="X";
if (aa==1) aa="Y";
if (aa==2) aa="Z";
if (aa=="X") pp=2;
else pp=random(3);
dd=random(2)*2-1;
RotateClick(aa,pp,dd,2);
}
}
S.Sort();
S.Draw();
ScrambleMove=MoveCount;
Now = new Date();
StartTime = Now.getTime() / 1000;
}
function RotateClick(aAxis,aPlane,aDir,bb)
{ if (isRotating) return;
if (bb>0)
{ if (History[0][MoveCount]!=aAxis)
{ History[0][MoveCount]=aAxis; MaxMoveCount=MoveCount+1; }
if (History[1][MoveCount]!=aPlane)
{ History[1][MoveCount]=aPlane; MaxMoveCount=MoveCount+1; }
if (History[2][MoveCount]!=aDir)
{ History[2][MoveCount]=aDir; MaxMoveCount=MoveCount+1; }
MoveCount++;
document.forms[0].MC.value=MoveCount;
}
var ss=0;
if (bb==2) ss=1;
if (aAxis=="Z")
{ Rotate("Z",aPlane,aDir,0,ss);
return;
}
if ((S.Fi>325)||(S.Fi<45))
{ Rotate(aAxis,aPlane,aDir,0,ss);
return;
}
if (S.Fi<135)
{ if (aAxis=="X")
Rotate("Y",2-aPlane,-aDir,0,ss);
if (aAxis=="Y")
Rotate("X",aPlane,aDir,0,ss);
return;
}
if (S.Fi<225)
{ Rotate(aAxis,2-aPlane,-aDir,0,ss);
return;
}
if (aAxis=="X")
Rotate("Y",aPlane,aDir,0,ss);
if (aAxis=="Y")
Rotate("X",2-aPlane,-aDir,0,ss);
}
function Rotate(aAxis,aPlane,aDir,nn,ss)
{ isRotating=true;
var ii, jj, kk, mm=nn+1;
if (aAxis=="X")
{ for (jj=0; jj<3; jj++)
{ for (kk=0; kk<3; kk++)
CB[ColCube[aPlane][jj][kk]].RotateX(22.5*(3*ss+1)*aDir,0);
}
}
if (aAxis=="Y")
{ for (ii=0; ii<3; ii++)
{ for (kk=0; kk<3; kk++)
CB[ColCube[ii][aPlane][kk]].RotateY(22.5*(3*ss+1)*aDir,0);
}
}
if (aAxis=="Z")
{ for (ii=0; ii<3; ii++)
{ for (jj=0; jj<3; jj++)
CB[ColCube[ii][jj][aPlane]].RotateZ(22.5*(3*ss+1)*aDir,0);
}
}
if (ss==0)
{ if (aAxis=="X") S.OrderWeight.x=3;
if (aAxis=="Y") S.OrderWeight.y=3;
if (aAxis=="Z") S.OrderWeight.z=3;
S.Sort();
if (aAxis=="X") S.OrderWeight.x=1;
if (aAxis=="Y") S.OrderWeight.y=1;
if (aAxis=="Z") S.OrderWeight.z=1;
S.Draw();
if (mm<4)
{ setTimeout("Rotate('"+aAxis+"',"+aPlane+","+aDir+","+mm+","+ss+")",100);
return;
}
}
isRotating=false;
if (aAxis=="X")
{ if (aDir>0)
{ m=ColCube[aPlane][0][0];
ColCube[aPlane][0][0]=ColCube[aPlane][0][2];
ColCube[aPlane][0][2]=ColCube[aPlane][2][2];
ColCube[aPlane][2][2]=ColCube[aPlane][2][0];
ColCube[aPlane][2][0]=m;
m=ColCube[aPlane][0][1];
ColCube[aPlane][0][1]=ColCube[aPlane][1][2];
ColCube[aPlane][1][2]=ColCube[aPlane][2][1];
ColCube[aPlane][2][1]=ColCube[aPlane][1][0];
ColCube[aPlane][1][0]=m;
}
else
{ m=ColCube[aPlane][0][0];
ColCube[aPlane][0][0]=ColCube[aPlane][2][0];
ColCube[aPlane][2][0]=ColCube[aPlane][2][2];
ColCube[aPlane][2][2]=ColCube[aPlane][0][2];
ColCube[aPlane][0][2]=m;
m=ColCube[aPlane][1][0];
ColCube[aPlane][1][0]=ColCube[aPlane][2][1];
ColCube[aPlane][2][1]=ColCube[aPlane][1][2];
ColCube[aPlane][1][2]=ColCube[aPlane][0][1];
ColCube[aPlane][0][1]=m;
}
}
if (aAxis=="Y")
{ if (aDir<0)
{ m=ColCube[0][aPlane][0];
ColCube[0][aPlane][0]=ColCube[0][aPlane][2];
ColCube[0][aPlane][2]=ColCube[2][aPlane][2];
ColCube[2][aPlane][2]=ColCube[2][aPlane][0];
ColCube[2][aPlane][0]=m;
m=ColCube[0][aPlane][1];
ColCube[0][aPlane][1]=ColCube[1][aPlane][2];
ColCube[1][aPlane][2]=ColCube[2][aPlane][1];
ColCube[2][aPlane]
利用SVG或VML在网页上实现3D的曲面效果
4星 · 超过85%的资源 需积分: 10 99 浏览量
2010-10-30
20:35:26
上传
评论 1
收藏 116KB RAR 举报 
svgvml3d.rar （26个子文件） 
svgvml3d 
svgvml3d_math.html 12KB torus.html 4KB svgvml3d_doc.html 14KB platonic1.html 5KB
functionplot.gif 7KB torus_.gif 8KB chart.gif 16KB rubikscube.gif 6KB rubikscube.html 15KB torus.gif 8KB index.html 5KB changes.html 3KB
colorbox3d.js 4KB orderweight0.gif 20KB boundingbox.js 28KB platonic.js 14KB platonic.gif 6KB svgvml3d.js 24KB orderweight1.gif 9KB
scene.svg 438B chart.html 9KB functionplot.html 8KB platonic.html 5KB binary_chart.html 8KB coordsys_test.html 5KB torus.js 4KB资源评论
yanmin06142013-05-08一大堆代码，谁会慢慢看呢，不如直接找教程了。
shanhui14332013-09-11一般吧，有点麻烦- 梨落满秋2019-08-12一般吧，测试
