Rotation

3D Rotation

3차원 회전을 다룰 때 사용되는 대표적인 방법들로 Euler,Quaternion가 있다.

X, Y, Z 축에 대해 서로 다른 방식으로 회전을 정의한다.

Matrix transformations?

Euler(오일러)

세가지 회전 축(x, y, z)을 하나씩 연속해서 계산하여 표현하는 방식 (계산 순서는 변경 가능하다.)

• 오일러 각은 오브젝트의 세가지 축(X, Y, Z)을 중심으로 한 회전을 정의하는 세 가지 각도 집합이다.

• 즉, 축에서 회전할 때의 각도를 의미한다.

• 물리학자인 레오나르드 오일러의 이름을 따서 명명됨

장점

• 방향을 설명하는 세개의 각도만 있어 회전 계산이 직관적이고 이해하기 쉽다.

단점

• 세 가지 각도로만 움직이는 것에 한계와 제약이 있다.

• X -> Y -> Z 축 회전이 순서대로 계산되어 짐벌락 현상이 발생한다.

짐벌락(Gimbal lock) 현상이란? 특정 방향에서 두개의 축이 합쳐지면서 한 축에 대해 계산이 불가능해져 각도가 이상하게 돌아가는 문제

Quaternion(쿼터니언)

오일러와 달리 4개의 값(회전 축 + 각도)의 조합으로 3D 공간의 모든 회전을 나타낼 수 있는 수학적 개념

• 회전의 축을 결정하는 X, Y, Z 의 벡터와 회전 양을 결정하는 W

장점

• X,Y,Z 축을 한번에 계산하기 때문에 짐벌락 현상이 일어나지 않는다.

• 회전 계산이 더 빠르고, 더 부드러운 회전을 제공한다.

단점

• 180° 이상의 회전을 표현하지 못한다.180°를 넘어가면 기준점에서 가까운 곳으로 회전한다.

SnapAngle이란?

TCB

Tension(장력), Continuity(연속성), Bias(바이어스)의 약자

Euler + Quaternion

쿼터니언은 더 안정적이고 정확하게 계산하는 이점이 있는 반면 복잡하고, 오일러는 단순하고 더 직관적이지만 회전을 표현하는데 제약이 있다. 작업하려는 목적, 요구사항에 따라 두 가지 방법을 조합하여 오일러 → 쿼터니언, 쿼터니언 → 오일러로 변환하여 작업을 수행하는 것이 효과적이다.

• .Quaternion() -> 쿼터니언 객체를 생성하는 생성자

• .Euler() -> 오일러 각 객체를 생성하는 생섯자

• .setFromQuaternion(quaternion) -> 쿼터니언을 사용하여 오일러 각을 설정하는 메서드

• .setFromEuler(euler) -> 오일러 객체를 사용하여 쿼터니언을 계산하는 메서드

쿼터니언 -> 오일러

const quaternion = new THREE.Quaternion(x, y, z, w);
const quatToEuler = new THREE.Euler().setFromQuaternion(quaternion)

오일러 -> 쿼터니언

const euler = new THREE.Euler(x, y, z);
const eulerToQuat = new THREE.Quaternion().setFromEuler(euler);

회전의 각도는 우리가 흔히 생각하는 각도(degree)가 아닌 Radin값을 사용한다.

const radToDeg = (rad) => (rad / Math.PI) / 180;
const degToRad = (deg) => (deg / 180 ) * Math.PI;