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

时间:2015-06-21 03:44:09

标签: javascript matrix three.js linear-algebra matrix-multiplication

我正在学习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()方法。这个方法在做什么,我怎样才能实现预期的行为呢?

1 个答案:

答案 0 :(得分:2)

问题在于你如何迭代矩阵元素来打印它们。 .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]两次...