@reearth/core 0.0.7-alpha.75 → 0.0.7-alpha.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.75",
+  "version": "0.0.7-alpha.76",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/engines/Cesium/hooks/useViewerProperty.ts

@@ -1,5 +1,5 @@
 import { Cartesian3, Color, DirectionalLight, SceneMode, SunLight, Viewer } from "cesium";
-import { RefObject, useMemo } from "react";
+import { RefObject, useEffect, useMemo } from "react";
 import { CesiumComponentRef } from "resium";
 
 import { ViewerProperty } from "../..";
@@ -61,6 +61,20 @@ export default ({
     [property?.scene?.backgroundColor],
   );
 
+  const showSkyBox = property?.sky?.skyBox?.show ?? true;
+
+  useEffect(() => {
+    const scene = cesium.current?.cesiumElement?.scene;
+    if (!scene) return;
+    // set backgroundColor
+    scene.backgroundColor = sceneBackgroundColor ?? Color.BLACK;
+    // Cesium 1.139 bug: SkyBox.show does not forward to _panorama.show,
+    // so we must set it directly.
+    const panorama = (scene.skyBox as any)?._panorama;
+    if (panorama) panorama.show = showSkyBox;
+    scene.requestRender();
+  }, [cesium, sceneBackgroundColor, showSkyBox]);
+
   const sceneMsaaSamples = useMemo(() => {
     // TODO: FXAA doesn't support alpha blending in Cesium, so we will enable FXAA when this is fixed.
     // viewer.scene.postProcessStages.fxaa.enabled = property?.render?.antialias === "high";
@@ -86,5 +100,6 @@ export default ({
     sceneBackgroundColor,
     sceneMsaaSamples,
     sceneMode,
+    showSkyBox,
   };
 };

package/src/engines/Cesium/hooks.ts

@@ -732,10 +732,11 @@ export default ({
     });
   }, [time, timelineManagerRef]);
 
-  const { sceneLight, sceneBackgroundColor, sceneMsaaSamples, sceneMode } = useViewerProperty({
-    property,
-    cesium,
-  });
+  const { sceneLight, sceneBackgroundColor, sceneMsaaSamples, sceneMode, showSkyBox } =
+    useViewerProperty({
+      property,
+      cesium,
+    });
 
   useLayerDragDrop({ cesium, onLayerDrag, onLayerDrop, isLayerDraggable });
 
@@ -792,6 +793,7 @@ export default ({
     sceneBackgroundColor,
     sceneMsaaSamples,
     sceneMode,
+    showSkyBox,
     cameraViewBoundaries,
     cameraViewOuterBoundaries,
     cameraViewBoundariesMaterial,

package/src/engines/Cesium/index.tsx

@@ -80,6 +80,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     sceneBackgroundColor,
     sceneMsaaSamples,
     sceneMode,
+    showSkyBox,
     cameraViewBoundaries,
     cameraViewOuterBoundaries,
     cameraViewBoundariesMaterial,
@@ -261,7 +262,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         verticalExaggerationRelativeHeight={property?.scene?.verticalExaggerationRelativeHeight}
         verticalExaggeration={verticalExaggeration}
       />
-      <SkyBox show={property?.sky?.skyBox?.show ?? true} />
+      <SkyBox show={showSkyBox} />
       <Fog enabled={property?.sky?.fog?.enabled ?? true} density={property?.sky?.fog?.density} />
       <Sun show={property?.sky?.sun?.show ?? true} />
       <Moon show={property?.sky?.moon?.show ?? true} />