java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体

摘要：Canvas画布是一个二维平面，如何展示出3D效果？通过将三维空间中的Z轴抽取出来，将图像的点投影到与Z轴垂直的平面上，在通过旋转等变换效果，我们就能实现3D效果。

一、建立坐标系

1)立方体坐标系

我们以立方体的几何中心作为原点，如图建立坐标系。

2)canvas坐标系

canvas坐标系主要用于显示3维平面在浏览器中的投影(就像一束光照射在立方体上，在墙面出现的阴影)。三维坐标系的层次在顶层，canvas坐标系在底层。

二、立方体旋转

我们将Y轴抽取出来之后，图像对于屏幕前的我们，主要是围绕Z轴和X轴所处平面的轴在旋转，当我们的鼠标移动时，移动的XY距离可以换算成旋转的角度。立方体在空间中的旋转，我们只需要旋转他的8个顶点，移动后将每个面连起来，就完成了立方体的移动。

PS：这里涉及到了旋转矩阵的知识，不明白的同学可以搜索一下旋转矩阵，有详细的解释，本文不再阐述。

1)绕X轴移动

鼠标向下移动时，我们将移动的距离换算为角度θ，利用旋转矩阵，我们将顶点的矢量与旋转矩阵相乘，即可得到旋转后的点。