ThreeJS 中的矩阵存储

ThreeJS 文档

  在 ThreeJS 中，矩阵是以列主序的方式存储的，也就是说有行主序矩阵：

$\begin{bmatrix} \color{red}1 & \color{red}2 & \color{red}3 & \color{red}{4} \\ \color{green}5 & \color{green}6 & \color{green}7 & \color{green}{8} \\ \color{blue}9 & \color{blue}10 & \color{blue}11 & \color{blue}{12} \\ \color{purple}13 & \color{purple}14 & \color{purple}15 & \color{purple}16 \end{bmatrix}$

  其在 ThreeJS 中的存储就变成了：

$\begin{bmatrix} \color{red}1 & \color{green}5 & \color{blue}9 & \color{purple}{13} \\ \color{red}2 & \color{green}6 & \color{blue}10 & \color{purple}{14} \\ \color{red}3 & \color{green}7 & \color{blue}11 & \color{purple}{15} \\ \color{red}4 & \color{green}8 & \color{blue}12 & \color{purple}16 \end{bmatrix}$

  使用代码测试：

var A = new THREE.Matrix4();
A.set(1, 2, 3, 4,
      5, 6, 7, 8,
      9, 10, 11, 12,
      13, 14, 15, 16);
console.log('A:',A);

var B = new THREE.Matrix4();
B.set(16, 15, 14, 13,
      12, 11, 10, 9,
      8, 7, 6, 5,
      4, 3, 2, 1);
console.log('B:',B);

var C = new THREE.Matrix4();
C.multiplyMatrices (A, B);    
console.log('A · B:',C);

  在网上找一个在线矩阵计算器，相对应的计算结果如下：

ThreeJS 前乘与后乘

  在 ThreeJS 中，后乘的方法是 multiply() ，也就是 A.multiply(B) = A * B ，结果会保存在 A 中：

var A = new THREE.Matrix4();
A.set(1, 2, 3, 4,
      5, 6, 7, 8,
      9, 10, 11, 12,
      13, 14, 15, 16);

var B = new THREE.Matrix4();
B.set(16, 15, 14, 13,
      12, 11, 10, 9,
      8, 7, 6, 5,
      4, 3, 2, 1);

A.multiply(B);
console.log('A:',A);
console.log('B:',B);

  前乘方法是：premultiply()，即 A.premultiply(B) = B * A，同样结果保存在 A 中：

var A = new THREE.Matrix4();
A.set(1, 2, 3, 4,
      5, 6, 7, 8,
      9, 10, 11, 12,
      13, 14, 15, 16);

var B = new THREE.Matrix4();
B.set(16, 15, 14, 13,
      12, 11, 10, 9,
      8, 7, 6, 5,
      4, 3, 2, 1);

A.premultiply(B);
console.log('A:',A);
console.log('B:',B);

---

REF ：https://cloud.tencent.com/developer/article/1694841