@reearth/core 0.0.7-alpha.0 → 0.0.7-alpha.10

package/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl

@@ -6,8 +6,7 @@
 // https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Shaders/Model/ImageBasedLightingStageFS.glsl
 // Specular term was removed, as I never apply it on terrain.
 vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
-                                     vec3 lightDirectionEC, vec3 lightColorHdr,
-                                     czm_pbrParameters pbrParameters) {
+                                     vec3 lightDirectionEC, czm_modelMaterial material) {
   vec3 v = -positionEC;
   vec3 n = normalEC;
   vec3 l = normalize(lightDirectionEC);
@@ -24,21 +23,18 @@ vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
   vec3 diffuseIrradiance =
       czm_sphericalHarmonics(cubeDir, u_reearth_sphericalHarmonicCoefficients);
 
-  return pbrParameters.diffuseColor * diffuseIrradiance;
+  return material.diffuse * diffuseIrradiance;
 }
 
 vec4 reearth_computeImageBasedLightingColor(vec4 color) {
   if (u_reearth_globeImageBasedLighting) {
-    czm_pbrParameters pbrParameters;
-    pbrParameters.diffuseColor = color.rgb;
+    czm_modelMaterial material;
+    material.diffuse = color.rgb;
 
     vec3 normalEC = normalize(v_normalEC);
     vec3 lighting =
-        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC,
-                        czm_lightColorHdr, pbrParameters);
-    lighting += reearth_imageBasedLightingStage(
-                    v_positionEC, normalEC, czm_lightDirectionEC,
-                    czm_lightColorHdr, pbrParameters) *
+        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC, material) * czm_lightColorHdr;
+    lighting += reearth_imageBasedLightingStage(v_positionEC, normalEC, czm_lightDirectionEC, material) *
                 u_vertexShadowDarkness;
 
 #ifndef HDR

package/src/engines/Cesium/core/Globe.tsx

@@ -5,16 +5,15 @@ import {
   IonResource,
   TerrainProvider,
 } from "cesium";
-import { pick } from "lodash-es";
 import { useMemo } from "react";
 import { Globe as CesiumGlobe } from "resium";
 
-import type { SceneProperty, TerrainProperty } from "../..";
-import { objKeys } from "../../../utils";
+import type { ViewerProperty, TerrainProperty } from "../..";
+import { AssetsCesiumProperty } from "../../../Map";
 import { toColor } from "../common";
 
 export type Props = {
-  property?: SceneProperty;
+  property?: ViewerProperty;
   cesiumIonAccessToken?: string;
 };
 
