1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This class is designed to assist with [link:https://en.wikipedia.org/wiki/Ray_casting raycasting].
Raycasting is used for mouse picking (working out what objects in the 3d space the mouse is over) amongst
other things.
</p>
<h2>Example</h2>
<code>
var raycaster = new THREE.Raycaster();
var 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
var intersects = raycaster.intersectObjects( scene.children );
for ( var 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);
</code>
<div>
Examples: [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_raycast_texture Raycast to a Texture]
</div>
<p>
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] ) {</h3>
<p>
[page:Vector3 origin] — The origin vector where the ray casts from.<br />
[page:Vector3 direction] — The direction vector that gives direction to the ray. Should be normalized.<br />
[page:Float near] — All results returned are further away than near. Near can't be negative. Default value is 0.<br />
[page:Float far] — All results returned are closer than far. Far can't be lower than near. Default value is Infinity.
</p>
<p>
This creates a new raycaster object.<br />
</p>
<h2>Properties</h2>
<h3>[property:float far]</h3>
<p>
The far factor of the raycaster. This value indicates which objects can be discarded based on the distance.
This value shouldn't be negative and should be larger than the near property.
</p>
<h3>[property:float linePrecision]</h3>
<p>
The precision factor of the raycaster when intersecting [page:Line] objects.
</p>
<h3>[property:float near]</h3>
<p>
The near factor of the raycaster. This value indicates which objects can be discarded based on the distance.
This value shouldn't be negative and should be smaller than the far property.
</p>
<h3>[property:Camera camera]</h3>
<p>
The camera to use when raycasting against view-dependent objects such as billboarded objects like [page:Sprites]. This field
can be set manually or is set when calling "setFromCamera".
Defaults to null.
</p>
<h3>[property:Object params]</h3>
<p>
An object with the following properties:
<code>
{
Mesh: {},
Line: {},
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}
</code>
</p>
<h3>[property:Ray ray]</h3>
<p>The [Page:Ray] used for the raycasting.</p>
<h2>Methods</h2>
<h3>[method:null set]( [param:Vector3 origin], [param:Vector3 direction] )</h3>
<p>
[page:Vector3 origin] — The origin vector where the ray casts from.<br />
[page:Vector3 direction] — The normalized direction vector that gives direction to the ray.
</p>
<p>
Updates the ray with a new origin and direction.
</p>
<h3>[method:null setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>
<p>
[page:Vector2 coords] — 2D coordinates of the mouse, in normalized device coordinates (NDC)---X and Y components should be between -1 and 1.<br />
[page:Camera camera] — camera from which the ray should originate
</p>
<p>
Updates the ray with a new origin and direction.
</p>
<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — The object to check for intersection with the ray.<br />
[page:Boolean recursive] — If true, it also checks all descendants. Otherwise it only checks intersection with the object. Default is false.<br />
[page:Array optionalTarget] — (optional) target to set the result. Otherwise a new [page:Array] is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;).
</p>
<p>
Checks all intersection between the ray and the object with or without the descendants. Intersections are returned sorted by distance, closest first. An array of intersections is returned...
</p>
<code>
[ { distance, point, face, faceIndex, object }, ... ]
</code>
<p>
[page:Float distance] – distance between the origin of the ray and the intersection<br />
[page:Vector3 point] – point of intersection, in world coordinates<br />
[page:Face3 face] – intersected face<br />
[page:Integer faceIndex] – index of the intersected face<br />
[page:Object3D object] – the intersected object<br />
[page:Vector2 uv] - U,V coordinates at point of intersection<br />
[page:Vector2 uv2] - Second set of U,V coordinates at point of intersection<br />
[page:Integer instanceId] – The index number of the instance where the ray intersects the InstancedMesh
</p>
<p>
*Raycaster* delegates to the [page:Object3D.raycast raycast] method of the passed object, when evaluating whether the ray intersects the object or not. This allows [page:Mesh meshes] to respond differently to ray casting than [page:Line lines] and [page:Points pointclouds].
</p>
<p>
*Note* that for meshes, faces must be pointed towards the origin of the [page:.ray 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 the [page:Mesh.material material]'s [page:Material.side side] property to *THREE.DoubleSide*.
</p>
<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Array objects] — The objects to check for intersection with the ray.<br />
[page:Boolean recursive] — If true, it also checks all descendants of the objects. Otherwise it only checks intersection with the objects. Default is false.<br />
[page:Array optionalTarget] — (optional) target to set the result. Otherwise a new [page:Array] is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;).
</p>
<p>
Checks all intersection between the ray and the objects with or without the descendants. Intersections are returned sorted by distance, closest first. Intersections are of the same form as those returned by [page:.intersectObject].
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|
