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
Here is my solution with using onChange property of MapControls.
Controls component:
import React, { useRef } from 'react'
import { MapControls } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
const Controls = () => {
const { camera } = useThree()
const cameraLastPosition = useRef({
x: camera.position.x,
y: camera.position.y,
})
return (
<MapControls
onChange={(e) => {
const maxX = 90
const minX = -90
const maxY = 90
const minY = -90
const x = e?.target.target.x
const y = e?.target.target.y
if (x < minX || x > maxX) {
e?.target.target.setX(x < minX ? minX : maxX)
camera.position.setX(cameraLastPosition.current.x)
}
if (y < minY || y > maxY) {
e?.target.target.setY(y < minY ? minY : maxY)
camera.position.setY(cameraLastPosition.current.y)
}
cameraLastPosition.current.x = camera.position.x
cameraLastPosition.current.y = camera.position.y
}}
/>
)
}
export default Controls
Import that component and use it in your Canvas:
<Canvas>
<Controls />
</Canvas>
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>