I am currently working on creating a network visualization using Three.js, and I have encountered an issue with my ray casting implementation. It seems that the points being identified by the ray caster are not the correct ones (Here's the full example and source code).
In particular, I am using ray casting with a Points cloud and aiming to change the color of a point to white when users hover over it. Currently, while hovering does change the color of points, the event seems to be triggered on points near the cursor rather than directly below it.
This is how I'm setting up the raycaster:
// configure the raycaster
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 20;
Below is the render function:
function render() {
renderer.render(scene, camera);
controls.update();
raycast();
}
// Color hovered points
function raycast() {
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(particles);
if (intersects.length) {
var newColor = new THREE.Color();
newColor.setRGB(1, 1, 1);
var index = intersects[0].index;
particles.geometry.colors[index] = newColor;
particles.geometry.colorsNeedUpdate = true;
}
}
Lastly, here's the callback for the mousemove event triggered on the body:
/**
* Mouse coordinates go from 0 to container width {0:1}
* and 0 to container height {0:1}. Multiply by 2
* and subtract 1 to center the mouse coords {-1:1}.
* Furthermore, negate the y axis coords, as in the DOM
* the origin is in the top left corner, while in WebGL
* the origin is in the bottom left corner.
**/
function onDocumentMousemove(e) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
If you have any insights into why this code might not correctly highlight points when mousing around, please share your thoughts. Any help would be greatly appreciated!