@@ -22,93 +21,67 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
   const terrainProperty = useMemo(
     (): TerrainProperty => ({
       ...property?.terrain,
-      ...pick(property?.default, terrainPropertyKeys),
     }),
-    [property?.terrain, property?.default],
+    [property?.terrain],
   );
 
   const terrainProvider = useMemo((): Promise<TerrainProvider> | TerrainProvider | undefined => {
     const opts = {
-      terrain: terrainProperty?.terrain,
-      terrainType: terrainProperty?.terrainType,
-      terrainNormal: terrainProperty?.terrainNormal,
-      terrainCesiumIonAccessToken:
-        terrainProperty?.terrainCesiumIonAccessToken || cesiumIonAccessToken,
-      terrainCesiumIonAsset: terrainProperty?.terrainCesiumIonAsset,
-      terrainCesiumIonUrl: terrainProperty?.terrainCesiumIonUrl,
+      terrain: terrainProperty?.enabled,
+      terrainType: terrainProperty?.type,
+      normal: terrainProperty?.normal,
+      ionAccessToken: property?.assets?.cesium?.terrain?.ionAccessToken || cesiumIonAccessToken,
+      ionAsset: property?.assets?.cesium?.terrain?.ionAsset,
+      ionUrl: property?.assets?.cesium?.terrain?.ionUrl,
     };
     const provider = opts.terrain ? terrainProviders[opts.terrainType || "cesium"] : undefined;
     return (typeof provider === "function" ? provider(opts) : provider) ?? defaultTerrainProvider;
   }, [
-    terrainProperty?.terrain,
-    terrainProperty?.terrainType,
-    terrainProperty?.terrainCesiumIonAccessToken,
-    terrainProperty?.terrainCesiumIonAsset,
-    terrainProperty?.terrainCesiumIonUrl,
-    terrainProperty?.terrainNormal,
+    terrainProperty?.enabled,
+    terrainProperty?.type,
+    terrainProperty?.normal,
+    property?.assets?.cesium?.terrain?.ionAccessToken,
+    property?.assets?.cesium?.terrain?.ionAsset,
+    property?.assets?.cesium?.terrain?.ionUrl,
     cesiumIonAccessToken,
   ]);
 
   const baseColor = useMemo(
-    () => toColor(property?.atmosphere?.globeBaseColor),
-    [property?.atmosphere?.globeBaseColor],
+    () => toColor(property?.globe?.baseColor),
+    [property?.globe?.baseColor],
   );
 
   return (
     <CesiumGlobe
       baseColor={baseColor}
-      enableLighting={
-        !!(property?.atmosphere?.enable_lighting ?? property?.globeLighting?.globeLighting)
-      }
-      showGroundAtmosphere={
-        property?.atmosphere?.ground_atmosphere ??
-        property?.globeAtmosphere?.globeAtmosphere ??
-        true
-      }
-      atmosphereLightIntensity={property?.globeAtmosphere?.globeAtmosphereIntensity}
-      atmosphereSaturationShift={property?.atmosphere?.surturation_shift}
-      atmosphereHueShift={property?.atmosphere?.hue_shift}
-      atmosphereBrightnessShift={property?.atmosphere?.brightness_shift}
+      enableLighting={!!property?.globe?.enableLighting}
+      showGroundAtmosphere={property?.globe?.atmosphere?.enabled ?? true}
+      atmosphereLightIntensity={property?.globe?.atmosphere?.lightIntensity}
+      atmosphereSaturationShift={property?.globe?.atmosphere?.saturationShift}
+      atmosphereHueShift={property?.globe?.atmosphere?.hueShift}
+      atmosphereBrightnessShift={property?.globe?.atmosphere?.brightnessShift}
       terrainProvider={terrainProvider}
-      depthTestAgainstTerrain={!!terrainProperty.depthTestAgainstTerrain}
+      depthTestAgainstTerrain={!!property?.globe?.depthTestAgainstTerrain}
     />
   );
 }
 
