오일러(Euler) vs. 쿼터니언(Quaternion)

오일러(Euler) vs. 쿼터니언(Quaternion)

Three.js에서 3D 객체를 회전시키는 방법에는 오일러 각(Euler Angles)과 쿼터니언(Quaternion) 두 가지가 있습니다. 이 두 개념은 각각 장단점이 있기 때문에, 사용 목적에 따라 선택해야 합니다.

---

1. 오일러(Euler) 각

특징

• X, Y, Z 축을 기준으로 회전을 적용하는 방식
• 각 축에 대한 개별적인 회전 값을 직접 설정할 수 있음
• 사람이 이해하기 쉬움 (각도 단위로 표현)

단점

• 짐벌 락(Gimbal Lock) 문제가 발생할 수 있음
  → 특정 각도에서 하나의 회전 축이 다른 축과 정렬되면서 자유도를 잃는 현상
• 연속적인 회전이 부드럽지 않을 수 있음

예제

cube.rotation.set(Math.PI / 4, Math.PI / 4, 0);  // X, Y, Z 각도 설정

---

2. 쿼터니언(Quaternion)

특징

• 4차원 수학 개념을 기반으로 회전을 표현
• 짐벌 락 문제 없음
• 부드러운 회전과 보간(Interpolation)이 가능
  → 애니메이션, 자연스러운 움직임에 적합

단점

• 직관적으로 이해하기 어려움
  → X, Y, Z 각도를 직접 설정하는 게 아니라, 내부적으로 4개의 값 (x, y, z, w)을 사용함

예제

cube.quaternion.setFromEuler(new THREE.Euler(Math.PI / 4, Math.PI / 4, 0));

또는 두 개의 쿼터니언을 보간하여 자연스럽게 회전:

const q1 = new THREE.Quaternion();
const q2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 4, Math.PI / 4, 0));
THREE.Quaternion.slerp(q1, q2, cube.quaternion, 0.1);

---

오일러 vs. 쿼터니언 비교 정리

	오일러(Euler)	쿼터니언(Quaternion)
이해하기 쉬운가?	✅ 직관적 (X, Y, Z 각도)	❌ 어렵다 (4D 개념)
짐벌 락(Gimbal Lock) 문제	❌ 발생 가능	✅ 문제 없음
애니메이션 / 보간	❌ 부자연스러울 수 있음	✅ 부드러움
사용 사례	개별 축을 기준으로 회전할 때	연속적인 회전이 필요할 때

---

결론: 언제 사용해야 할까?

• 오일러(Euler) → 간단한 회전이 필요할 때 (예: 고정된 X, Y, Z 축 회전)
• 쿼터니언(Quaternion) → 자연스럽고 부드러운 애니메이션이 필요할 때 (예: 카메라 이동, 캐릭터 회전)

둘 다 Three.js에서 함께 사용할 수 있으며, 필요할 때 변환이 가능합니다!

 

https://en.wikipedia.org/wiki/Quaternion

Quaternion - Wikipedia

https://threejs.org/docs/index.html?q=eu#api/en/math/Euler

three.js docs

https://threejs.org/docs/index.html?q=Quaternion#api/en/math/Quaternion

three.js docs