Camera controls

[rokez98]

Hi, I have a question regarding camera controls.

Is there a way to access the camera controls to be able to zoom to the objects of my 3d scene? For now 'controls' property is always null when I try to access it via useThree hook

Thanks!

[RodrigoHamuy]

@rokez98 the camera is controlled by MapLibre/Mapbox. So this is out of the scope of react-three-map and more to do with react-map-gl.

Never the less, here is one way to achieve this. If you know your objects coordinates (lat long) and desired zoom level, you can use the map provider easeTo function.

Here is a declarative way to do it for example:

const EaseTo = ({latitude, longitude, zoom})=>{
  
  const map = useMap();

  useEffect(()=>{
    if(!map.current) return;
    map.current.easeTo({
      center: {lon: longitude, lat: latitude},
      zoom,
      duration: 0.3,
    })
  }, [map, latitude, longitude])

  return <></>
})
// use as <EaseTo latitude={number} longitude={number} zoom={number} />