Learn Three.js - Third Edition

Selecting objects

Even though not directly related to animations, since we'll be looking into cameras and animations in this chapter, it is a nice addition to the subjects explained in this chapter. What we'll show here is how you can select an object from a scene using the mouse. We'll first look at the code required for this before we look at the example:

var projector = new THREE.Projector(); 
function onDocumentMouseDown(event) {    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);    vector = vector.unproject(camera);    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects([sphere, ...