How to limit the max pan distance?

[AlexanderProd]

Hi,

How can I clamp the maximum panning distance with MapControls?

Even though that seems like an easy question I'm having a hard time successfully implementing it.
There are some examples out there on how to do it with Three.js but I'm not sure how to translate it to r3f.

I already have this Controls Component but I'm not sure how to do the actual clamping of the X and Y panning distance.

const Controls = (props) => {
  const {
    camera,
    gl: { domElement }
  } = useThree()
  const controls = useRef()

  useFrame((state) => {
    return controls.current.update()
  })
  return <MapControls ref={controls} args={[camera, domElement]} enableZoom={false} {...props} />
}

Thanks for your help
Alex

[drcmda]

If you know how it works in threejs then it's the same thing, controls.current in your example is the original THREE.MapControls

One thing that is a little odd, why is the map controls jsx element uppercase? That indicates a component, where does it come from?

[AlexanderProd]

MapControls is imported from drei I thought I could use it instead of extend({ mapControls }).

[drcmda]

yes, but i don't know why you're giving it args and useframe->update then, because that's why the drei abstraction exists, it does that for you. all you need to do is <MapControls {...props} />. you can still put a ref on it if you need the three instance (for limiting pan in your case)

[AlexanderProd]

Thanks, good to know. Do you maybe have an example where a panning limit has been done in r3f though?