Set outer bounds on MapControls? (Restrict further panning)

[janrembold]

Hi,

hope someone can lead me into the right directions for this, I'm pretty new to three.
For now I have 2 challenges to tackle:

1. As the base scene of my project I need a view where I can pan the camera around and also zoom into, pretty much what MapControls from "drei" does. But this view is restricted to only 2000x2000px in size and I want the panning to stop when the camera hits the outer bounds.

2. The background is a simple plain image and should exactly fill the viewport

Please see the frustum image from the docs: https://threejs.org/manual/resources/frustum-3d.svg
=> "near" would be the 2000x2000px game area, "far" would be the slightly bigger background image

So if I open the browser with 2000x2000px and with zoom="1" I wouldn't be able to move/pan the camera in any direction. Also the background would be fully visible. After zooming into the scene I can start moving/panning the camera around (until it hits the bounds).

To start I tried something like this, but the event listener never fires.

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

  useEffect(() => {
    controlsRef.current.addEventListener('change', function () {
      console.log('controls ref', this, camera)
    })
  }, [])

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

The second challenge might be pretty simple as the background size could be calculated out of the fov and the fixed "near" size.

I really appreciate any help or hint. Thanks in advance!
Best, Jan

[mwmwmw]

You can bind the change event like this:

<MapControls onChange={myFunction} /* etc */ />

There are also "onStart" and "onEnd" events.

If you don't need that background to pan/zoom, you could set it as a background image outside of the canvas using CSS.

[mwmwmw]

For the event. event.target is actually the MapControls instance. I don't know why it shows up null in the console. It's probably a code sandbox performance optimization.

I updated the example so that it logs out the current camera position pulled from MapControls instead.

[janrembold]

Just fyi.... it seems I copied my snippets into an old project that had some messed up npm dependencies and old (v7) versions of fiber and drei. Now with an uptodate setup everything works as expected. Thanks for your patience!

[janrembold]

@mwmwmw don't know if its ok to stick in this post, but the question remains the same... I still want to stop panning at the outer bounds.

I changed your sandbox a bit so it should stop panning when camera.position.x > 5. But instead of stopping the pan it starts rotating (!!!) even though enableRotate={false}.

https://codesandbox.io/s/mapcontrols-events-forked-48snbs?file=/src/index.js <= just drag the boxes to the left (console also shows camera position x)

Thanks in advance and happy easter!

[janrembold]

To answer my last question, I forgot to adjust the controls as well. The controls were still moving while the camera position was fixed. Also fixing the controls with controlsRef.current.target.x = 5 fixes the problem.

[mwmwmw]

The rotation at the boundary is weird. I bet there is a lookAt in the panning code to keep the controls aligned with the camera.

That is just a guess.

I'm glad you worked it out!