Raycaster

Raycaster

Raycasting은 화면에서 마우스 클릭이나 드래그 같은 입력이 3D 공간에서 어떤 객체와 충돌하는지 검사하는 방법입니다. 쉽게 말해, 보이지 않는 레이저(광선)를 쏘아서 그 광선이 어떤 물체에 닿았는지 확인하는 방식입니다.

---

Raycast가 언제 필요할까?

• 마우스로 3D 오브젝트 선택하기
• 오브젝트 간 충돌 감지
• 레이저 포인터 만들기 (VR, AR 등)
• 캐릭터가 땅을 밟고 있는지 확인하기 (물리적 충돌 감지)

---

Three.js에서 Raycast 사용법

1️⃣ Raycaster 객체 생성

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

Raycaster는 광선을 쏘는 역할을 하고, Vector2는 마우스 위치를 저장하는 역할을 합니다.

2️⃣ 마우스 좌표를 변환 (2D → 3D)

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
window.addEventListener("mousemove", onMouseMove);

Three.js는 -1 ~ 1 범위의 좌표계를 사용하기 때문에, 마우스 좌표를 변환해야 합니다.

3️⃣ Raycaster로 광선 쏘기

raycaster.setFromCamera(mouse, camera);

마우스 위치를 기준으로 광선을 쏘는 과정입니다.

4️⃣ 광선이 닿은 오브젝트 찾기

const intersects = raycaster.intersectObjects(scene.children);

if (intersects.length > 0) {
  console.log("충돌한 오브젝트:", intersects[0].object);
}

intersectObjects()를 사용하면 충돌한 오브젝트 목록을 가져올 수 있습니다.

---

예제: 클릭한 오브젝트 색 변경

function onClick(event) {
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    intersects[0].object.material.color.set(0xff0000); // 빨간색으로 변경
  }
}

window.addEventListener("click", onClick);

위 예제는 마우스로 클릭한 3D 오브젝트의 색상을 변경하는 코드입니다.

---

정리

1. Raycaster를 생성합니다.
2. 마우스 좌표를 Three.js 좌표계로 변환합니다.
3. raycaster.setFromCamera()를 사용해 광선을 쏩니다.
4. intersectObjects()로 충돌한 오브젝트를 찾습니다.
5. 원하는 동작(색 변경, 이동, 클릭 이벤트 등)을 적용합니다.

https://threejs.org/docs/index.html?q=raycast#api/en/core/Raycaster

three.js docs