atan2

atan2

Math.atan2(y, x)는 아크탄젠트(arctangent) 함수로, 양의 x축과 (0, 0)에서 (x, y)점까지의 광선 사이의 평면 각도(라디안 단위)를 반환합니다.

atan2(y, x)는 결과를 -π부터 π까지 반환하여 사분면을 정확히 판별할 수 있습니다.

---

Three.js에서 atan2 활용 사례

Three.js에서는 atan2를 주로 두 점 사이의 회전 각도를 계산할 때 사용합니다.
예를 들어 다음과 같은 경우에 활용할 수 있습니다.

• 두 개체가 특정 방향을 바라보도록 설정
• 카메라가 특정 개체를 바라보게 만들기
• 2D 평면에서 캐릭터가 마우스를 향하게 만들기

---

예제: atan2로 오브젝트 회전하기

아래 코드는 Three.js에서 Math.atan2를 사용하여 마우스 위치에 따라 박스가 마우스를 바라보도록 회전하는 예제입니다.

import * as THREE from "https://unpkg.com/three@latest/build/three.module.js";

// 1. Three.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);

// 2. 박스 생성
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const box = new THREE.Mesh(geometry, material);
scene.add(box);
camera.position.z = 5;

// 3. 마우스 위치 저장 변수
let mouse = { x: 0, y: 0 };

// 4. 마우스 이벤트 리스너 추가
window.addEventListener("mousemove", (event) => {
  // 마우스 좌표를 -1 ~ 1 범위로 변환 (WebGL 좌표계)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

// 5. 애니메이션 루프
function animate() {
  requestAnimationFrame(animate);

  // 박스와 마우스 위치 비교 후 atan2로 회전 계산
  const dx = mouse.x - box.position.x;
  const dy = mouse.y - box.position.y;
  box.rotation.z = Math.atan2(dy, dx); // 회전 적용

  renderer.render(scene, camera);
}

animate();

 

실행 결과

• 박스가 마우스의 방향을 따라 회전합니다.
• atan2(dy, dx)를 사용하여 박스의 회전각을 올바르게 계산합니다.
• mousemove 이벤트로 마우스의 위치를 실시간으로 추적합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

Math.atan2() - JavaScript | MDN