在WebGL中,如果我们想实现更高级的动态场景,或者是对物体进行坐标变换,那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算,先从二维平面讲起,再推导至三维空间。下面分别对这几种变换进行一个讲解:
1 旋转变换
试想一下,如果当一个场景只是静态的,没有动画,那将是多么令人乏味的画面,而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示,表示点(x, y)绕原点旋转一定角度后到达新的位置,假设原点到想(x, y)半径为R。可参考我另一篇博客的完整示例,绘制一个旋转的彩色立方体:点击打开链接
图中的关系可由系列式子计算:
由上面的公式,上述坐标的矩阵表达形式为:
将其推广至三维空间,并用其次坐标表示出来,称为旋转矩阵:
绕x轴旋转:
绕y轴旋转:
绕z轴旋转
2 平移变换
平移是将点沿着指定的方向移动一段距离,即在原有坐标的基础上,再分别给x,y,z加上Tx,Ty,Tz;其示意图如下所示:
平移矩阵如下:
3 缩放变换
顾名思义,缩放即对图形的放大缩小,其示意图如下所示:
缩放的原理是在原有坐标的基础上乘一个缩放因子:
其缩放矩阵如下:
以上就是WebGL中常用的三种变换,具体的代码实现在我的另一篇微薄上:点击打开链接。
里面实现了一个可用键盘和鼠标交互的可旋转立方体。