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)