three.js的Matrix4.multiply()方法有什么作用？

Question

我正在学习三个.js并试图将两个翻译矩阵相乘以获得描述两种翻译的单个矩阵：

| 1 0 0 -2 |   | 1 0 0 3 |
| 0 1 0  7 | * | 0 1 0 4 |
| 0 0 1  6 |   | 0 0 1 6 |
| 0 0 0  1 |   | 0 0 0 1 |

我期待以下矩阵：

| 1 0 0  1 |   
| 0 1 0 11 | 
| 0 0 1 12 |   
| 0 0 0  1 |

但相反，我得到了这个矩阵：

| 1  0  0  0 |   
| 0  1  0  0 | 
| 0  0  1  0 |   
| 1  11 12 1 |

我正在使用 three.js 的 Matrix4.multiply() 方法来进行乘法：

var result = matrix1.multiply(matrix2);

这是一个jsfiddle，展示了这一点。

这是一个给出预期结果的 WolframAlpha 查询。

我显然误解了三.js的Matrix4.multiply()方法。 此方法在做什么，我怎样才能实现预期的行为？

Answer 1

问题在于您如何迭代矩阵元素以打印它们。.elements 属性按列主顺序返回元素（尽管构造函数和.set()方法参数按行主顺序返回！所以你应该：

function logMatrix(matrix) {
    var e = matrix.elements;
    var $output = $('#output');
    $output.html(e[0] + ' ' + e[4] + ' ' + e[8] + ' ' + e[12] + 'n');
    $output.append(e[1] + ' ' + e[5] + ' ' + e[9] + ' ' + e[13] + 'n');
    $output.append(e[2] + ' ' + e[6] + ' ' + e[10] + ' ' + e[14] + 'n');
    $output.append(e[3] + ' ' + e[7] + ' ' + e[11] + ' ' + e[15] + 'n');
}

另请注意，您的代码中有一个拼写错误，并且您打印了两次e[13]...