-const terrainPropertyKeys = objKeys<TerrainProperty>({
-  terrain: 0,
-  terrainType: 0,
-  terrainExaggeration: 0,
-  terrainExaggerationRelativeHeight: 0,
-  depthTestAgainstTerrain: 0,
-  terrainCesiumIonAsset: 0,
-  terrainCesiumIonAccessToken: 0,
-  terrainCesiumIonUrl: 0,
-  terrainUrl: 0,
-});
-
 const defaultTerrainProvider = new EllipsoidTerrainProvider();
 
 const terrainProviders: {
-  [k in NonNullable<TerrainProperty["terrainType"]>]:
+  [k in NonNullable<TerrainProperty["type"]>]:
     | TerrainProvider
     | ((
-        opts: Pick<
-          TerrainProperty,
-          | "terrainCesiumIonAccessToken"
-          | "terrainCesiumIonAsset"
-          | "terrainCesiumIonUrl"
-          | "terrainNormal"
-        >,
+        opts: Pick<TerrainProperty, "normal"> & AssetsCesiumProperty["terrain"],
       ) => Promise<TerrainProvider> | TerrainProvider | null);
 } = {
-  cesium: ({ terrainCesiumIonAccessToken, terrainNormal }) =>
+  cesium: ({ ionAccessToken, normal }) =>
     CesiumTerrainProvider.fromUrl(
       IonResource.fromAssetId(1, {
-        accessToken: terrainCesiumIonAccessToken,
+        accessToken: ionAccessToken,
       }),
       {
-        requestVertexNormals: terrainNormal,
+        requestVertexNormals: normal,
         requestWaterMask: false,
       },
     ),
@@ -116,20 +89,15 @@ const terrainProviders: {
     ArcGISTiledElevationTerrainProvider.fromUrl(
       "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
     ),
-  cesiumion: ({
-    terrainCesiumIonAccessToken,
-    terrainCesiumIonAsset,
-    terrainCesiumIonUrl,
-    terrainNormal,
-  }) =>
-    terrainCesiumIonAsset
+  cesiumion: ({ ionAccessToken, ionAsset, ionUrl, normal }) =>
+    ionAsset
       ? CesiumTerrainProvider.fromUrl(
-          terrainCesiumIonUrl ||
-            IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
-              accessToken: terrainCesiumIonAccessToken,
+          ionUrl ||
+            IonResource.fromAssetId(parseInt(ionAsset, 10), {
+              accessToken: ionAccessToken,
             }),
           {
-            requestVertexNormals: terrainNormal,
+            requestVertexNormals: normal,
           },
         )
       : null,

package/src/engines/Cesium/core/Imagery.test.ts

@@ -14,7 +14,7 @@ test("useImageryProviders", () => {
         presets,
         cesiumIonAccessToken,
       }),
-    { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
+    { initialProps: { tiles: [{ id: "1", type: "default" }] } },
   );
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
@@ -23,14 +23,14 @@ test("useImageryProviders", () => {
   const prevImageryProvider = result.current.providers["1"][2];
 
   // re-render with same tiles
-  rerender({ tiles: [{ id: "1", tile_type: "default" }] });
+  rerender({ tiles: [{ id: "1", type: "default" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
   expect(provider).toBeCalledTimes(1);
 
   // update a tile URL
-  rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
+  rerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
@@ -42,8 +42,8 @@ test("useImageryProviders", () => {
   // add a tile with URL
   rerender({
     tiles: [
-      { id: "2", tile_type: "default" },
-      { id: "1", tile_type: "default", tile_url: "a" },
+      { id: "2", type: "default" },
+      { id: "1", type: "default", url: "a" },
     ],
   });
 
@@ -58,8 +58,8 @@ test("useImageryProviders", () => {
   // sort tiles
   rerender({
     tiles: [
-      { id: "1", tile_type: "default", tile_url: "a" },
-      { id: "2", tile_type: "default" },
+      { id: "1", type: "default", url: "a" },
+      { id: "2", type: "default" },
     ],
   });
 
@@ -73,7 +73,7 @@ test("useImageryProviders", () => {
 
   // delete a tile
   rerender({
-    tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
+    tiles: [{ id: "1", type: "default", url: "a" }],
     cesiumIonAccessToken: "a",
   });
 
@@ -86,7 +86,7 @@ test("useImageryProviders", () => {
 
   // update a tile type
   rerender({
-    tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
+    tiles: [{ id: "1", type: "foobar", url: "u" }],
     cesiumIonAccessToken: "a",
   });
 

package/src/engines/Cesium/core/Imagery.tsx

@@ -20,11 +20,11 @@ export type ImageryLayerData = {
 
 export type Tile = {
   id: string;
-  tile_url?: string;
-  tile_type?: string;
-  tile_opacity?: number;
-  tile_zoomLevel?: number[];
-  tile_zoomLevelForURL?: number[];
+  url?: string;
+  type?: string;
+  opacity?: number;
+  zoomLevel?: number[];
+  zoomLevelForURL?: number[];
   heatmap?: boolean;
 };
 
@@ -55,13 +55,13 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
           id,
           provider: providers[id]?.[2],
         }))
-        .map(({ id, tile_opacity: opacity, tile_zoomLevel, provider, heatmap }, i) =>
+        .map(({ id, opacity, zoomLevel, provider, heatmap }, i) =>
           provider ? (
             <ImageryLayer
               key={`${id}_${i}_${counter}`}
               imageryProvider={provider}
-              minimumTerrainLevel={tile_zoomLevel?.[0]}
-              maximumTerrainLevel={tile_zoomLevel?.[1]}
+              minimumTerrainLevel={zoomLevel?.[0]}
+              maximumTerrainLevel={zoomLevel?.[1]}
               alpha={opacity}
               index={i}
               colorToAlpha={heatmap ? Color.WHITE : undefined}
@@ -89,17 +89,17 @@ export function useImageryProviders({
       url?: string;
       cesiumIonAccessToken?: string;
       heatmap?: boolean;
-      tile_zoomLevel?: number[];
+      zoomLevel?: number[];
     }) => Promise<ImageryProvider> | ImageryProvider | null;
   };
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
     (t: Tile, ciat?: string) =>
-      presets[t.tile_type || "default"]({
-        url: t.tile_url,
+      presets[t.type || "default"]({
+        url: t.url,
         cesiumIonAccessToken: ciat,
         heatmap: t.heatmap,
-        tile_zoomLevel: t.tile_zoomLevelForURL,
+        zoomLevel: t.zoomLevelForURL,
       }),
     [presets],
   );
@@ -152,10 +152,10 @@ export function useImageryProviders({
               : [
                   key,
                   added ||
-                  prevType !== tile.tile_type ||
-                  prevUrl !== tile.tile_url ||
-                  (isCesiumAccessTokenUpdated && (!tile.tile_type || tile.tile_type === "default"))
-                    ? [tile.tile_type, tile.tile_url, newTile(tile, cesiumIonAccessToken)]
+                  prevType !== tile.type ||
+                  prevUrl !== tile.url ||
+                  (isCesiumAccessTokenUpdated && (!tile.type || tile.type === "default"))
+                    ? [tile.type, tile.url, newTile(tile, cesiumIonAccessToken)]
                     : [prevType, prevUrl, prevProvider],
                 ],
         )
@@ -169,9 +169,7 @@ export function useImageryProviders({
       !!added.length ||
       !!isCesiumAccessTokenUpdated ||
       !isEqual(prevTileKeys.current, tileKeys) ||
-      rawProviders.some(
-        p => p.tile && (p.prevType !== p.tile.tile_type || p.prevUrl !== p.tile.tile_url),
-      );
+      rawProviders.some(p => p.tile && (p.prevType !== p.tile.type || p.prevUrl !== p.tile.url));
 
     prevTileKeys.current = tileKeys;
     prevCesiumIonAccessToken.current = cesiumIonAccessToken;

package/src/engines/Cesium/core/Indicator/Indicator.tsx

@@ -4,7 +4,7 @@ import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2, JulianDate } f
 import { useEffect, useState } from "react";
 import { useCesium } from "resium";
 
-import type { SceneProperty } from "../../..";
+import type { ViewerProperty } from "../../..";
 import { TimelineManagerRef } from "../../../../Map/useTimelineManager";
 import { useIcon } from "../../common";
 
@@ -12,7 +12,7 @@ import Crosshair from "./crosshair.svg?react";
 
 export type Props = {
   className?: string;
-  property?: SceneProperty;
+  property?: ViewerProperty;
   timelineManagerRef?: TimelineManagerRef;
 };
 
@@ -29,17 +29,17 @@ export default function Indicator({
     mountOnEnter: true,
     unmountOnExit: true,
   });
-  const { indicator_type, indicator_image, indicator_image_scale } = property?.indicator ?? {};
-  const [img, w, h] = useIcon({ image: indicator_image, imageSize: indicator_image_scale });
+  const { type, image, imageScale } = property?.indicator ?? {};
+  const [img, w, h] = useIcon({ image: image, imageSize: imageScale });
 
   useEffect(() => {
-    !(!indicator_type || indicator_type === "default")
+    !(!type || type === "default")
       ? viewer?.selectionIndicator.viewModel.selectionIndicatorElement.setAttribute(
           "hidden",
           "true",
         )
       : viewer?.selectionIndicator.viewModel.selectionIndicatorElement.removeAttribute("hidden");
-  }, [indicator_type, viewer, viewer?.selectionIndicator]);
+  }, [type, viewer, viewer?.selectionIndicator]);
 
   useEffect(() => {
     if (!viewer) return;
@@ -90,7 +90,7 @@ export default function Indicator({
   }, [viewer, timelineManagerRef]);
 
   return transition !== "unmounted" && pos ? (
-    indicator_type === "crosshair" ? (
+    type === "crosshair" ? (
       <div
         className={className}
         style={{
@@ -109,7 +109,7 @@ export default function Indicator({
         }}>
         <Crosshair />
       </div>
-    ) : indicator_type === "custom" ? (
+    ) : type === "custom" ? (
       <img
         src={img}
         width={w}

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

@@ -0,0 +1,135 @@
+import { Math as CesiumMath, Scene, Viewer } from "cesium";
+import { isEqual } from "lodash-es";
+import { useCallback, useEffect, useRef } from "react";
+import { CesiumComponentRef } from "resium";
+import { RefObject } from "use-callback-ref/dist/es5/types";
+import { useCustomCompareCallback } from "use-custom-compare";
+
+import { EngineRef, ViewerProperty } from "../..";
+import { Camera } from "../../../mantle";
+import { FEATURE_FLAGS } from "../../../Visualizer";
+import { getCamera } from "../common";
+
+import { useCameraLimiter } from "./useCameraLimiter";
+
+export default ({
+  cesium,
+  property,
+  camera,
+  featureFlags,
+  engineAPI,
+  cameraForceHorizontalRoll = false,
+  onCameraChange,
+}: {
+  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  property?: ViewerProperty;
+  engineAPI: EngineRef;
+  featureFlags: number;
+  camera?: Camera;
+  cameraForceHorizontalRoll?: boolean;
+  onCameraChange?: (camera: Camera) => void;
+}) => {
+  // cache the camera data emitted from viewer camera change
+  const emittedCamera = useRef<Camera[]>([]);
+  const updateCamera = useCallback(() => {
+    const viewer = cesium?.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed() || !onCameraChange) return;
+
+    const c = getCamera(viewer);
+    if (c && !isEqual(c, camera)) {
+      emittedCamera.current.push(c);
+      // The state change is not sync now. This number is how many state updates can actually happen to be merged within one re-render.
+      if (emittedCamera.current.length > 10) {
+        emittedCamera.current.shift();
+      }
+      onCameraChange?.(c);
+    }
+  }, [cesium, camera, onCameraChange]);
+
+  const handleCameraChange = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  const handleCameraMoveEnd = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  useEffect(() => {
+    if (camera && !emittedCamera.current.includes(camera)) {
+      engineAPI.flyTo(camera, { duration: 0 });
+      emittedCamera.current = [];
+    }
+  }, [camera, engineAPI]);
+
+  useEffect(() => {
+    if (!cesium.current?.cesiumElement) return;
+    const allowCameraMove = !!(featureFlags & FEATURE_FLAGS.CAMERA_MOVE);
+    const allowCameraZoom = !!(featureFlags & FEATURE_FLAGS.CAMERA_ZOOM);
+    const allowCameraTilt = !!(featureFlags & FEATURE_FLAGS.CAMERA_TILT);
+    const allowCameraLook = !!(featureFlags & FEATURE_FLAGS.CAMERA_LOOK);
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTranslate =
+      allowCameraMove;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableRotate = allowCameraMove;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableLook = allowCameraLook;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTilt = allowCameraTilt;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableZoom = allowCameraZoom;
+  }, [cesium, featureFlags]);
+
+  // move to initial position at startup
+  const initialCameraFlight = useRef(false);
+
+  const mountCamera = useCustomCompareCallback(
+    () => {
+      if (initialCameraFlight.current) return;
+      initialCameraFlight.current = true;
+      if (property?.camera?.limiter?.enabled && property?.camera?.limiter?.targetArea) {
+        engineAPI.flyTo(property?.camera?.limiter?.targetArea, { duration: 0 });
+      } else if (camera) {
+        engineAPI.flyTo(camera, { duration: 0 });
+      }
+    },
+    [engineAPI, property?.camera?.limiter?.enabled],
+    (prevDeps, nextDeps) => prevDeps[0] === nextDeps[0] && prevDeps[1] === nextDeps[1],
+  );
+
+  const unmountCamera = useCallback(() => {
+    initialCameraFlight.current = false;
+  }, []);
+
+  // camera limiter
+  const { cameraViewBoundaries, cameraViewOuterBoundaries, cameraViewBoundariesMaterial } =
+    useCameraLimiter(cesium, camera, property?.camera?.limiter);
+
+  // horizontal roll
+  const fixCameraHorizontal = useCallback(
+    (scene: Scene) => {
+      if (!scene.camera || !cameraForceHorizontalRoll) return;
+      if (Math.abs(CesiumMath.negativePiToPi(scene.camera.roll)) > Math.PI / 86400) {
+        scene.camera.setView({
+          orientation: {
+            heading: scene.camera.heading,
+            pitch: scene.camera.pitch,
+            roll: 0,
+          },
+        });
+      }
+    },
+    [cameraForceHorizontalRoll],
+  );
+
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer) return;
+    return viewer.scene.preRender.addEventListener(fixCameraHorizontal);
+  }, [cesium, fixCameraHorizontal]);
+
+  return {
+    cameraViewBoundaries,
+    cameraViewOuterBoundaries,
+    cameraViewBoundariesMaterial,
+    mountCamera,
+    unmountCamera,
+    handleCameraChange,
+    handleCameraMoveEnd,
+  };
+};

package/src/engines/Cesium/{cameraLimiter.ts → hooks/useCameraLimiter.ts}

@@ -12,10 +12,9 @@ import type { Viewer as CesiumViewer } from "cesium";
 import { useEffect, useMemo, useState, RefObject } from "react";
 import { CesiumComponentRef } from "resium";
 
-import type { SceneProperty } from "..";
-import { Camera } from "../../utils";
-
-import { getCamera } from "./common";
+import { CameraLimiterProperty } from "../../../Map";
+import { Camera } from "../../../utils";
+import { getCamera } from "../common";
 
 const targetWidth = 1000000;
 const targetLength = 1000000;
@@ -23,44 +22,30 @@ const targetLength = 1000000;
 export function useCameraLimiter(
   cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
   camera: Camera | undefined,
-  property: SceneProperty["cameraLimiter"] | undefined,
+  property: CameraLimiterProperty | undefined,
 ) {
   const geodesic = useMemo(() => {
     const viewer = cesium.current?.cesiumElement;
     if (
       !viewer ||
       viewer.isDestroyed() ||
-      !property?.cameraLimitterEnabled ||
-      !property.cameraLimitterTargetArea?.lng ||
-      !property.cameraLimitterTargetArea.lat
+      !property?.enabled ||
+      !property.targetArea?.lng ||
+      !property.targetArea.lat
     ) {
       return undefined;
     }
 
-    return getGeodesic(
-      viewer,
-      property.cameraLimitterTargetArea.lng,
-      property.cameraLimitterTargetArea.lat,
-    );
-  }, [
-    cesium,
-    property?.cameraLimitterEnabled,
-    property?.cameraLimitterTargetArea?.lng,
-    property?.cameraLimitterTargetArea?.lat,
-  ]);
+    return getGeodesic(viewer, property.targetArea.lng, property.targetArea.lat);
+  }, [cesium, property?.enabled, property?.targetArea?.lng, property?.targetArea?.lat]);
 
   // calculate inner limiter dimensions
   const limiterDimensions = useMemo((): InnerLimiterDimensions | undefined => {
     if (!geodesic) return undefined;
 
-    const width =
-      typeof property?.cameraLimitterTargetWidth === "number"
-        ? property.cameraLimitterTargetWidth
-        : targetWidth;
+    const width = typeof property?.targetWidth === "number" ? property.targetWidth : targetWidth;
     const length =
-      typeof property?.cameraLimitterTargetLength === "number"
-        ? property.cameraLimitterTargetLength
-        : targetLength;
+      typeof property?.targetLength === "number" ? property.targetLength : targetLength;
 
     const { cartesianArray, cartographicDimensions } = calcBoundaryBox(
       geodesic,
@@ -72,7 +57,7 @@ export function useCameraLimiter(
       cartographicDimensions,
       cartesianArray,
     };
-  }, [property?.cameraLimitterTargetWidth, property?.cameraLimitterTargetLength, geodesic]);
+  }, [property?.targetWidth, property?.targetLength, geodesic]);
 
   // calculate maximum camera view (outer boundaries)
   const [cameraViewOuterBoundaries, setCameraViewOuterBoundaries] = useState<
@@ -81,19 +66,19 @@ export function useCameraLimiter(
 
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed() || !property?.cameraLimitterTargetArea || !geodesic) return;
+    if (!viewer || viewer.isDestroyed() || !property?.targetArea || !geodesic) return;
 
     const camera = new CesiumCamera(viewer.scene);
     camera.setView({
       destination: Cartesian3.fromDegrees(
-        property.cameraLimitterTargetArea.lng,
-        property.cameraLimitterTargetArea.lat,
-        property.cameraLimitterTargetArea.height,
+        property.targetArea.lng,
+        property.targetArea.lat,
+        property.targetArea.height,
       ),
       orientation: {
-        heading: property?.cameraLimitterTargetArea.heading,
-        pitch: property?.cameraLimitterTargetArea.pitch,
-        roll: property?.cameraLimitterTargetArea.roll,
+        heading: property?.targetArea.heading,
+        pitch: property?.targetArea.pitch,
+        roll: property?.targetArea.roll,
         up: camera.up,
       },
     });
@@ -103,10 +88,8 @@ export function useCameraLimiter(
     const rectangleHalfWidth = Rectangle.computeWidth(computedViewRectangle) * Math.PI * 1000000;
     const rectangleHalfHeight = Rectangle.computeHeight(computedViewRectangle) * Math.PI * 1000000;
 
-    const {
-      cameraLimitterTargetWidth: width = targetWidth,
-      cameraLimitterTargetLength: length = targetLength,
-    } = property ?? {};
+    const { targetWidth: width = targetWidth, targetLength: length = targetLength } =
+      property ?? {};
 
     const { cartesianArray } = calcBoundaryBox(
       geodesic,
@@ -121,13 +104,7 @@ export function useCameraLimiter(
   useEffect(() => {
     const viewer = cesium?.current?.cesiumElement;
     const camera = getCamera(cesium?.current?.cesiumElement);
-    if (
-      !viewer ||
-      viewer.isDestroyed() ||
-      !camera ||
-      !property?.cameraLimitterEnabled ||
-      !limiterDimensions
-    )
+    if (!viewer || viewer.isDestroyed() || !camera || !property?.enabled || !limiterDimensions)
       return;
     viewer.camera.setView({
       destination: getAllowedCameraDestination(camera, limiterDimensions),