unable to trigger onPointerOver correctly

[ida-fe]

demo as follow：
https://codesandbox.io/s/nifty-babbage-b10jow?file=/src/App.js

event onPointerOver trigger in error when i try to move mouse on point maked as 2，actually selected point maked as 0, is there any error in my code？

[mwmwmw]

The issue is that setHover can be set by multiple points at the same time, but can only store one value to show which one is being hovered.

To fix this you need to track all the hover states for each of the points.

In this example, I turned your points into a HoverPoint component so that each point can track its hover state separately.

https://codesandbox.io/s/funny-sunset-3pftwq?file=/src/App.js

[ida-fe]

sorry，the sandbox not found, please help to recover or show codes

[mwmwmw]

Sorry it was set to private, it's available now.

[ida-fe]

actully, I dont understand why point 2 is selected when I move mouse on point 0. the result I expect is only select one point which mouse hover

[mwmwmw]

It's the size of the hover threshold for the point.

The threshold is set to the default, which would look something like this

You have to set the threshold for points hover on the raycaster. I updated the example with this.

const { raycaster } = useThree();

  useEffect(() => {
    raycaster.params.Points.threshold = 0.1;
  }, [threshold]);

[ida-fe]

this is exactly what I want, thanks a lot!