vml cube

最新推荐文章于 2025-08-09 00:03:02 发布

原创最新推荐文章于 2025-08-09 00:03:02 发布 · 766 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #matrix #behavior #html #object #url

很久以前学vml时做的，不过到现在也没有在任何地方用到vml。

asdw左下右上平移，qe放大缩小，up/down left/right home/end绕xyz轴旋转。

当时郁闷地发现居然连arc sin的定义域都忘了。大学毕业1年后我终于成为文盲了。

当年在网上看到一个用vml做的3d的屋子，觉得很神奇，于是就试着做了这个东西。

本来还象Render立方体的表面，不过发现太难了。

<head>

<title>may this success...</title>

v:*{

behavior:url(#default#VML);

position:absolute;

}

</style>

ANGLE_UNIT = 1;

MOVE_UNIT = 0.03;

Z_UNIT = 0.06;

function AngleToRadian(angle)

{

var rval = Math.PI/180*angle;

if(rval>1) return 1;

if(rval<-1) return -1;

return rval;

}

theCube = new Object();

theCube.faceLT = [-1,1,-1];

theCube.faceRT = [1,1,-1];

theCube.faceRB = [1,-1,-1];

theCube.faceLB = [-1,-1,-1];

theCube.backLT = [-1,1,1];

theCube.backRT = [1,1,1];

theCube.backRB = [1,-1,1];

theCube.backLB = [-1,-1,1];

theCube.RotateYaBit = function(Positive)

{

var angleUnit;

Positive?angleUnit=ANGLE_UNIT:angleUnit=-ANGLE_UNIT;

theCube.faceLT = RotateY(theCube.faceLT,angleUnit);

theCube.faceRT = RotateY(theCube.faceRT,angleUnit);

theCube.faceRB = RotateY(theCube.faceRB,angleUnit);

theCube.faceLB = RotateY(theCube.faceLB,angleUnit);

theCube.backLT = RotateY(theCube.backLT,angleUnit);

theCube.backRT = RotateY(theCube.backRT,angleUnit);

theCube.backRB = RotateY(theCube.backRB,angleUnit);

theCube.backLB = RotateY(theCube.backLB,angleUnit);

}

theCube.RotateXaBit = function(Positive)

{

var angleUnit;

Positive?angleUnit=ANGLE_UNIT:angleUnit=-ANGLE_UNIT;

theCube.faceLT = RotateX(theCube.faceLT,angleUnit);

theCube.faceRT = RotateX(theCube.faceRT,angleUnit);

theCube.faceRB = RotateX(theCube.faceRB,angleUnit);

theCube.faceLB = RotateX(theCube.faceLB,angleUnit);

theCube.backLT = RotateX(theCube.backLT,angleUnit);

theCube.backRT = RotateX(theCube.backRT,angleUnit);

theCube.backRB = RotateX(theCube.backRB,angleUnit);

theCube.backLB = RotateX(theCube.backLB,angleUnit);

}

theCube.RotateZaBit = function(Positive)

{

var angleUnit;

Positive?angleUnit=ANGLE_UNIT:angleUnit=-ANGLE_UNIT;

theCube.faceLT = RotateZ(theCube.faceLT,angleUnit);

theCube.faceRT = RotateZ(theCube.faceRT,angleUnit);

theCube.faceRB = RotateZ(theCube.faceRB,angleUnit);

theCube.faceLB = RotateZ(theCube.faceLB,angleUnit);

theCube.backLT = RotateZ(theCube.backLT,angleUnit);

theCube.backRT = RotateZ(theCube.backRT,angleUnit);

theCube.backRB = RotateZ(theCube.backRB,angleUnit);

theCube.backLB = RotateZ(theCube.backLB,angleUnit);

}

theCube.Show=function ()

{

with(this)

{

faceTop.from = OtherTranslate(faceLT[0],faceLT[1]);

faceTop.to = OtherTranslate(faceRT[0],faceRT[1]);

faceRight.from = OtherTranslate(faceRT[0],faceRT[1]);

faceRight.to = OtherTranslate(faceRB[0],faceRB[1]);

faceBottom.from = OtherTranslate(faceRB[0],faceRB[1]);

faceBottom.to = OtherTranslate(faceLB[0],faceLB[1]);

faceLeft.from = OtherTranslate(faceLB[0],faceLB[1]);

faceLeft.to = OtherTranslate(faceLT[0],faceLT[1]);

topLeft.from = OtherTranslate(faceLT[0],faceLT[1]);

topLeft.to = OtherTranslate(backLT[0],backLT[1]);

topFront.from = OtherTranslate(backLT[0],backLT[1]);

topFront.to = OtherTranslate(backRT[0],backRT[1]);

topRight.from = OtherTranslate(backRT[0],backRT[1]);

topRight.to = OtherTranslate(faceRT[0],faceRT[1]);

bottomLeft.from = OtherTranslate(faceLB[0],faceLB[1]);

bottomLeft.to = OtherTranslate(backLB[0],backLB[1]);

bottomFront.from = OtherTranslate(backLB[0],backLB[1]);

bottomFront.to = OtherTranslate(backRB[0],backRB[1]);

bottomRight.from = OtherTranslate(backRB[0],backRB[1]);

bottomRight.to = OtherTranslate(faceRB[0],faceRB[1]);

backLeft.from = OtherTranslate(backLT[0],backLT[1]);

backLeft.to = OtherTranslate(backLB[0],backLB[1]);

backRight.from = OtherTranslate(backRT[0],backRT[1]);

backRight.to = OtherTranslate(backRB[0],backRB[1]);

}

theCube.MoveH = function(direction)

{

var moveUint = direction?-MOVE_UNIT:MOVE_UNIT;

theCube.faceLT[0] += moveUint;

theCube.faceRT[0] += moveUint;

theCube.faceRB[0] += moveUint;

theCube.faceLB[0] += moveUint;

theCube.backLT[0] += moveUint;

theCube.backRT[0] += moveUint;

theCube.backRB[0] += moveUint;

theCube.backLB[0] += moveUint;

}

theCube.MoveV = function(direction)

{

var moveUint = direction?MOVE_UNIT:-MOVE_UNIT;

theCube.faceLT[1] += moveUint;

theCube.faceRT[1] += moveUint;

theCube.faceRB[1] += moveUint;

theCube.faceLB[1] += moveUint;

theCube.backLT[1] += moveUint;

theCube.backRT[1] += moveUint;

theCube.backRB[1] += moveUint;

theCube.backLB[1] += moveUint;

}

theCube.Zoom = function(direction)

{

var ZoomRate = direction?(1+Z_UNIT):(1-Z_UNIT

);

theCube.faceLT[0] *= ZoomRate;

theCube.faceRT[0] *= ZoomRate;

theCube.faceRB[0] *= ZoomRate;

theCube.faceLB[0] *= ZoomRate;

theCube.backLT[0] *= ZoomRate;

theCube.backRT[0] *= ZoomRate;

theCube.backRB[0] *= ZoomRate;

theCube.backLB[0] *= ZoomRate;

theCube.faceLT[1] *= ZoomRate;

theCube.faceRT[1] *= ZoomRate;

theCube.faceRB[1] *= ZoomRate;

theCube.faceLB[1] *= ZoomRate;

theCube.backLT[1] *= ZoomRate;

theCube.backRT[1] *= ZoomRate;

theCube.backRB[1] *= ZoomRate;

theCube.backLB[1] *= ZoomRate;

theCube.faceLT[2] *= ZoomRate;

theCube.faceRT[2] *= ZoomRate;

theCube.faceRB[2] *= ZoomRate;

theCube.faceLB[2] *= ZoomRate;

theCube.backLT[2] *= ZoomRate;

theCube.backRT[2] *= ZoomRate;

theCube.backRB[2] *= ZoomRate;

theCube.backLB[2] *= ZoomRate;

}

function OtherTranslate(v1,v2)

{

var _v1 = v1 * 150 + 300;

var _v2 = -v2 * 150 + 300;

return _v1 + "," + _v2;

}

function MatrixMultiple(ML,MR)

{

var rval = new Array(ML.RowCount);

try

{

for(var i=0;i<ML.RowCount;i++)

{

rval[i] = new Array(MR.ColCount);

for(var j=0;j<MR.ColCount;j++)

{

rval[i][j] = 0;

for(var k=0;k<ML.ColCount;k++)

{

if(ML.RowCount == 1 && MR.RowCount == 1)

{

rval[i][j] += ML[k]*MR[k];

}

else if(ML.RowCount == 1 && MR.RowCount != 1)

{

rval[i][j] += ML[k]*MR[k][j];

}

else if(ML.RowCount != 1 && MR.RowCOunt == 1)

{

rval[i][j] += ML[i][k]*MR[k];

}

else

{

rval[i][j] += ML[i][k]*MR[k][j];

}

catch(e)

{

alert("矩阵无法相乘");

return;

}

if(rval.length == 1)

{

return rval[0];

}

return rval;

}

function RotateY(srcPoint,angle)

{

var Matrix = [ [Math.cos(AngleToRadian(angle)),0,Math.sin(AngleToRadian(angle))],

[0,1,0],

[-Math.sin(AngleToRadian(angle)),0,Math.cos(AngleToRadian(angle))]

];

Matrix.RowCount = 3;

Matrix.ColCount = 3;

srcPoint.RowCount = 1;

srcPoint.ColCount = 3;

return MatrixMultiple(srcPoint,Matrix);

}

function RotateX(srcPoint,angle)

{

var Matrix = [ [1,0,0],

[0,Math.cos(AngleToRadian(angle)),-Math.sin(AngleToRadian(angle))],

[0,Math.sin(AngleToRadian(angle)),Math.cos(AngleToRadian(angle))]

];

Matrix.RowCount = 3;

Matrix.ColCount = 3;

srcPoint.RowCount = 1;

srcPoint.ColCount = 3;

return MatrixMultiple(srcPoint,Matrix);

}

function RotateZ(srcPoint,angle)

{

var Matrix = [ [Math.cos(AngleToRadian(angle)),-Math.sin(AngleToRadian(angle)),0],

[Math.sin(AngleToRadian(angle)),Math.cos(AngleToRadian(angle)),0],

[0,0,1]

];

Matrix.RowCount = 3;

Matrix.ColCount = 3;

srcPoint.RowCount = 1;

srcPoint.ColCount = 3;

return MatrixMultiple(srcPoint,Matrix);

}

function Controllor()

{

switch(event.keyCode)

{

case 37:

theCube.RotateYaBit(true);

break;

case 39:

theCube.RotateYaBit(false);

break;

case 38:

theCube.RotateXaBit(true);

break;

case 40:

theCube.RotateXaBit(false);

break;

case 36:

theCube.RotateZaBit(true);

break;

case 35:

theCube.RotateZaBit(false);

break;

case 87:

theCube.MoveV(true);

break;

case 83:

theCube.MoveV(false);

break;

case 65:

theCube.MoveH(true);

break;

case 68:

theCube.MoveH(false);

break;

case 81:

theCube.Zoom(true);

break;

case 69:

theCube.Zoom(false);

break;

default:

alert(event.keyCode);

break;

}

theCube.Show();

}

function ShowO()

{

oh.from = OtherTranslate(-0.05,0);

oh.to = OtherTranslate(0.05,0);

ov.from = OtherTranslate(0,-0.05);

ov.to = OtherTranslate(0,0.05);

}

</script>

</head>

<v:line id="faceTop" from="0,0" to="0,0" strokeweight="3" strokecolor="red"></v:line>

<v:line id="faceRight" from="0,0" to="0,0" strokeweight="3" strokecolor="#11dd00"></v:line>

<v:line id="faceBottom" from="0,0" to="0,0" strokeweight="3" strokecolor="yellow"></v:line>

<v:line id="faceLeft" from=",0" to="0,0" strokeweight="3" strokecolor="green"></v:line>

<v:line id="topLeft" from="0,0" to="0,0" strokeweight="3" strokecolor="silver"></v:line>

<v:line id="topFront" from="0,0" to="0,0" strokeweight="3" strokecolor="blue"></v:line>

<v:line id="topRight" from="0,0" to="0,0" strokeweight="3" strokecolor="#8811ff"></v:line>

<v:line id="bottomLeft" from="0,0" to="0,0" strokeweight="3" strokecolor="#33ccee"></v:line>

<v:line id="bottomFront" from="0,0" to="0,0" strokeweight="3" strokecolor="white"></v:line>

<v:line id="bottomRight" from="0,0" to="0,0" strokeweight="3" strokecolor="black"></v:line>

<v:line id="backLeft" from="0,0" to="0,0" strokeweight="3" strokecolor="#f3d755"></v:line>

<v:line id="backRight" from="0,0" to="0,0" strokeweight="3" strokecolor="#7799bb"></v:line>

<v:line id="oh" from="0,0" to="0,0" strokeweight="3"></v:line>

<v:line id="ov" from="0,0" to="0,0" strokeweight="3"></v:line>

</body>

</html>