Estoy usando React Three Fiber y drei . Me pregunto cómo limitar la distancia máxima de desplazamiento con MapControls . Hay algunas soluciones en línea sobre cómo archivarlo con three.js simples, pero nada con MapControls u OrbitControls de drei y r3f .
Intenté esto, pero una vez que llegué al límite, la cámara falla extrañamente.
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 /> ) }Gracias por tu ayuda
Alejandro
Aquí está mi solución con el uso de la propiedad onChange de MapControls .
Componente de controles:
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 Importa ese componente y úsalo en tu Canvas :
<Canvas> <Controls /> </Canvas>Según esta respuesta, una solución sería crear un componente personalizado 'Controls' con este aspecto.
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} /> ) } Que luego se puede usar como elemento secundario del componente Canvas .
<Canvas> <Controls /> </Canvas>