Need help with onpointerover distance, react-three-fiber

Questions
1

Hi, im trying to interact with an object when the distance is < 4. I can see that the onpointerover option on a mesh has distance but when its hovered that distance doesnt update so when the sphere is close enough to interact with the object nothing is triggered.

Is there a smart way around this?

Thanks ahead of time

2

onpointerover is a single event, it fires once you’re over. the data that includes the distance is from the raycaster. i don’t know what a good solution would be, maybe try onpointermove instead which fires continuously. you can also hijack the meshes raycast function and add your own logic, maybe with a re-usable hook that you can use throughout the project.

function isNear(obj, camera, distance) {
  // your calculation here
}

function useDistanceRaycast(distance) {
  const ref = useRef()
  const camera = useThree(state => state.camera)
  return {
    raycast(...args)  => {
      if (isNear(ref.current, camera, distance)) {
        ref.current.prototype.raycast.bind(ref.current)(...args)
      }
    }
  }
}

<mesh {...useDistanceRaycast(10)} />