html绘制三维坐标系,使用html5绘制三维线框图

前言

虽然我们每个人处在三维的世界中，但是计算机屏幕却是二维的。那么如何将三维的世界展示到二维的屏幕上呢？这时候就需要用到投影。本质上，屏幕上展示的是二维图形，然而二维投影图形会给我们一种视觉上的错觉，大脑经过联想和组合，就会“认为”我们看到了三维物体。

3d.png

投影是一个数学上的术语，来源于生活。想想看，现在有一个立方体(假设它的表面是可以透光的，并且可以自由旋转)，有一束光从立方体上面照下来，为了简化问题，这里只考虑平行光，不考虑点光源的情况(在实际的情况中，灯光在三维世界中很重要，影响着物体被如何渲染)。这样，就在地面上留下了一个影子。类比来说，地面就是计算机的屏幕，影子就是屏幕上绘制的图形，立方体就是实际要表现的东西。当立方体自由旋转时，把每一次的影子记录下来，当立方体全方位旋转后，所有影子组合起来，就完完全全地描述了这个三维的立方体。这种情况被称之为正交投影。

转化

理论知识扯起来很容易，但是如何写出实际的代码就要看手上的功夫了。首先，要描述一个三维物体，需要一些度量值，也就是坐标了。三维物体嘛，当然得有三个坐标，在JavaScript中，可以使用数组来表示坐标结构。每一个坐标数组包含了三个元素，代表了空间中的一个点(node)。两个点，就组成了一条线(edge)，多条线段就组成了线框图(wireframe),也就是我想要的效果。三维图形的基础在于点&