I've been attempting to detect when the mouse hovers over a particle within my particle system. The detection process that I have implemented is as follows and runs continuously:
function check_intersections() {
var vect = new THREE.Vector3(
mouse.x,
mouse.y,
0.5
);
projectr.unprojectVector( vect, camera );
var raycaster = new THREE.Ray( camera.position, vect.subSelf( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( particleSystem );
if ( intersects.length > 0 ) {
//intersects[ 0 ].object.materials[ 0 ].color.setHex( Math.random() * 0xffffff );
noticeDiv.text('Intersection');
}
}`
The variable particleSystem represents my particle system containing numerous particles, while 'mouse' is defined whenever it moves, like so:
function onDocumentMouseMove( event ) {
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
Despite studying various examples, I haven't been able to get this implementation right.