通过前两篇，我们稀里糊涂地完成了很炫的，基于二维平面绘制三维空间的效果。那其中蕴含的原理是什么呢，本篇将和你一起揭开轴测投影的神秘面纱。
1. 投影是什么
首先我们先思考一个简单的问题，如下图所示：
红线长度为 240，与水平方向夹角为 30°, 求红线端点在屏幕坐标系上的坐标：
可以想象一下，红线是一根木棍，手电筒沿 y 轴方向照射，在 x 轴上产生了影子。那么:
影子的长度就是到右侧端点的 x 坐标
由于知道了线和x的夹角，用小学二年级学过的三角函数不难算出，x 坐标为 240 * cos(30°)。同理，可以在 y 轴上投影得到 y 坐标，这样端点 p 的坐标为: (240*cos(30°), 240*sin(30°))
2. 线上点的投影
铛铛铛，敲黑板!!!
此时红线上 距原点距离为 d 的任何一点，其坐标可以写为
(d*cos(30°), d*sin(30°))
那么现在请问，如果以红线作为三维坐标系的 x 轴, 那么 距原点距离为 d 的点表示的是什么?
3. 三维到二维的投影映射
红线上 距原点距离为 d 的点，也就是三维坐标中 x 轴上的点，坐标为 (d,0,0) 。轴线上的点分析完毕，接下来分析一下三维 X-Y 地平面上点，在屏幕坐标系上的投影。
如下所示，三维坐标系中的 p 点坐标 (160,40,0), 通过两条辅助线可以更好地看出点在空间中的位置：
如下所示，三维点 p(160,40,0) 投影到屏幕的二维坐标上，如何计算坐标呢?
三维坐标 p 向三维坐标系中的 x,y 轴投影，可以得到 p_x_3d 和 p_y_3d 两个点。然后轴上的这两个点再向屏幕坐标系 x 轴进行投影，不难看出:
下面 x 轴上两个较粗线段的差值就是 p.x 的值。
这就印证了 project 代码中二维坐标系的 x 的计算方式是 ： (p.x - p.y) * cos(angle)
同理，对于二维坐标系中 y 点的计算也是同理。将 p 在三维坐标系中的分量，沿水平方向投影:
y 轴上的两段直线长度之和就 p.y 的值
这就印证了 project 代码中二维坐标系的 y 的计算方式是 ： (p.x + p.y) * sin(angle)
可能有人看到了，y 轴还有一个减去 p.z 的计算，这个意味着什么呢？因为目前我们研究的是在 X-Y 平面上的三维点，所以 z 轴坐标为 0 ，接下来就看看有 z 轴时的情况。
4. 有 z 坐标时的二维投影
这里我们的 z 轴是垂直向上的，p(160,40,80) 就是将之前的点，向上平移 80 。所以对于屏幕坐标系而言， x 坐标不变:
由于向上平移,所以 y 坐标需要减去三维坐标的 z 值，这也是为什么 project 投影映射中 y 坐标要减 p.z 的原因:
5.尾声
这样 project 的两行转换的代码就解释完毕了，你看懂了吗? 分析期间我们运用了很多将点投影到坐标轴上的动作，来计算三维点坐落在二维坐标系中的确切位置。这种技术被称为 轴测投影 ，另外夹角是 30° 的轴测投影 比较常用，被称之为 等轴测投影 ，该角度夹一般效果最好，广泛用于工程制图和像素艺术中。
现在静态的三维坐标的轴测投影原理介绍完毕，那么让三维空间沿 z 轴旋转的秘密又是什么呢？我们下篇再见，敬请期待 ~
更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站 。