How to limit panning distance in react three fiber MapControls

Question

I‘m using React Three Fiber and drei. I'm wondering how to limit the maximum panning distance with the MapControls. There are some solutions online on how to archive it with plain three.js but nothing using the MapControls or OrbitControls from drei and r3f.

I tried this but once I reach the limit the camera glitches weirdly.

function Controls() {
  const { camera } = useThree();

  useFrame(() => {
    camera.position.x = THREE.MathUtils.clamp(camera.position.x, -90, 90)
    camera.position.y = THREE.MathUtils.clamp(camera.position.y, -90, 90)
  })
  
  return (
    <MapControls />
  )
}

Thanks for your help

Alexander

Answer 1

Based on this answer a solution would be to create a custom 'Controls' component looking like this.

const Controls = () => {
  const { camera } = useThree()
  const controlsRef = useRef()    

  useEffect(() => {
    controlsRef.current.addEventListener('change', function () {
      if (this.target.y < -10) {
        this.target.y = -10
        camera.position.y = -10
      } else if (this.target.y > 10) {
        this.target.y = 10
        camera.position.y = 10
      }
    })
  }, [])

  return (
    <MapControls ref={controlsRef} enableZoom={false} enableRotate={false} />
  )
}

Which can then be used as a child to the Canvas component.

<Canvas>
  <Controls />
</Canvas>