javascript实现的三维正方体(兼容ie7,ff)

　　通过更新变换矩阵来记录转动(函数remx()).

　　利用矩阵计算出转动后的正方体顶点坐标,

　　把各个顶点的空间坐标按”近大远小”转换成平面坐标(函数p2d()),

　　用正方体各个面的法向量的z坐标判断该面是否可见,

　　用高为1px的div层模拟画出四边形(函数gra2htm()).

　　鼠标拖曳的代码用别人的代码修改的.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Cube</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20gra2htm(clr%2Ca%2Cb%2Cc%2Cd)%7B%20%0D%0A%20%20var%20result%3D''%3B%20%0D%0A%20%20var%20maxx%3DMath.max(a%5B0%5D%2Cb%5B0%5D%2Cc%5B0%5D%2Cd%5B0%5D)%2Cminx%3DMath.min(a%5B0%5D%2Cb%5B0%5D%2Cc%5B0%5D%2Cd%5B0%5D)%3B%20%0D%0A%20%20var%20maxy%3DMath.max(a%5B1%5D%2Cb%5B1%5D%2Cc%5B1%5D%2Cd%5B1%5D)%2Cminy%3DMath.min(a%5B1%5D%2Cb%5B1%5D%2Cc%5B1%5D%2Cd%5B1%5D)%3B%20%0D%0A%20%20x%3Dnew%20Array(a%5B0%5D%2Cb%5B0%5D%2Cc%5B0%5D%2Cd%5B0%5D%2Ca%5B0%5D%2Cb%5B0%5D%2Cc%5B0%5D%2Cd%5B0%5D%2Ca%5B0%5D%2Cb%5B0%5D)%3B%20%0D%0A%20%20y%3Dnew%20Array(a%5B1%5D%2Cb%5B1%5D%2Cc%5B1%5D%2Cd%5B1%5D%2Ca%5B1%5D%2Cb%5B1%5D%2Cc%5B1%5D%2Cd%5B1%5D%2Ca%5B1%5D%2Cb%5B1%5D)%3B%20%0D%0A%20%20%20%0D%0A%20%20%2F*%2Fbegin%20%0D%0A%20%20for(var%20i%3D0%3Bi%3C%3D3%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20result%2B%3D'%3Cdiv%20style%3D%22position%3Aabsolute%3B%20overflow%3Ahidden%3B%20left%3A'%20%0D%0A%20%20%20%20%2Bx%5Bi%5D%2B'px%3B%20top%3A'%2By%5Bi%5D%2B'px%3B%20width%3A2px%3B%20height%3A2px%3B%20background-color%3A%23FFF%22%3E%3C%2Fdiv%3E'%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20%2F%2Fend*%2F%20%0D%0A%20%20%20%0D%0A%20%20if(maxx-minx%3E%3Dmaxy-miny)%7B%20%0D%0A%20%20%20%20for(var%20i%3D3%3Bi%3C%3D6%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20if(y%5Bi%5D%3D%3Dminy)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20k%3Dl%3Di%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20if(y%5Bk%5D%3D%3Dy%5Bk-1%5D)%20k--%3B%20%0D%0A%20%20%20%20xa%3D(x%5Bk-1%5D-x%5Bk%5D)%2F(y%5Bk-1%5D-y%5Bk%5D)%3B%20%0D%0A%20%20%20%20if(y%5Bl%5D%3D%3Dy%5Bl%2B1%5D)%20l%2B%2B%3B%20%0D%0A%20%20%20%20xb%3D(x%5Bl%2B1%5D-x%5Bl%5D)%2F(y%5Bl%2B1%5D-y%5Bl%5D)%3B%20%0D%0A%20%20%20%20pl%3Dx%5Bk%5D%3Bpw%3Dx%5Bl%5D-x%5Bk%5D%3B%20%0D%0A%20%20%20%20for(var%20i%3Dminy%2B1%3Bi%3C%3Dmaxy%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20if(i%3Ey%5Bk-1%5D)%7B%20%0D%0A%20%20%20%20%20%20%20%20k--%3B%20%0D%0A%20%20%20%20%20%20%20%20xa%3D(x%5Bk-1%5D-x%5Bk%5D)%2F(y%5Bk-1%5D-y%5Bk%5D)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20if(i%3Ey%5Bl%2B1%5D)%7B%20%0D%0A%20%20%20%20%20%20%20%20l%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20xb%3D(x%5Bl%2B1%5D-x%5Bl%5D)%2F(y%5Bl%2B1%5D-y%5Bl%5D)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20result%2B%3D'%3Cdiv%20style%3D%22overflow%3Ahidden%3B%20top%3A'%2Bi%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20left%3A'%2BMath.round(pl%2B%3Dxa)%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20width%3A'%2BMath.round(pw%2B%3Dxb-xa)%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20height%3A1px%3B%20position%3Aabsolute%3B%20background-color%3A'%2Bclr%20%0D%0A%20%20%20%20%20%20%20%20%2B'%3B%22%3E%3C%2Fdiv%3E'%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20for(var%20i%3D3%3Bi%3C%3D6%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20if(x%5Bi%5D%3D%3Dminx)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20k%3Dl%3Di%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20if(x%5Bk%5D%3D%3Dx%5Bk%2B1%5D)%20k%2B%2B%3B%20%0D%0A%20%20%20%20ya%3D(y%5Bk%2B1%5D-y%5Bk%5D)%2F(x%5Bk%2B1%5D-x%5Bk%5D)%3B%20%0D%0A%20%20%20%20if(x%5Bl%5D%3D%3Dx%5Bl-1%5D)%20l--%3B%20%0D%0A%20%20%20%20yb%3D(y%5Bl-1%5D-y%5Bl%5D)%2F(x%5Bl-1%5D-x%5Bl%5D)%3B%20%0D%0A%20%20%20%20pt%3Dy%5Bk%5D%3Bph%3Dy%5Bl%5D-y%5Bk%5D%3B%20%0D%0A%20%20%20%20for(var%20i%3Dminx%2B1%3Bi%3C%3Dmaxx%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20if(i%3Ex%5Bk%2B1%5D)%7B%20%0D%0A%20%20%20%20%20%20%20%20k%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20ya%3D(y%5Bk%2B1%5D-y%5Bk%5D)%2F(x%5Bk%2B1%5D-x%5Bk%5D)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20if(i%3Ex%5Bl-1%5D)%7B%20%0D%0A%20%20%20%20%20%20%20%20l--%3B%20%0D%0A%20%20%20%20%20%20%20%20yb%3D(y%5Bl-1%5D-y%5Bl%5D)%2F(x%5Bl-1%5D-x%5Bl%5D)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20result%2B%3D'%3Cdiv%20style%3D%22overflow%3Ahidden%3B%20left%3A'%2Bi%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20top%3A'%2BMath.round(pt%2B%3Dya)%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20height%3A'%2BMath.round(ph%2B%3Dyb-ya)%20%0D%0A%20%20%20%20%20%20%20%20%2B'px%3B%20width%3A1px%3B%20position%3Aabsolute%3B%20background-color%3A'%2Bclr%20%0D%0A%20%20%20%20%20%20%20%20%2B'%3B%22%3E%3C%2Fdiv%3E'%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%20%20return%20result%3B%20%0D%0A%7D%20%0D%0Afunction%20remx(type%2Ctheta%2Comx)%7B%20%0D%0A%20%20var%20sinA%3DMath.sin(theta)%2CcosA%3DMath.cos(theta)%3B%20%0D%0A%20%20var%20m%3Dnew%20Array()%3B%20%0D%0A%20%20switch(type)%7B%20%0D%0A%20%20%20%20case%20'rx'%3A%20%0D%0A%20%20%20%20%20%20m%5B0%5D%3Domx%5B0%5D%3Bm%5B1%5D%3Domx%5B1%5D%3Bm%5B2%5D%3Domx%5B2%5D%3B%20%0D%0A%20%20%20%20%20%20m%5B3%5D%3Domx%5B3%5D*cosA-omx%5B6%5D*sinA%3Bm%5B4%5D%3Domx%5B4%5D*cosA-omx%5B7%5D*sinA%3Bm%5B5%5D%3Domx%5B5%5D*cosA-omx%5B8%5D*sinA%3B%20%0D%0A%20%20%20%20%20%20m%5B6%5D%3Domx%5B3%5D*sinA%2Bomx%5B6%5D*cosA%3Bm%5B7%5D%3Domx%5B4%5D*sinA%2Bomx%5B7%5D*cosA%3Bm%5B8%5D%3Domx%5B5%5D*sinA%2Bomx%5B8%5D*cosA%3B%20%0D%0A%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20case%20'ry'%3A%20%0D%0A%20%20%20%20%20%20m%5B0%5D%3Domx%5B0%5D*cosA-omx%5B6%5D*sinA%3Bm%5B1%5D%3Domx%5B1%5D*cosA-omx%5B7%5D*sinA%3Bm%5B2%5D%3Domx%5B2%5D*cosA-omx%5B8%5D*sinA%3B%20%0D%0A%20%20%20%20%20%20m%5B3%5D%3Domx%5B3%5D%3Bm%5B4%5D%3Domx%5B4%5D%3Bm%5B5%5D%3Domx%5B5%5D%3B%20%0D%0A%20%20%20%20%20%20m%5B6%5D%3Domx%5B0%5D*sinA%2Bomx%5B6%5D*cosA%3Bm%5B7%5D%3Domx%5B1%5D*sinA%2Bomx%5B7%5D*cosA%3Bm%5B8%5D%3Domx%5B2%5D*sinA%2Bomx%5B8%5D*cosA%3B%20%0D%0A%20%20%20%20%20%20break%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20return%20m%3B%20%0D%0A%7D%20%0D%0Afunction%20p2d(x%2Cy%2Cz)%7B%20%0D%0A%20%20var%20l%3D100%2Ct%3D100%3B%20%0D%0A%20%20var%20result%3Dnew%20Array()%3B%20%0D%0A%20%20result%5B0%5D%3DMath.round(l%2Bx%2F(z*0.004%2B1.25))%3B%20%0D%0A%20%20result%5B1%5D%3DMath.round(t%2By%2F(z*0.004%2B1.25))%3B%20%0D%0A%20%20return%20result%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2Fconst%20%0D%0A%20%20var%20pa%3Dnew%20Array()%3B%20%0D%0A%20%20pa%5B1%5D%3Dnew%20Array(50%2C50%2C-50)%3B%20%0D%0A%20%20pa%5B2%5D%3Dnew%20Array(50%2C50%2C50)%3B%20%0D%0A%20%20pa%5B3%5D%3Dnew%20Array(50%2C-50%2C50)%3B%20%0D%0A%20%20pa%5B4%5D%3Dnew%20Array(50%2C-50%2C-50)%3B%20%0D%0A%20%20pa%5B5%5D%3Dnew%20Array(-50%2C50%2C-50)%3B%20%0D%0A%20%20pa%5B6%5D%3Dnew%20Array(-50%2C50%2C50)%3B%20%0D%0A%20%20pa%5B7%5D%3Dnew%20Array(-50%2C-50%2C50)%3B%20%0D%0A%20%20pa%5B8%5D%3Dnew%20Array(-50%2C-50%2C-50)%3B%20%0D%0A%20%20var%20idx%3Dnew%20Array()%3B%20%0D%0A%20%20idx%5B0%5D%3Dnew%20Array(1%2C2%2C3%2C4)%3B%20%0D%0A%20%20idx%5B1%5D%3Dnew%20Array(1%2C4%2C8%2C5)%3B%20%0D%0A%20%20idx%5B2%5D%3Dnew%20Array(1%2C5%2C6%2C2)%3B%20%0D%0A%20%20idx%5B3%5D%3Dnew%20Array(7%2C3%2C2%2C6)%3B%20%0D%0A%20%20idx%5B4%5D%3Dnew%20Array(7%2C8%2C4%2C3)%3B%20%0D%0A%20%20idx%5B5%5D%3Dnew%20Array(7%2C6%2C5%2C8)%3B%20%0D%0A%20%20var%20clr%3Dnew%20Array('%2303c'%2C'%23c00'%2C'%23fc0'%2C'%23f60'%2C'%23fff'%2C'%23090')%3B%20%0D%0A%2F%2Fend%20%0D%0Afunction%20cube(id)%7B%20%0D%0A%20%20if(!document.getElementById(id))%20return%20false%3B%20%0D%0A%20%20this.id%3Ddocument.getElementById(id)%3B%20%0D%0A%20%20this.angle%3Dnew%20Array()%3B%20%0D%0A%20%20this.angle2%3Dnew%20Array()%3B%20%0D%0A%20%20for(i%3D1%3Bi%3C%3D8%3Bi%2B%2B)%20this.angle%5Bi%5D%3Dnew%20Array(3)%3B%20%0D%0A%2F%2F%20%20alert('success')%3B%20%0D%0A%7D%20%0D%0Acube.prototype%3D%7B%20%0D%0A%20%20matrix%3Anew%20Array(1%2C0%2C0%2C0%2C1%2C0%2C0%2C0%2C1)%2C%20%0D%0A%20%20paint%3Afunction()%7B%20%0D%0A%20%20%20%20var%20result%3D''%3B%20%0D%0A%20%20%20%20for(i%3D1%3Bi%3C%3D8%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20this.angle%5Bi%5D%5B0%5D%3Dthis.matrix%5B0%5D*pa%5Bi%5D%5B0%5D%2Bthis.matrix%5B1%5D*pa%5Bi%5D%5B1%5D%2Bthis.matrix%5B2%5D*pa%5Bi%5D%5B2%5D%3B%20%0D%0A%20%20%20%20%20%20this.angle%5Bi%5D%5B1%5D%3Dthis.matrix%5B3%5D*pa%5Bi%5D%5B0%5D%2Bthis.matrix%5B4%5D*pa%5Bi%5D%5B1%5D%2Bthis.matrix%5B5%5D*pa%5Bi%5D%5B2%5D%3B%20%0D%0A%20%20%20%20%20%20this.angle%5Bi%5D%5B2%5D%3Dthis.matrix%5B6%5D*pa%5Bi%5D%5B0%5D%2Bthis.matrix%5B7%5D*pa%5Bi%5D%5B1%5D%2Bthis.matrix%5B8%5D*pa%5Bi%5D%5B2%5D%3B%20%0D%0A%20%20%20%20%20%20this.angle2%5Bi%5D%3Dp2d(this.angle%5Bi%5D%5B0%5D%2Cthis.angle%5Bi%5D%5B1%5D%2Cthis.angle%5Bi%5D%5B2%5D)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20for(i%3D0%3Bi%3C6%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20if((this.angle2%5Bidx%5Bi%5D%5B2%5D%5D%5B0%5D-this.angle2%5Bidx%5Bi%5D%5B1%5D%5D%5B0%5D)*%20%0D%0A%20%20%20%20%20%20%20%20(this.angle2%5Bidx%5Bi%5D%5B0%5D%5D%5B1%5D-this.angle2%5Bidx%5Bi%5D%5B1%5D%5D%5B1%5D)-%20%0D%0A%20%20%20%20%20%20%20%20(this.angle2%5Bidx%5Bi%5D%5B2%5D%5D%5B1%5D-this.angle2%5Bidx%5Bi%5D%5B1%5D%5D%5B1%5D)*%20%0D%0A%20%20%20%20%20%20%20%20(this.angle2%5Bidx%5Bi%5D%5B0%5D%5D%5B0%5D-this.angle2%5Bidx%5Bi%5D%5B1%5D%5D%5B0%5D)%3C0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20result%2B%3Dgra2htm(clr%5Bi%5D%2Cthis.angle2%5Bidx%5Bi%5D%5B3%5D%5D%2Cthis.angle2%5Bidx%5Bi%5D%5B2%5D%5D%2Cthis.angle2%5Bidx%5Bi%5D%5B1%5D%5D%2C%20%0D%0A%20%20%20%20%20%20%20%20%20%20this.angle2%5Bidx%5Bi%5D%5B0%5D%5D)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%2F%2F%20%20%20%20document.getElementById('aa').value%3Dresult%3B%20%0D%0A%20%20%20%20this.id.innerHTML%3Dresult%3B%20%0D%0A%20%20%7D%2C%20%0D%0A%20%20roll%3Afunction(type%2Ctheta)%7B%20%0D%0A%20%20%20%20this.matrix%3Dremx(type%2Ctheta%2Cthis.matrix)%3B%20%0D%0A%2F%2F%20%20%20%20this.paint()%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20tmr%3D(new%20Date()).getTime()%3B%20%0D%0Afunction%20drag(obj%2Ce)%7B%20%0D%0A%20%20e%3De%3Fe%3Awindow.event%3B%20%0D%0A%20%20var%20setx%3De.clientX%2Csety%3De.clientY%3B%20%0D%0A%20%20%20%0D%0A%20%20%20%20%20%20%20%20if(document.addEventListener)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.addEventListener('mousemove'%2C%20inFmove%2C%20true)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.addEventListener('mouseup'%2C%20inFup%2C%20true)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20if(document.attachEvent)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.attachEvent('onmousemove'%2C%20inFmove)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.attachEvent('onmouseup'%2C%20inFup)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20function%20inFmove(e)%7B%20%0D%0A%20%20%20%20tmr2%3D(new%20Date).getTime()%3B%20%0D%0A%20%20%20%20if(tmr2-tmr%3C100)%20return%20false%3B%20%0D%0A%20%20%20%20tmr%3Dtmr2%3B%20%0D%0A%20%20%20%20cc.roll('ry'%2C(e.clientX-setx)%2F50)%3B%20%0D%0A%20%20%20%20setx%3De.clientX%3B%20%0D%0A%20%20%20%20cc.roll('rx'%2C(e.clientY-sety)%2F50)%3B%20%0D%0A%20%20%20%20sety%3De.clientY%3B%20%0D%0A%20%20%20%20cc.paint()%3B%20%0D%0A%20%20%20%20return%20false%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20function%20inFup()%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(document.removeEventListener)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.removeEventListener('mousemove'%2C%20inFmove%2C%20true)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.removeEventListener('mouseup'%2C%20inFup%2C%20true)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if(document.detachEvent)%7B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.detachEvent('onmousemove'%2C%20inFmove)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.detachEvent('onmouseup'%2C%20inFup)%3B%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0D%0A%20%20%7D%20%2F%2F%20shawl.qiu%20script%20%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="t" style="width:200px;height:200px;background-color:#000000;" oncontextmenu="return false" onmousedown="drag(this,event)"></div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript实现的三维正方体(兼容ie7,ff)

教程首页更多教程