THREE.Euler

THREE.Euler

Three.js에서 Euler 클래스는 오일러 각(Euler Angles)을 사용하여 3D 객체의 회전을 설정하는 데 사용됩니다. 오일러 각은 x, y, z 축을 기준으로 회전 각도를 정의하며, 회전 순서를 지정할 수도 있습니다.

기본 사용법

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';

// 씬, 카메라, 렌더러 생성
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 박스 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 오일러 회전 적용 (각도는 라디안 단위)
cube.rotation.set(Math.PI / 4, Math.PI / 4, 0);

// 카메라 위치 설정
camera.position.z = 5;

// 렌더링 루프
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

---

Euler 클래스의 주요 개념

1. 생성자

const euler = new THREE.Euler(x, y, z, order);

• x, y, z: 각 축의 회전 각도 (라디안 단위)
• order: 회전 순서 (기본값: 'XYZ')

2. 회전 순서 변경

cube.rotation.order = 'YXZ';

• XYZ: X → Y → Z 순서로 회전 (기본값)
• YXZ: Y → X → Z 순서로 회전
• ZXY, ZYX, YZX, XZY 등의 순서도 가능

3. 각도 업데이트

cube.rotation.x += 0.01;
cube.rotation.y += 0.02;

4. 쿼터니언과 변환

오일러 각을 쿼터니언(Quaternion)으로 변환할 수도 있습니다.

const quaternion = new THREE.Quaternion().setFromEuler(cube.rotation);

---

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

three.js docs

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

Euler angles - Wikipedia