这两天忙着做了一个JavaScript3D效果,完全原创!和老外的差远了!没有借鉴任何人代码!有提供源代码下载,
转载请说明出处!: http://MacFig.com 备案中 请访问 ChangeNow.cn
没有像以前那样写很多可控参数,为了兼容性好,没有用线连接点!(好麻烦!哈哈!不过自己是可以改的!)
JavaScript3DCube原创代码下载(修正无Bug 版):https://files.cnblogs.com/NONE/JavaScript3DCube.rar
玩法:按住鼠标随便移动!
微调:按W S A D键!
注意:请使用内核为IE7以上版本(IE性能太差,或不支持Json),或火狐,Saferi,Opera,Chrome!!!!!!否者无法观看 2010 say:其实不是不支持,是那时我技术差,是都可以支持的
(内有一Bug 正在查原因,我的老版本没有,这里的有,希望有人告诉我怎么回事,我的方法很笨,希望得到高手指点!谢谢!)BUG 已修正!!!!
我还有一个特效是12超动感按钮,哪天我有空发上来,到时来看哦!
----------------下一作品3D曲面积分模型!Maybe long time!----------------
L
L
作
H
世
界
平
和
这是代码,不看也罢,有下载!
Code
function GEBI(O)
{
return document.getElementById(O);
}
///定义单层
var YSO=[];
YSO[0]=
{
CxZ:400,
CyY:90,
CzX:90,
R:55,
}
//
///定义层
/////初始化第一层
var XSO=[];
XSO[0]=
{
OOA:270,//初始化第一层夹角
IPP:[[45,0,0,0,0],[135,0,0,0,0],[225,0,0,0,0],[315,0,0,0,0]],//内部偏移角,X轴坐标,Y轴坐标,Z轴:zIndex
R:100,
Cx:YSO[0].CzX,
Cy:0,
Cz:0,
}
/////初始化第二层夹角
XSO[1]=
{
OOA:90,//初始化第二层夹角
IPP:[[315,0,0,0,0],[225,0,0,0,0],[135,0,0,0,0],[45,0,0,0,0]],//与相反层,角对称相反内部偏移角
R:100,
Cx:YSO[0].CzX,
Cy:0,
Cz:0,
}
//..
///旋转分析
var mouse=
{
nX:0,
nY:0,
aA:0,
oX:0,
oY:0,
dX:-1,
dY:-1,
}
var kN=0;
document.onkeydown=function (e)
{
e=e||window.event;
kN=e.keyCode;
s();
kN=-1;
}/**/
document.onmousedown=function(e)
{
e=e||window.event;
mouse.oX=e.clientX||e.x;
mouse.oY=e.clientY||e.y;
mouse.aA=1;
}
document.onmouseup=function()
{
mouse.aA=0;
}
document.onmousemove=function(e)
{
if(mouse.aA==1)
{
e=e||window.event;
mouse.nX=e.clientX||e.x;
mouse.nY=e.clientY||e.y;
if(mouse.nX>mouse.oX)
{
mouse.dX=1;
}
else if(mouse.nX<mouse.oX)
{
mouse.dX=0;
}
if(mouse.nY>mouse.oY)
{
mouse.dY=1;
}
else if(mouse.nY<mouse.oY)
{
mouse.dY=0;
}
s();
mouse.dX=-1;
mouse.dY=-1;
mouse.oX=mouse.nX;
mouse.oY=mouse.nY;
}
}
function s()
{
mA();
gAC();
c();
iACP();
}
//角度修正
function mA()
{
///修正第一层夹角
if(mouse.dY==1||kN==38)
{
XSO[0].OOA+=0.9999;
XSO[1].OOA+=0.9999;
}
else if(mouse.dY==0||kN==40)
{
XSO[0].OOA-=0.9999;
XSO[1].OOA-=0.9999;
}
XSO[0].OOA=XSO[0].OOA%360+360;
XSO[1].OOA=XSO[1].OOA%360+360;
///修正第二层夹角
if(mouse.dX==1||kN==39)
{
lC(0,1);
lC(1,1);
}
else if(mouse.dX==0||kN==37)
{
lC(0,0);
lC(1,0);
}
}
function lC(X,D)
{
for(var IPNo in XSO[X].IPP)
{
if(D==1)
{
if(X==0)
{
XSO[X].IPP[IPNo][0]-=1;
}
else if(X==1)
{
XSO[X].IPP[IPNo][0]+=1;
}
}else if(D==0)
{
if(X==0)
{
XSO[X].IPP[IPNo][0]+=1;
}
else if(X==1)
{
XSO[X].IPP[IPNo][0]-=1;
}
}
}
}
//得出绝对坐标
var r =Math.PI/180;
function gAC()
{
for(var XSNo in XSO)
{
XSO[XSNo].Cy=YSO[0].CyY+YSO[0].R*Math.sin(r*XSO[XSNo].OOA);
}
for(var XSNo in XSO)
{
XSO[XSNo].Cz=YSO[0].CxZ+YSO[0].R*Math.cos(r*XSO[XSNo].OOA);
}
//获得第一层上内部点点的坐标未进行扭曲,与屏幕平行
for(var IPNo in XSO[0].IPP )
{
XSO[0]. IPP[IPNo][1]=XSO[0].Cx+XSO[0].R*Math.cos(r*XSO[0].IPP[IPNo][0])
}
for(var IPNo in XSO[0].IPP )
{
XSO[0]. IPP[IPNo][2]=XSO[0].Cy+XSO[0].R*Math.sin(r*XSO[0].IPP[IPNo][0])
}
//获得第二层内部点的坐标未进行扭曲,
for(var IPNo in XSO[0].IPP )
{
XSO[1]. IPP[IPNo][1]=XSO[1].Cx+XSO[1].R*Math.cos(r*XSO[1].IPP[IPNo][0])
}
for(var IPNo in XSO[0].IPP )
{
XSO[1]. IPP[IPNo][2]=XSO[1].Cy+XSO[1].R*Math.sin(r*XSO[1].IPP[IPNo][0])
}
for(var XSONo in XSO)
{
tXA(XSO[XSONo]);
}
}
///Y
function tXA(XSON)//兼容新原因无法提取方法使之更简短,提取后只有IE8支持,纳闷中!!
{
/// 捕捉1 象限
if(XSON.Cy>=YSO[0].CyY&&XSON.Cz>YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
}
}
}
/// 捕捉 3象限
else if(XSON.Cy<=YSO[0].CyY&&XSON.Cz<YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))
}
}
}
///捕捉2 象限
else if(XSON.Cy>YSO[0].CyY&&XSON.Cz<=YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
//alert(XSON.IPP[IPNo][3]);
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
}
}
}
///捕捉4 象限
else if(XSON.Cy<YSO[0].CyY&&XSON.Cz>=YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
}
}
}
}
//收缩
function c()
{
for(var XSONo in XSO)
{
for(var IPNo in XSO[XSONo]. IPP)
{
XSO[XSONo]. IPP[IPNo][4]=(XSO[0].IPP[IPNo][3]/20);
}
}
}
//载入空间载体
var p = new Array(8);
function iO()
{
for(var PNo=0;PNo <p.length;PNo++)
{
p[PNo]=GEBI("D"+PNo);
}
s();
}
function iACP()
{
for(var PNo=0;PNo <p.length/2;PNo++)
{
p[PNo].style.left=XSO[0].IPP[PNo][1]+"px";
p[PNo].style.top=XSO[0].IPP[PNo][2]+"px";
p[PNo].style.zIndex=XSO[0].IPP[PNo][3];
p[PNo].style.fontSize= XSO[0]. IPP[PNo][4]+"px";
}
for(var PNo=4;PNo <p.length;PNo++)
{
p[PNo].style.left=XSO[1].IPP[PNo-4][1]+"px";
p[PNo].style.top=XSO[1].IPP[PNo-4][2]+"px";
p[PNo].style.zIndex=XSO[1].IPP[PNo-4][3];
p[PNo].style.fontSize= XSO[1]. IPP[PNo-4][4]+"px";
}
}
window.onload=iO;
function GEBI(O)
{
return document.getElementById(O);
}
///定义单层
var YSO=[];
YSO[0]=
{
CxZ:400,
CyY:90,
CzX:90,
R:55,
}
//
///定义层
/////初始化第一层
var XSO=[];
XSO[0]=
{
OOA:270,//初始化第一层夹角
IPP:[[45,0,0,0,0],[135,0,0,0,0],[225,0,0,0,0],[315,0,0,0,0]],//内部偏移角,X轴坐标,Y轴坐标,Z轴:zIndex
R:100,
Cx:YSO[0].CzX,
Cy:0,
Cz:0,
}
/////初始化第二层夹角
XSO[1]=
{
OOA:90,//初始化第二层夹角
IPP:[[315,0,0,0,0],[225,0,0,0,0],[135,0,0,0,0],[45,0,0,0,0]],//与相反层,角对称相反内部偏移角
R:100,
Cx:YSO[0].CzX,
Cy:0,
Cz:0,
}
//..
///旋转分析
var mouse=
{
nX:0,
nY:0,
aA:0,
oX:0,
oY:0,
dX:-1,
dY:-1,
}
var kN=0;
document.onkeydown=function (e)
{
e=e||window.event;
kN=e.keyCode;
s();
kN=-1;
}/**/
document.onmousedown=function(e)
{
e=e||window.event;
mouse.oX=e.clientX||e.x;
mouse.oY=e.clientY||e.y;
mouse.aA=1;
}
document.onmouseup=function()
{
mouse.aA=0;
}
document.onmousemove=function(e)
{
if(mouse.aA==1)
{
e=e||window.event;
mouse.nX=e.clientX||e.x;
mouse.nY=e.clientY||e.y;
if(mouse.nX>mouse.oX)
{
mouse.dX=1;
}
else if(mouse.nX<mouse.oX)
{
mouse.dX=0;
}
if(mouse.nY>mouse.oY)
{
mouse.dY=1;
}
else if(mouse.nY<mouse.oY)
{
mouse.dY=0;
}
s();
mouse.dX=-1;
mouse.dY=-1;
mouse.oX=mouse.nX;
mouse.oY=mouse.nY;
}
}
function s()
{
mA();
gAC();
c();
iACP();
}
//角度修正
function mA()
{
///修正第一层夹角
if(mouse.dY==1||kN==38)
{
XSO[0].OOA+=0.9999;
XSO[1].OOA+=0.9999;
}
else if(mouse.dY==0||kN==40)
{
XSO[0].OOA-=0.9999;
XSO[1].OOA-=0.9999;
}
XSO[0].OOA=XSO[0].OOA%360+360;
XSO[1].OOA=XSO[1].OOA%360+360;
///修正第二层夹角
if(mouse.dX==1||kN==39)
{
lC(0,1);
lC(1,1);
}
else if(mouse.dX==0||kN==37)
{
lC(0,0);
lC(1,0);
}
}
function lC(X,D)
{
for(var IPNo in XSO[X].IPP)
{
if(D==1)
{
if(X==0)
{
XSO[X].IPP[IPNo][0]-=1;
}
else if(X==1)
{
XSO[X].IPP[IPNo][0]+=1;
}
}else if(D==0)
{
if(X==0)
{
XSO[X].IPP[IPNo][0]+=1;
}
else if(X==1)
{
XSO[X].IPP[IPNo][0]-=1;
}
}
}
}
//得出绝对坐标
var r =Math.PI/180;
function gAC()
{
for(var XSNo in XSO)
{
XSO[XSNo].Cy=YSO[0].CyY+YSO[0].R*Math.sin(r*XSO[XSNo].OOA);
}
for(var XSNo in XSO)
{
XSO[XSNo].Cz=YSO[0].CxZ+YSO[0].R*Math.cos(r*XSO[XSNo].OOA);
}
//获得第一层上内部点点的坐标未进行扭曲,与屏幕平行
for(var IPNo in XSO[0].IPP )
{
XSO[0]. IPP[IPNo][1]=XSO[0].Cx+XSO[0].R*Math.cos(r*XSO[0].IPP[IPNo][0])
}
for(var IPNo in XSO[0].IPP )
{
XSO[0]. IPP[IPNo][2]=XSO[0].Cy+XSO[0].R*Math.sin(r*XSO[0].IPP[IPNo][0])
}
//获得第二层内部点的坐标未进行扭曲,
for(var IPNo in XSO[0].IPP )
{
XSO[1]. IPP[IPNo][1]=XSO[1].Cx+XSO[1].R*Math.cos(r*XSO[1].IPP[IPNo][0])
}
for(var IPNo in XSO[0].IPP )
{
XSO[1]. IPP[IPNo][2]=XSO[1].Cy+XSO[1].R*Math.sin(r*XSO[1].IPP[IPNo][0])
}
for(var XSONo in XSO)
{
tXA(XSO[XSONo]);
}
}
///Y
function tXA(XSON)//兼容新原因无法提取方法使之更简短,提取后只有IE8支持,纳闷中!!
{
/// 捕捉1 象限
if(XSON.Cy>=YSO[0].CyY&&XSON.Cz>YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
}
}
}
/// 捕捉 3象限
else if(XSON.Cy<=YSO[0].CyY&&XSON.Cz<YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+270))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+270))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+90))
}
}
}
///捕捉2 象限
else if(XSON.Cy>YSO[0].CyY&&XSON.Cz<=YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)//:[[30,0,0,0],[120,0,0,0],[210,0,0,0],[300,0,0,0]],)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
//alert(XSON.IPP[IPNo][3]);
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
}
}
}
///捕捉4 象限
else if(XSON.Cy<YSO[0].CyY&&XSON.Cz>=YSO[0].CxZ)
{
for(var IPNo in XSON.IPP)
{
if(XSON.IPP[IPNo][2]>=XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*(XSON.OOA%90))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*(XSON.OOA%90))
}
else if(XSON.IPP[IPNo][2]<XSON.Cy)
{
XSON.IPP[IPNo][3]=XSON.Cz+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.cos(r*((XSON.OOA%90)+180))
XSON.IPP[IPNo][2]=XSON.Cy+(Math.abs(XSON.IPP[IPNo][2]-XSON.Cy))*Math.sin(r*((XSON.OOA%90)+180))
}
}
}
}
//收缩
function c()
{
for(var XSONo in XSO)
{
for(var IPNo in XSO[XSONo]. IPP)
{
XSO[XSONo]. IPP[IPNo][4]=(XSO[0].IPP[IPNo][3]/20);
}
}
}
//载入空间载体
var p = new Array(8);
function iO()
{
for(var PNo=0;PNo <p.length;PNo++)
{
p[PNo]=GEBI("D"+PNo);
}
s();
}
function iACP()
{
for(var PNo=0;PNo <p.length/2;PNo++)
{
p[PNo].style.left=XSO[0].IPP[PNo][1]+"px";
p[PNo].style.top=XSO[0].IPP[PNo][2]+"px";
p[PNo].style.zIndex=XSO[0].IPP[PNo][3];
p[PNo].style.fontSize= XSO[0]. IPP[PNo][4]+"px";
}
for(var PNo=4;PNo <p.length;PNo++)
{
p[PNo].style.left=XSO[1].IPP[PNo-4][1]+"px";
p[PNo].style.top=XSO[1].IPP[PNo-4][2]+"px";
p[PNo].style.zIndex=XSO[1].IPP[PNo-4][3];
p[PNo].style.fontSize= XSO[1]. IPP[PNo-4][4]+"px";
}
}
window.onload=iO;