r3f / threejs - shoot raycast on Splat objects

[MiguelG97]

we wish to place annotations on .Splat surfaces and we are struggling with shooting the raycast to those objects. Here is what we tried to do:

const { camera, gl, scene } = useThree();

  <Canvas>
  <Splat
    src={URL}
    onClick={(e) => {
      console.log(
        "clicking here",
        e,
        e.point
      );
      const newMesh = new THREE.Mesh(
        new THREE.SphereGeometry(0.05),
        new THREE.MeshBasicMaterial({
          color: new THREE.Color("red"),
        })
      );
      newMesh.position.set(
        e.point.x,
        e.point.y,
        e.point.z
      );
      scene.add(newMesh);
    }}
  />
  </Canvas>

Indeed the raycast intersect with some elements floating in the air since the Splat appears to function as a pointcloud and some particles are found in the air. Furthermore, the onClick handler never gets triggered when we shoot the raycaster from certain camera orientations.
Do you have anything in mind to get intersections in the splat surfaces work?

Examples of intersection not being stuck in the splat surfaces but floating in the air instead

I link the stack overflow thread for extra references:
https://stackoverflow.com/questions/78342384/r3f-threejs-shoot-raycast-on-splat-objects