fix: 3dtiles style lost when using style url and click on features (#99)

Author: airslice

example/testLayers/index.ts

@@ -8,6 +8,7 @@ import { LAND_USE, LSLD_SAPPORO, LSLD_NIJIMA } from "./mvt";
 import { OSM_BUILDINGS } from "./osm_buildings";
 import { THREEDTILES_KUMAGAYA_LOD2 } from "./threedtiles_lod2";
 import { THREEDTILES_SIMPLE } from "./threedtiles_simple";
+import { THREEDTILES_SIMPLE_WITH_STYLE_URL } from "./threedtiles_simple_with_style_url";
 
 export const TEST_LAYERS: Layer[] = [
   LAND_USE,
@@ -18,6 +19,7 @@ export const TEST_LAYERS: Layer[] = [
   GOOGLE_PHOTOREALISTIC_3DTILES,
   OSM_BUILDINGS,
   THREEDTILES_SIMPLE,
+  THREEDTILES_SIMPLE_WITH_STYLE_URL,
   THREEDTILES_KUMAGAYA_LOD2,
   CZML_SIMPLE,
 ];

example/testLayers/threedtiles_simple_with_style_url.ts

@@ -0,0 +1,14 @@
+import { Layer } from "@reearth/core";
+
+export const THREEDTILES_SIMPLE_WITH_STYLE_URL: Layer = {
+  id: "3dtiles_simple_with_style_url",
+  type: "simple",
+  data: {
+    type: "3dtiles",
+    url: "https://assets.cms.plateau.reearth.io/assets/4f/702958-5009-4d6b-a2e0-157c7e573eb2/13100_tokyo23-ku_2022_3dtiles _1_1_op_bldg_13101_chiyoda-ku_lod2_no_texture/tileset.json",
+  },
+  "3dtiles": {
+    styleUrl:
+      "https://assets.cms.reearth.io/assets/07/5374e9-5b67-49e8-9791-dfc4af86b824/simple_3dtiles_style.json",
+  },
+};

src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -187,6 +187,7 @@ const useFeature = ({
   onComputedFeatureFetch,
   shouldUseFeatureIndex,
   isTilesetReady,
+  useExternalStyle,
 }: {
   id?: string;
   tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
@@ -199,6 +200,7 @@ const useFeature = ({
   selectedFeatureIdsRef: MutableRefObject<string[]>;
   shouldUseFeatureIndex?: boolean;
   isTilesetReady: boolean;
+  useExternalStyle?: boolean;
 }) => {
   const cachedFeaturesRef = useRef<CachedFeature[]>([]);
   const cachedCalculatedLayerRef = useRef(layer);
@@ -220,49 +222,51 @@ const useFeature = ({
 
         const computedFeature = evalFeature(layer, { ...feature?.feature, properties });
 
-        const style = computedFeature?.["3dtiles"];
+        if (!useExternalStyle) {
+          const style = computedFeature?.["3dtiles"];
 
-        COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-          const val = convertStyle(style?.[name], convert);
-
-          if (name === "color") {
-            // Reset color to default so that new style could update all.
-            raw.color = DEFAULT_FEATURE_COLOR;
+          COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+            const val = convertStyle(style?.[name], convert);
 
-            // Apply color from style.
-            if (val !== undefined) {
-              raw.color = val;
+            if (name === "color") {
+              // Reset color to default so that new style could update all.
+              raw.color = DEFAULT_FEATURE_COLOR;
+
+              // Apply color from style.
+              if (val !== undefined) {
+                raw.color = val;
+              }
+
+              // Apply color for selected feature.
+              if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
+                raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
+              }
+            } else {
+              if (val !== undefined) {
+                raw[name] = val;
+              }
             }
+          });
 
-            // Apply color for selected feature.
-            if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
-              raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
-            }
-          } else {
-            if (val !== undefined) {
-              raw[name] = val;
-            }
+          if (raw instanceof Cesium3DTilePointFeature) {
+            POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+              const val = convertStyle(style?.[name], convert);
+              if (val !== undefined) {
+                raw[name] = val;
+              }
+            });
           }
-        });
-
-        if (raw instanceof Cesium3DTilePointFeature) {
-          POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-            const val = convertStyle(style?.[name], convert);
-            if (val !== undefined) {
-              raw[name] = val;
-            }
-          });
-        }
 
-        if ("style" in raw) {
-          raw.style = new Cesium3DTileStyle(
-            // TODO: Convert value if it's necessary
-            MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
-              const val = convertStyle(style?.[name as keyof typeof style], convert);
-              if (val === undefined) return res;
-              return { ...res, [name]: val };
-            }, {}),
-          );
+          if ("style" in raw) {
+            raw.style = new Cesium3DTileStyle(
+              // TODO: Convert value if it's necessary
+              MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
+                const val = convertStyle(style?.[name as keyof typeof style], convert);
+                if (val === undefined) return res;
+                return { ...res, [name]: val };
+              }, {}),
+            );
+          }
         }
 
         attachTag(feature.raw, {
@@ -276,7 +280,7 @@ const useFeature = ({
       }
       return;
     },
-    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef],
+    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef, useExternalStyle],
   );
 
   const handleTilesetLoad = useCallback(
@@ -615,6 +619,7 @@ export const useHooks = ({
     selectedFeatureIdsRef,
     shouldUseFeatureIndex,
     isTilesetReady,
+    useExternalStyle: !!styleUrl,
   });
 
   const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
@@ -730,11 +735,23 @@ export const useHooks = ({
     }
     (async () => {
       const res = await fetch(styleUrl);
-      if (!res.ok) return;
-      setStyle(new Cesium3DTileStyle(await res.json()));
+      if (!res.ok) {
+        console.warn("Failed to fetch style from:", styleUrl);
+        return;
+      }
+      const styleData = await res.json();
+      const newStyle = new Cesium3DTileStyle(styleData);
+      setStyle(newStyle);
     })();
   }, [styleUrl]);
 
+  // Apply style to tileset when both external style and tileset are ready
+  useEffect(() => {
+    if (style && tilesetRef.current && isTilesetReady) {
+      tilesetRef.current.style = style;
+    }
+  }, [style, isTilesetReady]);
+
   const googleMapPhotorealisticResource = useMemo(() => {
     if (type !== "google-photorealistic" || !isVisible) return null;