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 );

但如果我先平移 X 然后旋转，位置是 (10,0,0)。

所以我注意到对象平移基于自身坐标系。当我第一次旋转时，物体自身坐标系已经改变。但是如果我先旋转它然后 translateX，立方体位置是 (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 )

Answer 2

是的，它是基于自坐标系的，这就是为什么当你第一次旋转时，万向轴和物体的轴之间会有一些角度，因为它会在它自己的轴上平移，结果将不匹配您首先在轴平行时平移。

three.js物体平移和旋转基于物体自身坐标系或世界坐标系

three.js object translate and rotate based on object self coordinate system or world coordinate system

coordinate-transformation

three.js