[置顶] 第四节 WebGL中的图形变换：旋转、平移和缩放

在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解：

1 旋转变换

试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示，表示点(x, y)绕原点旋转一定角度后到达新的位置，假设原点到想（x, y）半径为R。可参考我另一篇博客的完整示例，绘制一个旋转的彩色立方体：点击打开链接



图中的关系可由系列式子计算：


 

由上面的公式，上述坐标的矩阵表达形式为： 


 

将其推广至三维空间，并用其次坐标表示出来，称为旋转矩阵： 
绕x轴旋转： 


 
绕y轴旋转： 


 
绕z轴旋转 

2 平移变换

平移是将点沿着指定的方向移动一段距离，即在原有坐标的基础上，再分别给x,y,z加上Tx,Ty,Tz；其示意图如下所示： 



平移矩阵如下： 

3 缩放变换

顾名思义，缩放即对图形的放大缩小，其示意图如下所示： 


 

缩放的原理是在原有坐标的基础上乘一个缩放因子： 


 

其缩放矩阵如下： 



以上就是WebGL中常用的三种变换，具体的代码实现在我的另一篇微薄上：点击打开链接。 

里面实现了一个可用键盘和鼠标交互的可旋转立方体。