You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

206 lines
8.5 KiB

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