vml cube

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

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

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

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

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

< html  xmlns:v ="vml namespace" >
     < head >
         < title > may this success... </ title >
         < style  type ="text/css" > ...
            v:*{...}{
                behavior:url(#default#VML);
                position:absolute;
            }
         </ style >
         < script  type ="text/jscript" > ...
            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 >
     < body  onkeydown ="Controllor();"  onload ="theCube.Show();ShowO();"  bgcolor ="lightgrey" >
         < 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 >