JavaScript 3D, Cube,3D 立方体

// //JavaScript Document
/**
* Copyright (c) 2009,LLH
* All rights reserved.
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE AUTHOR AND CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
//使用该脚本时请保留以上声明! 作者;LLH QQ群:50352735 完全原创！支持原创！欢迎交流！
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]],
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.nXmouse.oY)
{
mouse.dY=1;
}
else if(mouse.nY=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)//:[[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]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))
}
else if(XSON.IPP[IPNo][2]=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]

这两天忙着做了一个JavaScript3D效果，完全原创!和老外的差远了！没有借鉴任何人代码!有提供源代码下载，

转载请说明出处!: http://MacFig.com 备案中 请访问 ChangeNow.cn
没有像以前那样写很多可控参数，为了兼容性好,没有用线连接点！(好麻烦！哈哈！不过自己是可以改的！)
JavaScript3DCube原创代码下载(修正无Bug 版):http://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
世
界
平
和

这是代码，不看也罢，有下载！

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;