three.js对象基于对象自坐标系或世界坐标系进行平移和旋转

Question

我在three.js中创建一个立方体，如果我首先旋转它然后translateX，立方体位置不是（10,0,0）

geometry = new THREE.BoxGeometry( 3, 3, 3 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, 0 , 0);
mesh.rotation.y = Math.PI/4;
mesh.translateX(10);
scene.add( mesh );

但如果我首先翻译它然后旋转，则位置为（10,0,0）。

所以我注意到对象基于自我坐标系转换。 当我首先旋转时，对象自坐标系已经变形。 但如果我首先旋转它然后翻译X，立方体位置是（5.3,0，-5.3）， 现在旋转它，它看起来像不基于自我坐标系的旋转。

所以我想知道的是基于自身坐标系或世界坐标系的对象平移和旋转。

Answer 1

2个矩阵（矩阵乘法）的串联不可交换：

注意，翻译矩阵如下所示：

Matrix4x4 translate;

translate[0] : ( 1,  0,  0,  0 )
translate[1] : ( 0,  1,  0,  0 )
translate[2] : ( 0,  0,  1,  0 )
translate[3] : ( tx, ty, tz, 1 )

围绕Y轴的旋转矩阵如下所示：

Matrix4x4  rotate;
float      angle;

rotate[0] : ( cos(angle),  0, sin(angle), 0 )
rotate[1] : ( 0,           1, 0,          0 )
rotate[2] : ( -sin(angle), 0, cos(angle), 0 )
rotate[3] : ( 0,           0, 0,          1 ) 

矩阵乘法的工作原理如下：

Matrix4x4 A, B, C;

// C = A * B
for ( int k = 0; k < 4; ++ k )
    for ( int l = 0; l < 4; ++ l )
        C[k][l] = A[0][l] * B[k][0] + A[1][l] * B[k][1] + A[2][l] * B[k][2] +  A[3][l] * B[k][3];

translate * rotate的结果是：

model[0] : ( cos(angle),  0,  sin(angle), 0 )
model[1] : ( 0,           1,  0,          0 )
model[2] : ( -sin(angle), 0,  cos(angle), 0 )
model[3] : ( tx,          ty, tz,         1 )

请注意，rotate * translate的结果为：

model[0] : ( cos(angle),                     0,   sin(angle),                     0 )
model[1] : ( 0,                              1,   0,                              0 )
model[2] : ( -sin(angle),                    0,   cos(angle),                     0 )
model[3] : ( cos(angle)*tx - sin(angle)*tx,  ty,  sin(angle)*tz + cos(angle)*tz,  1 )