android canvans 画3d,在canvas上绘制3d图形

项目简介

文章里有相当多的用到中学数学中的知识，推导3d的几何模型是如何绘制到2d平面中去的，最终利用推导出的结论编写代码，实现一个波纹的demo

项目地址：https://github.com/zz632893783/canvas-3d

效果13.gif

安装项目依赖模块

npm install

运行项目

npm run dev

从z轴观察yz平面上的点

01.png

想象一下有这么一个三维空间(如图)，有一个点B，我们从A点观察B点。那么B点在xy平面上的投影即AB的延长线与平面xy的交点C。而xy平面不就是可以看一个二维的canvas画布吗。

我们暂且将A点放在z轴，B点放在yz平面，则A点的三维坐标可以表示为

A(0，0，zA)，B点的三维坐标可以表示为B(0，yB，zB)。从B点做一条垂线垂z轴于D点。

ADB与AOC是相似三角形，所以有

图片3.png

变换得

图片6.png

其中DB即B点的y坐标，AO即A点的z坐标，DO即B点的z坐标，所以

图片7.png

这里的OC也就是C点的y坐标。

从z轴观察xz平面上的点

02.png

同理我们从A点观察平面xz上的某一点E(xE，0，zE)，ADE与AOF是相似三角形

图片8.png

变换得

图片9.png

从z轴观察空间内任意坐标

之前所观测的B点是位于yz平面内，E点是位于xz平面内，但是如果是空间内任意位置的点呢

其实道理都是一样的，如下如

03.png

如果将直线BD平移到E点，直线DE平移到B点，那么将形成一个矩形DBGE，矩形DBGE在xy平面上的投影为矩形OCHF。

由于AGE与AHF相似，所以有

图片10.png

并且由于ADE与AOF也是相似三角形，所以

图片11.png

所以

图片12.png

推导得

图片13.png

其中GE也就是G点的y坐标，因为矩形DBGE是平行于xy平面的，所以它们z坐标相同，DO等价于G点的z坐标，所以对于空间内任意位置G(xG，yG，zG)

图片14.png

同样的方法我们可以推导出

图片15.png

变换得

图片16.png

结合上两步，CH是H点的x坐标，HF是H点的y坐标，所以从轴上的点A(0，0，zA)观察空间内任意位置G(xG，yG，zG)在平面xy上的投影可表示为

图片17.png

从任意位置观察空间内任意坐标

沿着x轴平移坐标系

之前的推论到从z轴观察空间内任意位置的投影了，但是实际上A点是有特殊性的，因为它是位于z轴上的某一个点，其xy坐标都为0，如果A是空间内的任意一个点，情况又如何，请看下图

04.png

假设这个时候真正的坐标系是xy'z'，而坐标系xyz是我们临时所建立的一个虚拟的坐标系，那么这个时候A点相对于坐标系xy'z'来说，坐标点可表示为A(xA，0，zA)，G点依旧表示为(xG，yG，zG)

我们之前推导的相似三角形的关系，即使换了坐标系，它们的关系依然成立，所以

图片15.png

变换得

图片18.png

只不过这个时候 BG=xG-xA，AO与DO与之前相同

求得

图片19.png

之前推导出的相似三角形关系依旧成立，所以

图片20.png

变换得

图片13.png

由于GE，AO，DO与之前相比都没有变化，

所以得

图片14.png

与之前的推导一致，最后我们得出结论，我们沿着x轴方向移动坐标系的时候(即图中的坐标系有xy'z'移动到了xyz位置)，G点在平面xy的投影H点的y坐标不会有变化，但是x坐标为

图片21.png

沿着y轴平移坐标系

如下图

05.png

假设x'yz'是真正的坐标系，沿着y轴平移得到临时坐标系xyz，推导步骤和之前的相同，这里不再赘述，直接贴结果

图片22.png

图片23.png

也就是说当沿着y轴方向移动坐标系的时候，投影H的x坐标不会有变化，y坐标变为