Three.js中三维空间变换矩阵的使用

一、变换矩阵

三维图形学中通常使用4x4的矩阵表示图形的变换：

（为什么不是3x3，旋转缩放等变换通过矩阵乘法实现，而平移变换是加法，为了可以用矩阵乘法来同时处理旋转和平移，使得矩阵的缩放、旋转、平移变换都可以在齐次坐标下由一个4×4的变换矩阵来完成，因此引入了齐次坐标，其中最后一行通常是[0, 0, 0, 1]）

1、平移变换

平移变换矩阵如下所示，其中，dx、dy、dz分别对应点三维坐标三个方向上的位移增量：

[ 1  0  0  dx ]
[ 0  1  0  dy ]
[ 0  0  1  dz ]
[ 0  0  0  1  ]

2、旋转变换

旋转变换矩阵如下所示：

1）绕x轴旋转

[ 1     0        0      0 ]
[ 0  cos(θ)   -sin(θ)   0 ]
[ 0  sin(θ)    cos(θ)   0 ]
[ 0     0        0      1 ]

2）绕y轴旋转

[ cos(θ)   0   sin(θ)   0 ]
[    0     1      0     0 ]
[-sin(θ)   0   cos(θ)   0 ]
[    0     0      0     1 ]

3）绕z轴旋转

[ cos(θ)  -sin(θ)   0   0 ]
[ sin(θ)   cos(θ)   0   0 ]
[    0       0      1   0 ]
[    0       0      0   1 ]

3、缩放变换

缩放变换矩阵如下所示，其中，sx、sy、sz分别对应点三维坐标三个方向上的缩放比例：

[ sx  0   0   0 ]
[ 0   sy  0   0 ]
[ 0   0   sz  0 ]
[ 0   0   0   1 ]

二、Three.js中变换矩阵的使用

1、矩阵表示

Three.js中提供了THREE.Matrix4来表示一个四维矩阵：

构造器
Matrix4( n11 : Number, n12 : Number, n13 : Number, n14 : Number, n21 : Number, n22 : Number, n23 : Number, n24 : Number, n31 : Number, n32 : Number, n33 : Number, n34 : Number, n41 : Number, n42 : Number, n43 : Number, n44 : Number )

同时提供了两种方式向Matrix4对象中设置值

1）使用构造器或是set()方法

const m = new THREE.Matrix4();

m.set( 11, 12, 13, 14,
       21, 22, 23, 24,
       31, 32, 33, 34,
       41, 42, 43, 44 );

构造器或使用set()方法设置参数采用行优先设置数据， 而它们Three.js在内部是用列优先的顺序存储在数组当中，因为内部所有的计算都是使用列优先顺序进行的，因此该矩阵在内部会被存储为如下形式：

m.elements = [ 11, 21, 31, 41,
               12, 22, 32, 42,
               13, 23, 33, 43,
               14, 24, 34, 44 ];

2）使用fromArray()方法从已有数组转化

.fromArray ( array : Array, offset : Integer ) : this

array - 用来存储设置元素数据的数组

offset - (可选参数) 数组的偏移量，默认值为 0。

fromArray()方法使用基于列优先格式的数组来设置该矩阵，因此不会对传入矩阵进行行优先转化，传入矩阵按照传入顺序进行保存，如下所示：

const array = [ 11, 12, 13, 14,
                21, 22, 23, 24,
                31, 32, 33, 34,
                41, 42, 43, 44 ];
const m = new THREE.Matrix4();

m.fromArray(array);

m.elements = [ 11, 12, 13, 14,
               21, 22, 23, 24,
               31, 32, 33, 34,
               41, 42, 43, 44 ];

所以在使用fromArray()方法传入矩阵时，需要手动对数组的顺序进行调整，或调用.transpose () 方法将该矩阵转置Transposes，内部才能存储正确的变换矩阵。