three.jsオブジェクトは、オブジェクトの自己座標系またはワールド座標系に基づいて変換および回転します

Question

three.jsでキューブを作成します。最初に回転した場合、Xを変換するとキューブの位置は（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)