How do I add panning and zooming

Questions
1

How do i add panning and limit zooming to the following for the following:

import React, { Suspense, useEffect, useState } from “react”;
import { useBuildingStore } from “@/store/buildingStore”;
import { Canvas} from “@react-three/fiber”;
import * as THREE from ‘three’;
import BuildingSprite from “./buildings/Sprites/BuildingSprite”;
import { useProgressStore } from “@/store/progressStore”;
import FoliageSprite from “./Foilage/FoliageSprite”;
import FoliageBoatSprite from “./Foilage/FoliageBoatSprite”;
import LandbaseSprite from “./Foilage/LandbaseSprite”;
import { OrbitControls, OrthographicCamera} from “@react-three/drei”;
import FoliageCloudSprite from “./Foilage/FoliageCloudSprite”;
import { BuildingDetails } from “@/types/building”;
import BuildingStillSprite from “./buildings/Sprites/BuildingStillSprite”;

interface LandscapeProps {
}

export default function Landscape({ }: LandscapeProps) {

const landbaseSprite = new THREE.TextureLoader().load(‘sprites/Ecolab City_Scape.png’);
const testBuilding = new THREE.TextureLoader().load(‘sprites/buildings/Ecolab_building_HQ.png’);
const waterFountain = new THREE.TextureLoader().load(‘sprites/foliage/Water_Fountain.png’);
const windTurbine = new THREE.TextureLoader().load(‘sprites/foliage/Wind_Turbine.png’);
const boat1 = new THREE.TextureLoader().load(‘sprites/foliage/Boat_1.png’);
const cloud = new THREE.TextureLoader().load(‘sprites/foliage/Cloud.png’);
const {buildings, selectedBuilding} = useBuildingStore();
const {unlockedBuildings} = useProgressStore();

const [cameraPosition, setCameraPosition] = useState([0, 0, 5]);

useEffect(() => {
window.addEventListener(‘keydown’, handleKeyDown);
return () => window.removeEventListener(‘keydown’, handleKeyDown);
}, );

const handleKeyDown = (event:any) => {
console.log(‘You never know’)
const key = event.key;
const speed = 0.5; // Adjust panning speed as needed

if (key === 'ArrowUp') {
  setCameraPosition((prevPos) => [prevPos[0], prevPos[1] + speed, prevPos[2]]);
} else if (key === 'ArrowDown') {
  setCameraPosition((prevPos) => [prevPos[0], prevPos[1] - speed, prevPos[2]]);
} else if (key === 'ArrowLeft') {
  setCameraPosition((prevPos) => [prevPos[0] - speed, prevPos[1], prevPos[2]]);
} else if (key === 'ArrowRight') {
  setCameraPosition((prevPos) => [prevPos[0] + speed, prevPos[1], prevPos[2]]);
}

};

return (






{/* <BuildingSprite key={buildings[0]?.slug.current} texture={testBuilding} buildingUnlocked={unlockedBuildings.includes(buildings[0]?.slug.current)}
isSelectedBuilding={buildings[0]?.slug.current === selectedBuilding} building={buildings[0]} positionX={-5.6} positionY={1.2} scale={4.6}/> */}

      {/* {buildings.map((building:BuildingDetails)=>{
        return <BuildingStillSprite key={building.slug.current} building={building} locked={!unlockedBuildings.includes(building.slug.current)} positionX={+building.xPosition}positionY=  {+building.yPosition} scale={building.scale}/>
      })} */}

      {/* Water Fountains */}
      {/* <FoliageSprite texture={waterFountain} positionX={-3.268} positionY={6.5} scale={0.55}/>
      <FoliageSprite texture={waterFountain} positionX={-1.7} positionY={2.88} scale={0.55}/>
      <FoliageSprite texture={waterFountain} positionX={0.19} positionY={1.88} scale={0.55}/> */}

      {/* Wind Turbines */}
      {/* <FoliageSprite texture={windTurbine} positionX={-1} positionY={-6.4} scale={2}/>
      <FoliageSprite texture={windTurbine} positionX={0.4} positionY={-6.2} scale={2}/>
      <FoliageSprite texture={windTurbine} positionX={-0.2} positionY={-6.892} scale={2}/>
      <FoliageSprite texture={windTurbine} positionX={1.5} positionY={-6.892} scale={2}/>
      <FoliageSprite texture={windTurbine} positionX={0.7} positionY={-7.392} scale={2}/> */}

      {/* Boats */}
      {/* <FoliageBoatSprite texture={boat1} positionX={-4.8} positionY={-2} scale={0.8}/>
      <FoliageBoatSprite texture={boat1} positionX={2} positionY={-0.2} scale={1.2}/> */}

      {/* Clouds */}

      {/* <FoliageCloudSprite texture={cloud} positionX={-2.4} positionY={-7.3} scale={1.5}/>

      <FoliageCloudSprite texture={cloud} positionX={0} positionY={2.5} scale={1.5}/>
      <FoliageCloudSprite texture={cloud} positionX={-0.4} positionY={2.7} scale={1.5}/>

      <FoliageCloudSprite texture={cloud} positionX={-0.4} positionY={-10.3} scale={1.5}/>

      <FoliageCloudSprite texture={cloud} positionX={0} positionY={-4} scale={1.5}/>
      <FoliageCloudSprite texture={cloud} positionX={-0.4} positionY={-4.2} scale={1.5}/>

      <FoliageCloudSprite texture={cloud} positionX={3.4} positionY={7} scale={1.5}/>

      <FoliageCloudSprite texture={cloud} positionX={0} positionY={-10.5} scale={1.5}/>
      <FoliageCloudSprite texture={cloud} positionX={-0.4} positionY={-10.3} scale={1.5}/>


      <FoliageCloudSprite texture={cloud} positionX={-4.4} positionY={3.3} scale={1.5}/> */}
    </group>
    </Suspense>
  </Canvas>

);
}