In my current setup, I have a collection of particles that form a THREE.Geometry object with 50 individual particles stored in the particles.vertices array. This geometry is then used to create a THREE.ParticleSystem for rendering. When a mousedown event occurs on the document, the following function is triggered:
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObjects(particles);
console.log(intersects); // outputs empty array?
}
Despite implementing this functionality, the 'intersects' array consistently returns empty upon execution. Is there something crucial that I'm overlooking? How can I accurately determine which particle has been clicked during a mousedown event? Please bear in mind that this project is being developed using WebGL.