이 클래스는 [link:https://en.wikipedia.org/wiki/Ray_casting raycasting]을 보조하기 위해 만들어졌습니다. 레이캐스팅은 여러 개체 중 마우스로 선택(마우스가 3d 공간의 객체 위에서 작동하는)하는 기능을 담당합니다.
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);
[example:webgl_interactive_cubes Raycasting to a Mesh]
[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]
[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]
[example:webgl_instancing_raycast Raycasting to a InstancedMesh]
[example:webgl_interactive_lines Raycasting to a Line]
[example:webgl_interactive_raycasting_points Raycasting to Points]
[example:webgl_geometry_terrain_raycast Terrain raycasting]
[example:webgl_interactive_voxelpainter Raycasting to paint voxels]
[example:webgl_raycast_texture Raycast to a Texture]
[page:Vector3 origin] — 레이캐스팅이 활용되는 시점 벡터입니다.
[page:Vector3 direction] — 레이 방향을 가지고 있는 방향 벡터입니다. 정규화되어야 합니다.
[page:Float near] — near보다 바깥 범위에 있는 결과값들입니다. 음수가 될 수 없습니다. 기본값은 0입니다.
[page:Float far] — far 안쪽 범위에 있는 결과값들입니다. near보다 작을 수 없습니다. 기본값은 무한대입니다.
새 레이캐스터 객체를 만듭니다.
레이캐스터의 far 요소입니다. 이 값은 거리에 비례해 버려지는 객체들을 나타냅니다. 이 값은 음수가 될 수 없으며 near 프로퍼티보다 커야합니다.
레이캐스터의 near 요소입니다. 이 값은 거리에 비례해 버려지는 객체들을 나타냅니다. 이 값은 음수가 될 수 없으며 far 프로퍼티보다 작아야 합니다.
[page:Sprites]같은 빌보드객체처럼 뷰에 의존하는 객체에 대항 레이캐스팅 시에 사용되는 카메라입니다. 이 값은 수동으로 설정하거나 "setFromCamera"를 호출해야 합니다. 기본값은 null입니다.
[name]에서 인터섹션 테스트 시에 3d 객체를 선택적으로 무시할 때 사용됩니다. 아래 코드 예제에서 *1* 레이어에 있는 3D 객체들만 [name]의 인스턴스가 될 것입니다.
raycaster.layers.set( 1 );
object.layers.enable( 1 );
다음과 같은 프로퍼티를 가지고 있는 객체입니다:
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}
여기서 threshold는 객체를 교차할 때 레이캐스터의 정밀도(월드 단위)입니다.
레이캐스팅에 사용되는 [Page:Ray]입니다.
[page:Vector3 origin] — 레이캐스팅이 활용되는 시점 벡터입니다.
[page:Vector3 direction] — 레이 방향을 정하는 정규화된 방향 벡터입니다.
새 시점과 방향으로 레이를 업데이트합니다. 이 메서드는 인자의 값만을 복사한다는 점에 주의하세요.
[page:Vector2 coords] — 마우스의 2D 좌표이며 정규화 디바이스 좌표입니다(NDC)---X 및 Y 컴포넌트는 -1 과 1 사이입니다.
[page:Camera camera] — 레이의 시점이 되는 카메라입니다.
레이의 새 시점과 방향을 업데이트합니다.
[page:Object3D object] — 레이와의 교차 체크를 하는 객체입니다.
[page:Boolean recursive] — true라면, 모든 자식들도 함게 체크합니다. false라면 해당 객체와의 교차만 체크합니다. 기본값은 false입니다.
[page:Array optionalTarget] — (생략가능) 결과값을 설정할 타겟입니다. 아니면 [page:Array]가 인스턴스화됩니다. 이 값을 설정하면, 모든 요청 전에 배열을 제거해야합니다 (예를 들어 array.length = 0;).
자식 항목이 포함되거나 포함되지 않은 객체와 레이 사이의 모든 교차를 체크합니다. 교차는 거리별로 가장 가까운 거리부터 리턴됩니다. 교차 배열은 아래와 같이 리턴됩니다.
[ { distance, point, face, faceIndex, object }, ... ]
[page:Float distance] – 레이의 시점과 교차 간의 거리
[page:Vector3 point] – 월드 좌표에서의 교차점
[page:Object face] – 교차면
[page:Integer faceIndex] – 교차 면의 인덱스
[page:Object3D object] – 교차된 객체
[page:Vector2 uv] - 교차점의 U,V 좌표
[page:Vector2 uv2] - 교차점의 U,V 2차 좌표
[page:Integer instanceId] – InstancedMesh에 교차하는 레이의 인스턴스 인덱스 넘버입니다.
*Raycaster*는 레이가 객체에 교차하는지 아닌지 판단할 때의 전달받은 객체의 [page:Object3D.raycast raycast] 메서드를 대신합니다. 이는 [page:Line lines]과 [page:Points pointclouds]와 달리 [page:Mesh meshes]가 레이캐스팅에 다르게 반응할 수 있게 합니다.
메쉬의 면은 [page:.ray ray]의 시점에서 탐지 가능할 수 있도록 마주보고 있어야 하는 것에 주의하세요; 면의 뒤쪽을 통과하는 레이 교차는 탐지디지 않을 것입니다. 객체의 양 면을 레이캐스팅하고 싶다면, [page:Mesh.material material]의 [page:Material.side side] 프로퍼티를 *THREE.DoubleSide*로 설정해야합니다.
[page:Array objects] — 레이의 교차를 체크하기 위한 객체입니다.
[page:Boolean recursive] — true면 객체의 모든 자식들도 체크합니다. 아니면 객체만의 교차를 체크합니다. 기본값은 false입니다.
[page:Array optionalTarget] — (생략가능) 결과값을 설정할 타겟입니다. 아니면 [page:Array]가 인스턴스화됩니다. 이 값을 설정하면, 모든 요청 전에 배열을 제거해야합니다 (예를 들어 array.length = 0;).
자식 항목이 포함되거나 포함되지 않은 객체와 레이 사이의 모든 교차를 체크합니다. 교차는 거리별로 가장 가까운 거리부터 리턴됩니다. 교차는 [page:.intersectObject]와 같은 방식으로 리턴됩니다.
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]