Graphics Reference
In-Depth Information
document.addEventListener('mousedown',
onDocumentMouseDown, false);
This will tell the browser to fire the
onDocumentMouseDown
button whenev-
er a
mousedown
event is detected.
2. Next, we define the
onMouseDown
function as follows:
function onDocumentMouseDown(event) { ...
}
This function will be called when you push the left mouse button. In the up-
coming steps, we'll show you what to put into this function to detect which
object is selected.
3. The first thing we need to do is convert the
x
and
y
coordinates of the mouse
click to a position that
THREE.PerspectiveCamera
can understand:
var projector = new THREE.Projector();
var vector = new THREE.Vector3(
(event.clientX / window.innerWidth) *
2 - 1,
-(event.clientY / window.innerHeight)
* 2 + 1,
0.5);
projector.unprojectVector(vector,
camera);
At this point, vector will contain the
x
and
y
coordinates in coordinates the
camera and Three.js understands.
4. Now we can use another Three.js object, which is
THREE.Raycaster
, to
determine which objects in our scene might be located at the position we
clicked on:
var raycaster = new
THREE.Raycaster(camera.position,vector.sub(camera.position).normalize());
