javascript - 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属性返回 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]...