three.js objet translate and rotate basé sur l'objet système de coordonnées auto ou système de coordonnées monde

Question

Je crée un cube dans three.js et si je le tourne d'abord puis translateX, la position du cube n'est pas (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); 

mais si i translateX le premier puis tourner, la position est (10,0,0). Donc, je remarque que l'objet traduit en fonction du système de coordonnées auto-référencé. Lorsque je tourne d'abord, le système de coordonnées auto de l'objet est enclenché. Mais si je le fais d'abord pivoter puis translateX, la position du cube est (5.3, 0, -5.3), et faites-la tourner maintenant, cela ressemble à une rotation non basée sur un système auto-coordonné.

Alors je veux savoir est l'objet traduire et faites pivoter basé sur l'auto système de coordonnées ou système de coordonnées.

Answer 1

Une concaténation de 2 matrices (de multiplication de la matrice) n'est pas commutative:

Note, la matrice de traduction ressemble à ceci:

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) 

Et la matrice de rotation autour de l'axe Y ressemble à ceci:

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) 

Une multiplication matricielle fonctionne comme ceci:

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

Le résultat de translate * rotate est la suivante:

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) 

Note, le résultat de rotate * translate serait:

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)