From d0f2016d7fa6ee070ad38c25b377c277770574a1 Mon Sep 17 00:00:00 2001
From: rodrigo <hamuyrodrigo@gmail.com>
Date: Wed, 12 Jul 2023 13:24:11 +0100
Subject: [PATCH] improve IFC story

---
 src/stories/ifc/load-ifc-model.stories.tsx | 78 +++++++++++++++++-----
 src/stories/maplibre/story-maplibre.tsx    | 34 +++++++++-
 2 files changed, 93 insertions(+), 19 deletions(-)

diff --git a/src/stories/ifc/load-ifc-model.stories.tsx b/src/stories/ifc/load-ifc-model.stories.tsx
index efa4ea1..2f85ed2 100644
--- a/src/stories/ifc/load-ifc-model.stories.tsx
+++ b/src/stories/ifc/load-ifc-model.stories.tsx
@@ -1,5 +1,5 @@
 import { Plane } from "@react-three/drei";
-import { button, useControls } from "leva";
+import { button, folder, useControls } from "leva";
 import { Suspense, useState } from "react";
 import { suspend } from 'suspend-react';
 import { MathUtils } from "three";
@@ -21,23 +21,70 @@ export function Default() {
     }
   })
 
-  useControls({ 'load IFC file': button(() => loadIfcClick()) })
+  useControls({
+    'load IFC file': button(() => loadIfcClick())
+  })
+
+  const { latitude, longitude, position } = useControls({
+    coords: folder({
+      latitude: {
+        value: 51.508775,
+        pad: 6,
+      },
+      longitude: {
+        value: -0.1261,
+        pad: 6,
+      },
+    }),
+    position: {
+      value: {x: 0, y: .32, z: 0},
+      step: 1,
+      pad: 2,
+    },
+  })
 
-  return <StoryMap latitude={51.508775} longitude={-0.1261} zoom={20} pitch={75} bearing={-45}>
-    <hemisphereLight
-      args={["#ffffff", "#60666C"]}
-      position={[1, 4.5, 3]}
-    />
-    <Suspense fallback={<Plane
-      args={[7, 16]}
+  return <StoryMap latitude={latitude} longitude={longitude} zoom={20} pitch={75} bearing={-45} canvas={{shadows: true}}>
+    <Lights />
+    <Plane
+      args={[200, 200]}
+      position={[0, 0, 0]}
       rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
-      material-color="#cccccc"
-    />}>
-      <IfcModel path={path} />
-    </Suspense>
+      receiveShadow
+    >      
+      <shadowMaterial opacity={.5} />
+    </Plane>
+    <object3D position={[position.x, position.y, position.z]}>
+      <Suspense fallback={<Plane
+        args={[7, 16]}
+        rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
+        material-color="#cccccc"
+      />}>
+        <IfcModel path={path} />
+      </Suspense>
+    </object3D>
   </StoryMap>
 }
 
+function Lights() {
+  const camSize = 50;
+  return <>
+    <ambientLight intensity={0.5} />
+    <directionalLight
+      castShadow
+      position={[2.5, 50, 5]}
+      intensity={1.5}
+      shadow-mapSize={1024}
+    >
+      <orthographicCamera
+        attach="shadow-camera"
+        args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
+      />
+    </directionalLight>
+    <pointLight position={[-10, 0, -20]} color="white" intensity={1} />
+    <pointLight position={[0, -10, 0]} intensity={1} />
+  </>
+}
+
 interface IfcModelProps {
   path: string
 }
@@ -58,10 +105,9 @@ function loadIFC(path: string) {
   return new Promise<IFCModel>((resolve, reject) => {
     const loader = new IFCLoader();
     loader.load(path, e => {
+      e.castShadow = true;
       resolve(e)
-    }, undefined, e => {
-      reject(e)
-    });
+    }, undefined, reject);
   })
 }
 
diff --git a/src/stories/maplibre/story-maplibre.tsx b/src/stories/maplibre/story-maplibre.tsx
index 099ccb2..de064ce 100644
--- a/src/stories/maplibre/story-maplibre.tsx
+++ b/src/stories/maplibre/story-maplibre.tsx
@@ -1,8 +1,8 @@
 import { ThemeState, useLadleContext } from '@ladle/react';
 import MapLibre from "maplibre-gl";
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { FC } from "react";
-import Map from 'react-map-gl/maplibre';
+import { FC, memo, useEffect, useRef } from "react";
+import Map, { useMap } from 'react-map-gl/maplibre';
 import { StoryMapProps } from '../story-map';
 import { Canvas } from 'react-three-map/maplibre';
 
@@ -25,9 +25,37 @@ export const StoryMaplibre: FC<StoryMapProps> = ({
       maxPitch={rest.pitch ? Math.min(rest.pitch, 85) : undefined}
       mapStyle={mapStyle}
     >
+      <FlyTo latitude={latitude} longitude={longitude} />
       <Canvas latitude={latitude} longitude={longitude} {...canvas}>
         {children}
       </Canvas>
       </Map>
   </div>
-}
\ No newline at end of file
+}
+
+interface FlyToProps {
+  latitude: number,
+  longitude: number,
+}
+
+const FlyTo = memo<FlyToProps>(({latitude, longitude})=>{
+  
+  const map = useMap();
+  const firstRun = useRef(true);
+
+  useEffect(()=>{
+    if(!map.current) return;
+    if(firstRun.current) return;
+    map.current.flyTo({
+      center: [longitude, latitude],
+      maxDuration: .3,
+    })
+  }, [map, latitude, longitude])
+
+  useEffect(()=>{
+    firstRun.current = false;
+  }, [])
+
+  return <></>
+})
+FlyTo.displayName = 'FlyTo';
\ No newline at end of file