Three.js는 이동(position), 회전, 크기변환과 같은 3차원 변환을 위해 행렬을 사용함. Object3D의 파생 클래스의 모든 객체는 matrix 속성을 가지고 있고 이 속성은 객체의 위치, 회전, 크기 변환값이 저장되어 있음. 이 글은 객체의 변환을 어떻게 업데이트 하는지 기술함.
객체의 변환을 업데이트하기 위해서는 2가지 방법이 있음.
1. 객체의 position, quaternion, scale 속성을 변경하고 이 속성들로부터 객체의 행렬을 다시 계산시킴.
object.position.copy( start_position ); object.quaternion.copy( quaternion );
기본적으로 matrixAutoUpdate 속성이 true이므로 행렬은 자동적으로 재계산됨. 만약 객체가 정적이거나 행렬 재계산을 수동으로 제어하고자 한다면 matrixAutoUpdate를 false로 지정하여 더 나은 퍼포먼스를 얻을 수 있음. 이때 다음처럼 수동으로 행렬을 재계산할 수 있음.
object.updateMatrix();
2. 객체의 행렬을 직접 변경해도 됨. Matrix4 클래스는 행렬 변경을 위한 다양한 매서드를 제공함.
object.matrix.setRotationFromQuaternion( quaternion ); object.matrix.setPosition( start_position ); object.matrixAutoUpdate = false;
윗 코드의 경우 matrixAutoUpdate의 값은 false로 지정했고 updateMatrix 매서드가 호출되지 않도록 보장해야 함. updateMatrix 매서드를 호출하면 position, scale 등의 속성값으로 행렬이 재계산되어 버림.
객체의 행렬에는 부모 객체와 연관된 객체의 변환값이 저장되어 있음. 월드 좌표계에 대한 객체의 변환을 얻기 위해서는 객체의 Object3D.matrixWorld에 접근해야 함.
부모 또는 자식 객체의 변환이 변경될 때, 자식 객체의 matrixWorld를 업데이트되도록 updateMatrixWorld 매서드를 호출할 수 있음.
Three.js는 3차원 회전을 위해 2가지 방식을 제공: 오일러(Euler) 각도와 쿼터니안(Quaternions). 이 2가지 방식은 상호간의 변환이 가능함. 오일러 각도 방식은 짐벌락(Gimbal Lock)이라고 불리우는 문제가 있음으로 객체의 회전은 반드시 쿼터니안 방식을 위한 quaternion 속성을 이용해야 함.