Matrix接口

与Vector接口一样，threejs也在Matrix3.d.ts文件中提供了一个Matrix接口，并且在Matrix3（3x3矩阵类）和Maxtrix4（4x4矩阵类）中实现了该接口。

Matrix接口

我们可以看到，矩阵中的元素是用数组的方式储存的。由于不同维度的矩阵内所用的元素个数不同，所以Matrix3和Matrix4的set方法是分开声明在每个类中的。这里我们以Matrix3.set为例：

Matrix3.set

可以看到，在set时是以行优先的顺序进行传值的，也就是第一行第一个，第一行第二个，第一行第三个，第二行第一个，第二行第二个...

但是在set方法的实现中，可以看到elements数组内是以列优先的顺序进行存储的：

Matrix3.set方法实现

$M_{3\times3} = \begin{pmatrix} n11 \rightarrow e0 & n12 \rightarrow e3 & n13 \rightarrow e6 \\ n21 \rightarrow e1 & n22\rightarrow e4 & n23\rightarrow e7 \\ n31\rightarrow e2 & n32\rightarrow e5 & n33\rightarrow e8 \end{pmatrix}$

简单点说，这里只是存储方式的不同。由于大多数人都习惯以行优先的方式考虑矩阵，所以threejs中所有的文档都是以行优先的方式表示的。但如果我们想要阅读源码，就要注意到[n11, n12, n13, n21 ... n33]并不是按顺序储存在elements中。事实上如果我们按顺序读取elements中的元素并以行优先的方式组成矩阵，它将是原本矩阵的转置矩阵。

https://en.wikipedia.org/wiki/File:Row_and_column_major_order.svg

在阅读后续的矩阵计算相关的方法中，我们一定要时刻注意threejs的矩阵元素是以列优先的方式存储的！

如同Vector的类型，Matrix类型中所有返回值为自身类对象的方法也是原地修改该对象。例如Transpose转置

Matrix3.prototype.transpose

所有的Matrix也提供了clone和copy方法，用于深拷贝不同Matrix对象。

那么threejs中的向量与矩阵进行计算是以什么形式进行的呢？这里我们举一个例子。

行向量还是列向量？

在Vector3类中提供了appyMatrix3这个方法，这个方法以一个3x3的矩阵作为参数，相乘后原地修改向量的值。

Vector3.applyMatrix3

如果我们将Vector3看做三行一列的矩阵（3x1）的话，那么就需要左乘3x3矩阵，最后得到列向量：

$V =\begin{pmatrix} e0 & e3 & e6 \\ e1 & e4 & e7 \\ e2 & e5 & e8\end{pmatrix}\begin{pmatrix}x\\y\\z\end{pmatrix}=\begin{pmatrix}e0*x + e3 *y+e6*z \\e1*x+e4*y+e7*z\\e2*x+e5*y+e8*z\end{pmatrix}$

如果我们将Vecot3看做一行三列的矩阵（1x3）的话，那么就需要右乘3x3矩阵，最后得到行向量：

$V =\begin{pmatrix}x&y&z\end{pmatrix}\begin{pmatrix} e0 & e3 & e6 \\ e1 & e4 & e7 \\ e2 & e5 & e8\end{pmatrix}=\begin{pmatrix}x*e0+y*e1+z*e2 &x*e3+y*e4+z*e5 &x*e6+y*e7+z*e8\end{pmatrix}$

在这里我们发现：threejs中的向量和矩阵的乘法是以列向量左乘矩阵的方式实现的。

接下来，我们再假设一个向量

加入齐次坐标w=1，来表示三维空间中的一个点（1,2,3）

然后我们构建一个仿射变换矩阵做缩放+平移运算

即沿着xyz轴均缩放2倍，然后沿着xyz移动5个单位距离。最终结果是：

$P^ \prime = \begin{pmatrix}2 & 0 & 0 & 5\\0 & 2 & 0 & 5\\0 & 0 & 2 & 5\\0 & 0 & 0 & 1\end{pmatrix}\begin{pmatrix}1\\2\\3\\1\\\end{pmatrix}= \begin{pmatrix}2 *1+ 0*2+0*3 + 5 * 1 = & 7\\0 *1+ 2*2+0*3 + 5 * 1 = &9\\0 *1+ 0*2+2*3 + 5 * 1 = &11\\0 *1+ 0*2+0*3 + 1* 1 = &1\\\end{pmatrix}$

这个计算我们会使用Vector3.applyMatrix4

Vector3.applyMatrix4

接下来验证一下：

初始化向量和矩阵并调用applyMatrix4

控制台打印结果：

控制台打印

结论

threejs中的矩阵以行优先的形式初始化，以列优先的形式储存。

threejs中的向量采用列向量，与矩阵做左乘运算。

threejs中一个三维向量与4x4的矩阵进行运算时，会先给三维向量补充第四个值w，也就是齐次坐标，w值与矩阵的第四行有关系：

const w = 1 / ( e[ 3 ] * x + e[ 7 ] * y + e[ 11 ] * z + e[ 15 ] );

在上面的例子中，我们使用了一个缩放+平移的仿射变换矩阵作为例子，此时w为1。

2. threejs源码阅读——math/matrix

Matrix接口

行向量还是列向量？

结论

你可能感兴趣的:(2. threejs源码阅读——math/matrix)