Three JS: Intersection with mouse click raycast on point cloud yields no results (empty array)

Question

I am rendering a point cloud and trying to select a single point, but the method raycaster.intersectObjects(scene.children, true) is yielding an empty array. I also found a lot of different ways to calculate the pointer.x and pointer.y. None of them worked.

Here is my CodePen: https://codepen.io/joshua-holly-fraunhofer/pen/VwyGBVO

What is wrong here?

function onMouseUp(event) {
  event.preventDefault();
  const raycaster = new THREE.Raycaster();
  const pointer = new THREE.Vector2();
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(pointer, camera);

  const intersects = raycaster.intersectObjects(scene.children, true);
  console.log(intersects); // Is empty array
}

Answer 1

Your code is working, but the camera is very far from the point cloud (1800 units), which makes the individual Points relatively tiny. With the default raycast threshold (1 unit, see Raycaster.params), the user has to click extremely (and perhaps impossibly) close to a Point in order for an intersection to register. In fact, some napkin math tells me that at 1080p, you have to click within 0.2px of the point, but clicks are only measured to a precision of 1px.

Since your points material uses 60-unit shapes to represent the points, increase the threshold to that size, and you'll start getting the results you expect. After the line that initializes raycaster, add this line:

raycaster.params.Points.threshold = 60;