Threejs/WebGL中旋转变换的原理

目录

目录

向量的旋转变换 

正交变换 

WebGL中的旋转矩阵

绕Z轴的旋转矩阵

绕X轴的旋转矩阵

绕Y轴的旋转矩阵

---

向量的旋转变换 

向量p按逆时针旋转α度，可如下表示

正交变换 

上述旋转变换在高维空间中的属于正交的线性变换，即 p' = Ap，旋转矩阵A满足正交性，称为正交矩阵，正交阵遵循两个条件：

1. A为方阵
2. 列（行）向量两两正交且为单位向量

比如：

        每个列向量是单位化：cos^2α + sin^2α 开根号 = 1  

        两两向量的内积为0：(cosα*-sinα + sinα+cosα) = 0

正交变换不会改变向量的内积、长度、夹角，如下图

可知，三维世界中通过正交变换并不会改变几何图形的整体形状，只是相对的改变其位置 

WebGL中的旋转变换

在WebGL中，旋转矩阵通常是一种特殊的正交矩阵，它用于在三维空间中执行旋转变换。旋转变换属于正交变换，正交变换是一种线性变换，它保持向量的长度和角度不变，同时保持向量空间的正交性。

绕Z轴的旋转矩阵

在上图中，我们把旋转矩阵Rz应用于一个三角形，把他绕Z轴旋转90度，左边是旋转之前的三角形，右图是应用变换矩阵Rz(90度)，即绕Z轴（垂直屏幕向外）旋转90度之后的三角形 

绕X轴的旋转矩阵

绕Y轴的旋转矩阵

毫无疑问，任意轴进行旋转变换，其旋转矩阵都满足正交阵

另外，正向旋转可以用右手法则来确定，想象一下，用右手握住旋转轴，且大拇指的方向指向这个轴的正方向，则其他手指所指的方向就是正向旋转 

拿z旋转轴举例