概述

上一个demo呈现的效果是一个三角形，直观的感觉就是还是二维的感觉，使用canvas或者div+css也可以实现，那么什么效果是两种方法无法实现的呢？那现在我们来看看三维世界中物体的几种图形变换方式。

什么是图形变换

也就是说这些图形变换，本质上可以看成是同一种变换；在数学上，可以使用矩阵来描述这种变换。并且，为了兼容各种变换的特殊性，会在3维的基础上再加一维，使用4维的向量和矩阵。4维向量表述一个点（x,y,z,w）等价于三维向量（x/w,y/w,z/w），这就是前面提到的齐次坐标。

具体来说，对于空间某个点v0(x0,y0,z0,1),经过空间图像变换后得到新的点v1(x1,y1,z1,1),那么存在这样一个4行4列的矩阵M：

上面这个动图，从车头像看到车尾，你们感觉有几种方法？

在一个三维软件中浏览一个三维物体时候，总是会提供给用户平移、缩放和旋转的交互操作，而这正是模型变换的内容。在图形学的范畴当中，平移变换、旋转变换属于刚体变换，缩放和旋转属于线性变换，刚体变换和线性变换又属于仿射变换，而仿射变换也可以看成投影变换的一种。

展开这个式子，如下：

根据矩阵的乘法公式，获得下面的方程组：

通过上面的式子，就可以求得各种的图形变换矩阵。

模型变换

模型变换包括平移变换、缩放变换和旋转变换。从内容上来讲，这几种变换正好应对的三维交互操作的平移、变换和缩放。通过鼠标操作调整模型变换矩阵就可以实现一种简单三维交互操作。 (1) 平移变换 对于一个点(x,y,z,1)，平移之后，得到的点就是（x+Tx,y+Ty,z+Tz,1），其中Tx、Ty、Tz分别表示点在X轴、Y轴、Z轴方向上移动的距离。那么将其代入方程组式的两边，有：

那么根据多项式相等的原理，可以求得每个多项式系数，继而可得平移矩阵T：

缩放变换

对于一个点(x,y,z,1)，以原点为中心缩放，在X方向缩放Sx倍，在Y方向缩放Sy倍，在Z方向缩放Sz倍，那么新的坐标值为（xSx,ySy,z*Sz,1）。将其代入方程组式(2)的两边，有：

那么根据多项式相等的原理，可以求得每个多项式系数，继而可得缩放矩阵S：

旋转变换

旋转变换就稍微复杂一点，对旋转变换而言，必须知道旋转轴、旋转方向和旋转角度。可以绕X轴，Y轴和Z轴旋转，所以一般都会有三个旋转矩阵。以绕Z轴旋转为例，在Z轴正半轴沿着Z轴负方向进行观察，如果看到的物体是逆时针旋转的，那么就是正旋转，旋转方向就是正的，旋转值就是正数；反之如果旋转值为负数，说明旋转方向就是负的，沿着顺时针旋转。用更加通用的说法来说，正旋转就是右手法则旋转：右手握拳，大拇指伸直并使其指向旋转轴的正方向，那么右手其余几个手指就指明了旋转的方向。

对于一个点p(x,y,z,1),绕Z轴旋转，因为旋转后的Z值不变，所以可以忽略Z值的变换，只考虑XY空间的变化。此时设r为原点到点p的距离，α是X轴旋转到该点的角度。

同上可得旋转矩阵：