samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Raycaster - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
	<h1 translate="no">Raycaster</h1>
		<section>
			<header>
				<div class="class-description"><p>This class is designed to assist with raycasting. Raycasting is used for
mouse picking (working out what objects in the 3d space the mouse is over)
amongst other things.</p></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="Raycaster" translate="no">new <a href="#Raycaster">Raycaster</a><span class="signature">( origin : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, direction : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, near : <span class="param-type">number</span>, far : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new raycaster.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>origin</strong>
									</td>
									<td class="description last">
										<p>The origin vector where the ray casts from.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>direction</strong>
									</td>
									<td class="description last">
										<p>The (normalized) direction vector that gives direction to the ray.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>near</strong>
									</td>
									<td class="description last">
										<p>All results returned are further away than near. Near can't be negative.</p>
										<p>Default is <code>0</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>far</strong>
									</td>
									<td class="description last">
										<p>All results returned are closer than far. Far can't be lower than near.</p>
										<p>Default is <code>Infinity</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="camera" translate="no">.<a href="#camera">camera</a><span class="type-signature"> : <a href="Camera.html">Camera</a></span> </h3>
					<div class="description">
						<p>The camera to use when raycasting against view-dependent objects such as
billboarded objects like sprites. This field can be set manually or
is set when calling <code>setFromCamera()</code>.</p>
						<p>Default is <code>null</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="far" translate="no">.<a href="#far">far</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>All results returned are closer than far. Far can't be lower than near.</p>
						<p>Default is <code>Infinity</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="layers" translate="no">.<a href="#layers">layers</a><span class="type-signature"> : <a href="Layers.html">Layers</a></span> </h3>
					<div class="description">
						<p>Allows to selectively ignore 3D objects when performing intersection tests.
The following code example ensures that only 3D objects on layer <code>1</code> will be
honored by raycaster.</p>
<pre><code class="language-js">raycaster.layers.set( 1 );
object.layers.enable( 1 );
</code></pre>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="near" translate="no">.<a href="#near">near</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>All results returned are further away than near. Near can't be negative.</p>
						<p>Default is <code>0</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="params" translate="no">.<a href="#params">params</a><span class="type-signature"> : Object</span> </h3>
					<div class="description">
						<p>A parameter object that configures the raycasting. It has the structure:</p>
<pre class="prettyprint source"><code>{
	Mesh: {},
	Line: { threshold: 1 },
	LOD: {},
	Points: { threshold: 1 },
	Sprite: {}
}
</code></pre>
<p>Where <code>threshold</code> is the precision of the raycaster when intersecting objects, in world units.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="ray" translate="no">.<a href="#ray">ray</a><span class="type-signature"> : <a href="Ray.html">Ray</a></span> </h3>
					<div class="description">
						<p>The ray used for raycasting.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="intersectObject" translate="no">.<a href="#intersectObject">intersectObject</a><span class="signature">( object : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, recursive : <span class="param-type">boolean</span>, intersects : <span class="param-type">Array.&lt;<a href="Raycaster.html#~Intersection">Raycaster~Intersection</a>></span> )</span><span class="type-signature"> : Array.&lt;<a href="Raycaster.html#~Intersection">Raycaster~Intersection</a>></span> </h3>
					<div class="method">
						<div class="description">
							<p>Checks all intersection between the ray and the object with or without the
descendants. Intersections are returned sorted by distance, closest first.</p>
<p><code>Raycaster</code> delegates to the <code>raycast()</code> method of the passed 3D object, when
evaluating whether the ray intersects the object or not. This allows meshes to respond
differently to ray casting than lines or points.</p>
<p>Note that for meshes, faces must be pointed towards the origin of the ray in order
to be detected; intersections of the ray passing through the back of a face will not
be detected. To raycast against both faces of an object, you'll want to set  <a href="Material.html#side">Material#side</a>
to <code>THREE.DoubleSide</code>.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>object</strong>
									</td>
									<td class="description last">
										<p>The 3D object to check for intersection with the ray.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>recursive</strong>
									</td>
									<td class="description last">
										<p>If set to <code>true</code>, it also checks all descendants.
Otherwise it only checks intersection with the object.</p>
										<p>Default is <code>true</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>intersects</strong>
									</td>
									<td class="description last">
										<p>The target array that holds the result of the method.</p>
										<p>Default is <code>[]</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> An array holding the intersection points.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="intersectObjects" translate="no">.<a href="#intersectObjects">intersectObjects</a><span class="signature">( objects : <span class="param-type">Array.&lt;<a href="Object3D.html">Object3D</a>></span>, recursive : <span class="param-type">boolean</span>, intersects : <span class="param-type">Array.&lt;<a href="Raycaster.html#~Intersection">Raycaster~Intersection</a>></span> )</span><span class="type-signature"> : Array.&lt;<a href="Raycaster.html#~Intersection">Raycaster~Intersection</a>></span> </h3>
					<div class="method">
						<div class="description">
							<p>Checks all intersection between the ray and the objects with or without
the descendants. Intersections are returned sorted by distance, closest first.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>objects</strong>
									</td>
									<td class="description last">
										<p>The 3D objects to check for intersection with the ray.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>recursive</strong>
									</td>
									<td class="description last">
										<p>If set to <code>true</code>, it also checks all descendants.
Otherwise it only checks intersection with the object.</p>
										<p>Default is <code>true</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>intersects</strong>
									</td>
									<td class="description last">
										<p>The target array that holds the result of the method.</p>
										<p>Default is <code>[]</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> An array holding the intersection points.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="set" translate="no">.<a href="#set">set</a><span class="signature">( origin : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, direction : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Updates the ray with a new origin and direction by copying the values from the arguments.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>origin</strong>
									</td>
									<td class="description last">
										<p>The origin vector where the ray casts from.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>direction</strong>
									</td>
									<td class="description last">
										<p>The (normalized) direction vector that gives direction to the ray.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setFromCamera" translate="no">.<a href="#setFromCamera">setFromCamera</a><span class="signature">( coords : <span class="param-type"><a href="Vector2.html">Vector2</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Uses the given coordinates and camera to compute a new origin and direction for the internal ray.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>coords</strong>
									</td>
									<td class="description last">
										<p>2D coordinates of the mouse, in normalized device coordinates (NDC).
X and Y components should be between <code>-1</code> and <code>1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>camera</strong>
									</td>
									<td class="description last">
										<p>The camera from which the ray should originate.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h3 class="name name-method" id="setFromXRController" translate="no">.<a href="#setFromXRController">setFromXRController</a><span class="signature">( controller : <span class="param-type"><a href="WebXRController.html">WebXRController</a></span> )</span><span class="type-signature"> : <a href="Raycaster.html">Raycaster</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Uses the given WebXR controller to compute a new origin and direction for the internal ray.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>controller</strong>
									</td>
									<td class="description last">
										<p>The controller to copy the position and direction from.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this raycaster.</dt>
						</dl>
					</div>
				<h2 class="subsection-title">Type Definitions</h2>
				<div class="member">
					<h3 class="name" id="~Intersection" translate="no">.<a href="#~Intersection">Intersection</a> </h3>
					<div class="description">
						<p>The intersection point of a raycaster intersection test.</p>
					</div>
<table class="props">
	<tbody>
		<tr>
				<td class="name">
					<strong>distance</strong>
						<br>
<span class="param-type">number</span>
				</td>
			<td class="description last">
				<p>The distance from the ray's origin to the intersection point.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>distanceToRay</strong>
						<br>
<span class="param-type">number</span>
				</td>
			<td class="description last">
				<p>Some 3D objects e.g. <a href="Points.html">Points</a> provide the distance of the
intersection to the nearest point on the ray. For other objects it will be <code>undefined</code>.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>point</strong>
						<br>
<span class="param-type"><a href="Vector3.html">Vector3</a></span>
				</td>
			<td class="description last">
				<p>The intersection point, in world coordinates.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>face</strong>
						<br>
<span class="param-type">Object</span>
				</td>
			<td class="description last">
				<p>The face that has been intersected.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>faceIndex</strong>
						<br>
<span class="param-type">number</span>
				</td>
			<td class="description last">
				<p>The face index.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>object</strong>
						<br>
<span class="param-type"><a href="Object3D.html">Object3D</a></span>
				</td>
			<td class="description last">
				<p>The 3D object that has been intersected.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>uv</strong>
						<br>
<span class="param-type"><a href="Vector2.html">Vector2</a></span>
				</td>
			<td class="description last">
				<p>U,V coordinates at point of intersection.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>uv1</strong>
						<br>
<span class="param-type"><a href="Vector2.html">Vector2</a></span>
				</td>
			<td class="description last">
				<p>Second set of U,V coordinates at point of intersection.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>normal</strong>
						<br>
<span class="param-type"><a href="Vector3.html">Vector3</a></span>
				</td>
			<td class="description last">
				<p>Interpolated normal vector at point of intersection.</p>
			</td>
		</tr>
		<tr>
				<td class="name">
					<strong>instanceId</strong>
						<br>
<span class="param-type">number</span>
				</td>
			<td class="description last">
				<p>The index number of the instance where the ray
intersects the <a href="InstancedMesh.html">InstancedMesh</a>.</p>
			</td>
		</tr>
	</tbody>
</table>
				</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js" translate="no" target="_blank" rel="noopener">src/core/Raycaster.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>