Hover functionality with THREE.points and raycaster

Questions
, , , , ,
1

I am trying to implement a hover functionality over points.

This is the code i got from another user. My code has a very similar problem.: Point cloud (forked) - CodeSandbox

As you can see, when hovering, sometimes the point does not get selected correctly. There are multple times when this fails. Is there any surefire way of doing this so that it selectes the points correctly? This problem is especially evident when zooming in.

Also i feel like some of this could be outdated. whats the latest cleanest way to go about implementing this?

2

Not sure if it’s related, but I had a similar problem a while ago. It was related to the geometry’s bounding sphere. Basically you have to update the <Particles /> geometry bounding sphere after each update.

3

this is a threshold problem. i don’t know why this has to be so hard in threejs but essentially you have to give the raycaster a fixed threshold which it will use to approximate points. but once you zoom in that threshold has to be adapted.

that sandbox has this

<Canvas raycaster={{ params: { Points: { threshold: 0.2 } } }}>

but once you zoom in or out it has to be recalculated and i don’t know if there even is a specific formula. but you would do it like so:

useFrame((state) => {
  const magicValue = state.camera.matrix * ??? / ??? % ????
  state.raycaster.params.Points.threshold = magicValue
})

if there exists a formula that works with all cameras this could be in fiber ootb, but i have yet to see one.

3 Likes
4

Hey thanks for the input i will give it a try and let you know!
I guess i am down for some calculations.