tweaks to 3D buildings story (#93)

* tweaks to 3D buildings story

* update packages

Author: RodrigoHamuy

example-mapbox/package.json

@@ -7,15 +7,15 @@
     "ts": "tsc -w"
   },
   "dependencies": {
-    "@ladle/react": "^2.15.0",
+    "@ladle/react": "^4.0.2",
     "@react-three/drei": "^9.77.10",
     "@react-three/fiber": "^8.13.4",
     "leva": "^0.9.35",
     "mapbox-gl": "^2.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.0",
-    "react-three-map": "^0.2.1",
+    "react-three-map": "^0.8.1",
     "three": "~0.153.0",
     "three-stdlib": "^2.23.10"
   },

example-mapbox/yarn.lock

@@ -7,15 +7,15 @@
     "ts": "tsc -w"
   },
   "dependencies": {
-    "@ladle/react": "^2.15.0",
+    "@ladle/react": "^4.0.2",
     "@react-three/drei": "^9.77.10",
     "@react-three/fiber": "^8.13.4",
     "leva": "^0.9.35",
     "maplibre-gl": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.0",
-    "react-three-map": "^0.2.1",
+    "react-three-map": "^0.8.1",
     "three": "~0.153.0",
     "three-stdlib": "^2.23.10"
   },

example-maplibre/package.json

@@ -20,7 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
-    "react-three-map": "^0.6.1",
+    "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",
     "three-stdlib": "^2.28.7",

example-maplibre/yarn.lock

@@ -8,6 +8,7 @@ export const AdaptiveDpr = memo(() => {
   const setDpr = useThree(s => s.setDpr);
   const map = useMap();
   useEffect(() => {
+    if(!map) return;
     const decreaseDpr = () => _setDpr(0.5)
     const increaseDpr = () => _setDpr(initialDpr);
 

stories/package.json

@@ -35,7 +35,7 @@ export const BatchedBuildings = memo<BatchedBuildingsProps>(({ buildingsCenter,
 
   const [hovered, hover] = useState<number>()
 
-  const { data, vertexCount, indexCount } = useMemo(() => {
+  const { data, vertexCount, indexCount, key } = useMemo(() => {
     // lights
     const c00 = _color.set('#f0c505').getHSL({ h: 0, s: 0, l: 0 });
     const c01 = _color.set('#f38630').getHSL({ h: 0, s: 0, l: 0 });
@@ -69,7 +69,8 @@ export const BatchedBuildings = memo<BatchedBuildingsProps>(({ buildingsCenter,
     });
     const vertexCount = data.reduce((acc, d) => acc + d.vertexCount, 0);
     const indexCount = data.reduce((acc, d) => acc + d.indexCount, 0);
-    return { data, vertexCount, indexCount };
+    const key = MathUtils.generateUUID();
+    return { data, vertexCount, indexCount, key };
   }, [origin, buildings])
 
   const meshRef = useRef<BatchedMesh>(null);
@@ -92,9 +93,7 @@ export const BatchedBuildings = memo<BatchedBuildingsProps>(({ buildingsCenter,
 
       material.setValue(item.i, 'roughness', roughness);
       material.setValue(item.i, 'metalness', metalness);
-
     }
-
   })
 
   useLayoutEffect(() => {
@@ -106,6 +105,7 @@ export const BatchedBuildings = memo<BatchedBuildingsProps>(({ buildingsCenter,
   }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return <batchedMesh
+    key={key}
     ref={meshRef}
     args={[data.length, vertexCount, indexCount]}
     rotation={[-90 * MathUtils.DEG2RAD, 0, -90 * MathUtils.DEG2RAD]}

stories/src/adaptive-dpr.tsx

@@ -43,7 +43,7 @@ export const StoryMap: FC<StoryMapProps> = (props) => {
     {mapProvider === MapProvider.mapbox && <StoryMapbox {...props} canvas={canvas} />}
     {mapProvider === MapProvider.nomap && <Canvas
       {...props.canvas}
-      camera={{ position: [0, 500, 0] }}
+      camera={{ position: [0, 500, 0], far: 5000 }}
     >
       <MapControls makeDefault />
       {props.children}

stories/src/free-3d-buildings/batched-buildings.tsx

@@ -4199,10 +4199,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.6.1.tgz#566811527242bb8964586c405a5816a84f75cb40"
-  integrity sha512-DSL7fyeR+MqiB1f6fG8FHwMb0NoDhj6Yjyc5T9jU6Yo/dpxQdY9Mfjs++J0j8HofcEDTsgiQz2GXh2r4iSPmhA==
+react-three-map@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.8.1.tgz#0312e9a2cb1a19f67127ad11526f1e4e1f091852"
+  integrity sha512-QkOJzaUPs7ZjtsP9sA8Xdy/FGhh0Q+eR89yUJPM6zlNEdzr1pe1F+prQlgd3jmffzE3Drfg90DMzqh3yJZcLJQ==
 
 react-use-measure@^2.1.1:
   version "2.1.1"