I have been working on developing a simulation that shows the positions of 4673 of the nearest galaxies.
In this simulation, each galaxy is represented as a point.
My goal is to change the color of a point when the mouse hovers over it and display the name of the galaxy.
Despite spending a lot of time on this project, I have faced difficulties in individually changing the color or raycasting each point separately. Currently, all points are raycasted and colored as a group, as can be seen in the current version.
I am seeking advice on how to correct this issue. Thank you for taking the time to help a beginner like me.
You can find the complete code here.
Below is the relevant code snippet:
window.addEventListener( "mousemove", onDocumentMouseMove, false );
var selectedObject = null;
function onDocumentMouseMove( event ) {
event.preventDefault();
if ( selectedObject ) {
selectedObject.material.color.set( '#fff' );
selectedObject = null;
}
var intersects = getIntersects( event.layerX, event.layerY );
if ( intersects.length > 0 ) {
var res = intersects.filter( function ( res ) {
return res && res.object;
} )[ 0 ];
if ( res && res.object ) {
selectedObject = res.object;
selectedObject.material.color.set( '#69f' );
}
}
}
var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector3();
function getIntersects( x, y ) {
x = ( x / window.innerWidth ) * 2 - 1;
y = - ( y / window.innerHeight ) * 2 + 1;
mouseVector.set( x, y, 0.5 );
raycaster.setFromCamera( mouseVector, camera );
return raycaster.intersectObject( dots, true );
}