fix: terrain isn't loaded (#669)

reearth · Aug 9, 2024 · 57ab5ac · 57ab5ac
1 parent 6e49b16
commit 57ab5ac
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/Globe/Globe.stories.tsx b/src/Globe/Globe.stories.tsx
@@ -1,10 +1,11 @@
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
-import { CesiumTerrainProvider, IonResource } from "cesium";
+import { CesiumTerrainProvider, EllipsoidTerrainProvider, IonResource } from "cesium";
 
 import Viewer from "../Viewer";
 
 import Globe from "./Globe";
+import { StrictMode } from "react";
 
 type Story = StoryObj<typeof Globe>;
 
@@ -18,26 +19,29 @@ export const Basic: Story = {
     <Viewer full>
       <Globe
         {...args}
+        terrainProvider={new EllipsoidTerrainProvider()}
         onImageryLayersUpdate={action("onImageryLayersUpdate")}
         onTerrainProviderChange={action("onTerrainProviderChange")}
       />
     </Viewer>
   ),
 };
 
-export const Prmise: Story = {
+export const Promise: Story = {
   args: { enableLighting: true },
   render: args => (
-    <Viewer full>
-      <Globe
-        {...args}
-        terrainProvider={CesiumTerrainProvider.fromUrl(IonResource.fromAssetId(1), {
-          requestVertexNormals: true,
-          requestWaterMask: false,
-        })}
-        onImageryLayersUpdate={action("onImageryLayersUpdate")}
-        onTerrainProviderChange={action("onTerrainProviderChange")}
-      />
-    </Viewer>
+    <StrictMode>
+      <Viewer full>
+        <Globe
+          {...args}
+          terrainProvider={CesiumTerrainProvider.fromUrl(IonResource.fromAssetId(1), {
+            requestVertexNormals: true,
+            requestWaterMask: false,
+          })}
+          onImageryLayersUpdate={action("onImageryLayersUpdate")}
+          onTerrainProviderChange={action("onTerrainProviderChange")}
+        />
+      </Viewer>
+    </StrictMode>
   ),
 };
diff --git a/src/core/hooks.ts b/src/core/hooks.ts
@@ -78,7 +78,6 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
   const initialProps = useRef<Props>(propsWithChildren(props));
   const prevProps = useRef<Props>({} as Props);
   const [mounted, setMounted] = useState(false);
-  const mountedRef = useRef(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const stateRef = useRef<State>();
   const eventManager = ctx?.[eventManagerContextKey];
@@ -135,7 +134,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
         em.setEvents(useRootEvent ? null : element.current, props);
       }
 
-      if (update && mountedRef.current) {
+      if (update) {
         const maybePromise = update(element.current, props, prevProps.current, ctx);
         if (isPromise(maybePromise)) {
           await maybePromise;
@@ -146,7 +145,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
       initialProps.current = props;
 
       // Recreate cesium element when any read-only prop is updated
-      if (mountedRef.current && updatedReadonlyProps.length > 0) {
+      if (updatedReadonlyProps.length > 0) {
         if (process.env.NODE_ENV !== "production") {
           console.warn(
             `Warning: <${name}> is recreated because following read-only props have been updated: ${updatedReadonlyProps.join(
@@ -255,8 +254,6 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
     provided.current = undefined;
     stateRef.current = undefined;
     element.current = undefined;
-
-    mountedRef.current = false;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // To prevent re-execution by hot loader, execute only once
@@ -293,7 +290,6 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
         // first time
         prevProps.current = propsWC;
         initialProps.current = propsWC;
-        mountedRef.current = true;
       }
     };
     update();