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)