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

Question

我正在学习 three.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);

Here's a jsfiddle that shows this in action.

And here's a WolframAlpha query that gives the expected result.

我显然误解了 three.js 的 Matrix4.multiply() 方法。此方法的作用是什么？我怎样才能实现预期的行为？

Answer 1

问题在于您如何迭代矩阵元素以打印它们。 .elements property returns the elements in column-major order（尽管构造函数和 .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] 两次...

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

What does three.js's Matrix4.multiply() method do?

javascript

matrix

linear-algebra

matrix-multiplication

three.js