Raycaster

특정 방향으로 광선을 쏘 aus 어떤 물체가 해당 광선과 교차(intersection)하는지 테스트할 수 있는 것을 말합니다.

생성

const raycaster = new THREE.Raycaster()
const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(10, 0, 0)
rayDirection.normalize()

raycaster.set(rayOrigin, rayDirection)

Visualizing Raycaster

ArrowHelper

실제 raycater를 확인하고 싶을때 사용하면 편리합니다.

new THREE.ArrowHelper( dir(direction from origin), origin( Point at which the arrow starts), length, hex );

• raycater에서 ArroHelper 사용법

scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0x00ff00) );

Methods

set

// direction은 방향벡터를 normalize 하여 사용하여야 한다.
const direction = new THREE.Vector3(10, 0, 0).normalize();
Raycaster.set(origin: THREE.Vector3, direction: THREE.Vector3);

• origin : 광선이 투사되는 원 vector지점(광선이 시작되는 지점)
• direction : 광선의 방향인 정규화된 방향벡터

setFromCamera

마우스의 현재 좌표값을 이용하여 카메라의 포지션을 선택하여 처리한다.

Raycaster.setFromCamera(coords: THREE.Vector2, camera: THREE.Camera);

• coords : 2D coordinates of the mouse, in normalized device coordinates, X 와 Y 는 -1 과 1 사이이다.
• camera : 광선이 시작되는 카메라

private onMouseClick(event){

  event.preventDefault();
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
}

위에서 주의할 점은 html > body 의 padding 및 margin은 0으로 주어야 정확한 위치를 잡을 수있다.

intersectObject() intersectObjects()

ray가 교차하는 Object를 얻을 수 있다.

const intersect = raycaster.intersectObject(object) // object 와 교차하는지 확인, 교차하면 object를 반환한다.
const intersects = raycaster.intersectObjects([object1, object2, object3]) // 교차하는 모든 objects를 반환한다.

results

• distance: ray의 오리진부터 충돌 포인트까지의 거리
• face: geometry의 어떤 면이 ray에 의해 부딪혔는지
• faceIndex: 해당 face의 index
• object: 어떤 object가 충돌과 관련되어 있는지
• point: 충돌 지점의 Vector3 정보
• uv: 해당 geometry의 UV 좌표

참조