I am currently working on creating a 2D scatterplot with tooltips, but I am facing an issue with the raycaster not detecting when a point is being hovered over. The tooltip seems to activate only when touching an object, which is correct behavior, but it displays random data from points that are not even close on the x/y plane. Additionally, the information displayed changes even when there are no other points close to the one being hovered over. Can someone assist me in debugging this behavior? Below is some relevant code snippet (for the full code, please refer to the link provided):
...loading data points (stored in data_points array), setting up scene, etc.
raycaster = new THREE.Raycaster();
raycaster.params.Mesh.threshold = 20;
view.on("mousemove", () => {
let [mouseX, mouseY] = d3.mouse(view.node());
let mouse_position = [mouseX, mouseY];
checkIntersects(mouse_position);
});
function mouseToThree(mouseX, mouseY) {
return new THREE.Vector3(
mouseX / viz_width * 2 - 1,
-(mouseY / height) * 2 + 1,
1
);
}
function checkIntersects(mouse_position) {
let mouse_vector = mouseToThree(...mouse_position);
raycaster.setFromCamera(mouse_vector, camera);
let intersects = raycaster.intersectObjects(scene.children, true);
if (intersects[0]) {
let sorted_intersects = sortIntersectsByDistanceToRay(intersects);
let intersect = sorted_intersects[0];
let index = intersect.faceIndex;
let datum = data_points[index];
showTooltip(mouse_position, datum);
} else {
hideTooltip();
}
}
function sortIntersectsByDistanceToRay(intersects) {
return _.sortBy(intersects, "distanceToRay");
}
...functions for tooltips, details
I would greatly appreciate any assistance in resolving this issue. Thank you!