等角投影及计算公式

最新推荐文章于 2022-08-17 10:57:36 发布

weixin_34248023

最新推荐文章于 2022-08-17 10:57:36 发布

阅读量693

点赞数

文章标签： c/c++

等角投影中，没有消失点，观察者的目光始终是平行的，投影方向与坐标轴的角度是固定值，虽然这样看上去略有失真，但是总体来讲立体感还是很明显的，重要的是：不管你把等角投影所形成的立体图形放在屏幕上哪一个位置，看上去都是相同的。

原书作者还给出了一个演示，用于帮助大家理解：在线演示

很明显：一个立方体的（正方形）顶部面，在经过等角投影后，在屏幕上会发生形变，成为一个菱形。(点击刚才的在线演示中的true isometric按钮，观察front视图中立方体的顶部)

上图是正方形经过标准等角投影后得到的菱形，其左右侧的角度为60度，通过计算可以得到长宽比例为1.73，但是这个比例通常在计算时，会弄出很多小数位，而且绘图师们也比较烦这个比例(因为用ps等软件画图时，同样也要设置长或宽为小数位才能保证这个比例)

所以在实际情况中，更常用的是"二等角"来代替"等角"(点击刚才的在线演示中的dimetric按钮，观察front视图中立方体的顶部)

可以看出，“二等角投影”形成的菱形要比“等角投影”更扁一些，但这种图形的宽/高比例正好是2，处理起来很方便，也好记忆。

有了上面这些基础，就可以来做些正经事儿了，思考一个问题：在常规3D空间中的图形，经过二等角投影(为方便起见，以下把二等角投影也通称为等角投影)后，要经过怎样的计算（或转换），才能得到最终的图形呢？

有鉴于任何几何图形，总是由若干个点连接而成的，我们先来定义一个常规的Point3D类：

 
         package 
         { 
        
         public 
         class 
         Point3D { 
        
         public 
         var 
         x: 
         Number 
         ; 
        
         public 
         var 
         y: 
         Number 
         ; 
        
         public 
         var 
         z: 
         Number 
         ; 
        
         public 
         function 
         Point3D(x: 
         Number 
         = 
         0 
         ,y: 
         Number 
         = 
         0 
         ,z: 
         Number 
         = 
         0 
         ) { 
        
         this 
         .x=x; 
        
         this 
         .y=y; 
        
         this 
         .z=z; 
        
         } 
        
         } 
        
         }

所以上面的问题也可以简化为：等角空间中3D坐标点，如何转换为电脑屏幕上的2D坐标点？(或者反过来转换？)

转化公式：

x1 = x - z

y1 = y * 1.2247 + (x + z) * 0.5

z2 = (x + z) * 0.866 - y * 0.707 --用于层深排序，可以先不管

上面的公式可以把等角空间中的坐标点，转化为屏幕空间上的坐标点。(好奇心强烈的童鞋们，自己去看原书上的推导过程吧，我建议大家把这它当成定理公式记住就好，毕竟我们不是在研究数学)

为了方便以后重用，可以把这个公式封装到类IsoUtil.as里

 
         package 
         { 
        
         import 
         flash.geom.Point; 
        
         public 
         class 
         IsoUtils { 
        
         //public static const Y_CORRECT:Number=Math.cos(- Math.PI/6)*Math.SQRT2;         
        
         public 
         static 
         const 
         Y_CORRECT: 
         Number 
         =  
         1.2247448713915892 
         ; 
        
         //把等角空间中的一个3D坐标点转换成屏幕上的2D坐标点 
        
         public 
         static 
         function 
         isoToScreen(pos:Point3D):Point { 
        
         var 
         screenX: 
         Number 
         =pos.x-pos.z; 
        
         var 
         screenY: 
         Number 
         =pos.y*Y_CORRECT+(pos.x+pos.z)* 
         0.5 
         ; 
        
         return 
         new 
         Point(screenX,screenY); 
        
         } 
        
         //把屏幕上的2D坐标点转换成等角空间中的一个3D坐标点 
        
         public 
         static 
         function 
         screenToIso(point:Point):Point3D { 
        
         var 
         xpos: 
         Number 
         =point.y+point.x*. 
         5 
         ; 
        
         var 
         ypos: 
         Number 
         = 
         0 
         ; 
        
         var 
         zpos: 
         Number 
         =point.y-point.x*. 
         5 
         ; 
        
         return 
         new 
         Point3D(xpos,ypos,zpos); 
        
         } 
        
         } 
        
         }

用代码来画一个等角图形，测试上面的代码是否正确

 
         package 
         { 
        
         import 
         flash.display.Sprite; 
        
         import 
         flash.display.StageAlign; 
        
         import 
         flash.display.StageScaleMode; 
        
         import 
         flash.geom.Point; 
        
         [SWF(backgroundColor= 
         0xefefef 
         ,height= 
         "200" 
         ,width= 
         "300" 
         )] 
        
         public 
         class 
         IsoTransformTest  
         extends 
         Sprite { 
        
         public 
         function 
         IsoTransformTest() { 
        
         stage.align=StageAlign.TOP_LEFT; 
        
         stage.scaleMode=StageScaleMode.NO_SCALE; 
        
         var 
         p0:Point3D= 
         new 
         Point3D( 
         0 
         , 
         0 
         , 
         0 
         ); 
        
         var 
         p1:Point3D= 
         new 
         Point3D( 
         100 
         , 
         0 
         , 
         0 
         ); 
        
         var 
         p2:Point3D= 
         new 
         Point3D( 
         100 
         , 
         0 
         , 
         100 
         ); 
        
         var 
         p3:Point3D= 
         new 
         Point3D( 
         0 
         , 
         0 
         , 
         100 
         ); 
        
         var 
         sp0:Point=IsoUtils.isoToScreen(p0); 
        
         var 
         sp1:Point=IsoUtils.isoToScreen(p1); 
        
         var 
         sp2:Point=IsoUtils.isoToScreen(p2); 
        
         var 
         sp3:Point=IsoUtils.isoToScreen(p3); 
        
         var 
         tile:Sprite =  
         new 
         Sprite(); 
        
         tile.x= 
         150 
         ; 
        
         tile.y= 
         50 
         ; 
        
         addChild(tile); 
        
         tile.graphics.lineStyle( 
         0 
         ); 
        
         tile.graphics.moveTo(sp0.x, sp0.y); 
        
         tile.graphics.lineTo(sp1.x, sp1.y); 
        
         tile.graphics.lineTo(sp2.x, sp2.y); 
        
         tile.graphics.lineTo(sp3.x, sp3.y); 
        
         tile.graphics.lineTo(sp0.x, sp0.y); 
        
         trace 
         (Math.cos(- Math.PI/ 
         6 
         )*Math.SQRT2); 
         //1.2247448713915892             
        
         trace 
         (tile.width,tile.height); 
         //200 100 符合上面提到的2:1 
        
         } 
        
         } 
        
         }

weixin_34248023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
等角投影及计算公式

等角投影中，没有消失点，观察者的目光始终是平行的，投影方向与坐标轴的角度是固定值，虽然这样看上去略有失真，但是总体来讲立体感还是很明显的，重要的是：不管你把等角投影所形成的立体图形放在屏幕上哪一个位置，看上去都是相同的。原书作者还给出了一个演示，用于帮助大家理解：在线演示很明显：一个立方体的（正方形）顶部面，在经过等角投影后，在屏幕上会发生形变，成为一个菱形。(点击刚才的在线演示中的...
复制链接

扫一扫