chore(web): refactor plugin API camera.getFovInfo (#691)

reearth · Sep 14, 2023 · b77db4d · b77db4d
1 parent 72a00bf
commit b77db4d
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 21 deletions.
diff --git a/web/src/beta/lib/core/Crust/Plugins/api.ts b/web/src/beta/lib/core/Crust/Plugins/api.ts
@@ -328,7 +328,7 @@ export function commonReearth({
   zoomIn,
   zoomOut,
   cameraViewport,
-  getCameraFovCenter,
+  getCameraFovInfo,
   orbit,
   rotateRight,
   captureScreen,
@@ -375,7 +375,7 @@ export function commonReearth({
   rotateRight: GlobalThis["reearth"]["camera"]["rotateRight"];
   orbit: GlobalThis["reearth"]["camera"]["orbit"];
   cameraViewport?: () => GlobalThis["reearth"]["camera"]["viewport"];
-  getCameraFovCenter: GlobalThis["reearth"]["camera"]["getFovCenter"];
+  getCameraFovInfo: GlobalThis["reearth"]["camera"]["getFovInfo"];
   captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
   getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
   sampleTerrainHeight: GlobalThis["reearth"]["scene"]["sampleTerrainHeight"];
@@ -413,7 +413,7 @@ export function commonReearth({
         get viewport() {
           return cameraViewport?.();
         },
-        getFovCenter: getCameraFovCenter,
+        getFovInfo: getCameraFovInfo,
         enableScreenSpaceController: enableScreenSpaceCameraController,
         lookHorizontal,
         lookVertical,
@@ -469,7 +469,7 @@ export function commonReearth({
       get viewport() {
         return cameraViewport?.();
       },
-      getFovCenter: getCameraFovCenter,
+      getFovInfo: getCameraFovInfo,
       enableScreenSpaceController: enableScreenSpaceCameraController,
       lookHorizontal,
       lookVertical,

diff --git a/web/src/beta/lib/core/Crust/Plugins/hooks.ts b/web/src/beta/lib/core/Crust/Plugins/hooks.ts
@@ -112,9 +112,9 @@ export default function ({
     return engineRef?.getViewport();
   }, [engineRef]);
 
-  const getCameraFovCenter = useCallback(
-    (withTerrain?: boolean) => {
-      return engineRef?.getCameraFovCenter(withTerrain);
+  const getCameraFovInfo = useCallback(
+    (options: { withTerrain?: boolean; calcViewSize?: boolean }) => {
+      return engineRef?.getCameraFovInfo(options);
     },
     [engineRef],
   );
@@ -330,7 +330,7 @@ export default function ({
         zoomIn,
         zoomOut,
         cameraViewport,
-        getCameraFovCenter,
+        getCameraFovInfo,
         rotateRight,
         orbit,
         captureScreen,
@@ -383,7 +383,7 @@ export default function ({
       zoomIn,
       zoomOut,
       cameraViewport,
-      getCameraFovCenter,
+      getCameraFovInfo,
       rotateRight,
       orbit,
       captureScreen,

diff --git a/web/src/beta/lib/core/Crust/Plugins/plugin_types.ts b/web/src/beta/lib/core/Crust/Plugins/plugin_types.ts
@@ -134,7 +134,12 @@ export type Camera = {
   /** Current camera position */
   readonly position: CameraPosition | undefined;
   readonly viewport: Rect | undefined;
-  readonly getFovCenter: (withTerrain?: boolean) => LatLngHeight | undefined;
+  readonly getFovInfo: (options: { withTerrain?: boolean; calcViewSize?: boolean }) =>
+    | {
+        center?: LatLngHeight;
+        viewSize?: number;
+      }
+    | undefined;
   readonly zoomIn: (amount: number, options?: CameraOptions) => void;
   readonly zoomOut: (amount: number, options?: CameraOptions) => void;
   /** Moves the camera position to the specified destination. */

diff --git a/web/src/beta/lib/core/Crust/Plugins/storybook.tsx b/web/src/beta/lib/core/Crust/Plugins/storybook.tsx
@@ -124,7 +124,7 @@ export const context: Context = {
         fov: Math.PI * (60 / 180),
       },
       viewport: { west: 0, east: 0, north: 0, south: 0 },
-      getFovCenter: act("getFovCenter"),
+      getFovInfo: act("getFovInfo"),
       enableScreenSpaceController: act("enableScreenSpaceController"),
       flyTo: act("flyTo"),
       lookAt: act("lookAt"),

diff --git a/web/src/beta/lib/core/Map/ref.ts b/web/src/beta/lib/core/Map/ref.ts
@@ -17,7 +17,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   flyTo: 1,
   flyToGround: 1,
   getCamera: 1,
-  getCameraFovCenter: 1,
+  getCameraFovInfo: 1,
   getClock: 1,
   getLocationFromScreen: 1,
   sampleTerrainHeight: 1,

diff --git a/web/src/beta/lib/core/Map/types/index.ts b/web/src/beta/lib/core/Map/types/index.ts
@@ -61,7 +61,12 @@ export type EngineRef = {
   requestRender: () => void;
   getViewport: () => Rect | undefined;
   getCamera: () => Camera | undefined;
-  getCameraFovCenter: (withTerrain?: boolean) => LatLngHeight | undefined;
+  getCameraFovInfo: (options: { withTerrain?: boolean; calcViewSize?: boolean }) =>
+    | {
+        center?: LatLngHeight;
+        viewSize?: number;
+      }
+    | undefined;
   getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
   sampleTerrainHeight: (lng: number, lat: number) => Promise<number | undefined>;
   flyTo: (target: string | FlyToDestination, options?: CameraOptions) => void;

diff --git a/web/src/beta/lib/core/engines/Cesium/common.ts b/web/src/beta/lib/core/engines/Cesium/common.ts
@@ -38,6 +38,7 @@ import { useCallback, MutableRefObject } from "react";
 import { ClassificationType } from "@reearth/beta/lib/core/mantle";
 import { useCanvas, useImage } from "@reearth/beta/utils/image";
 import { tweenInterval } from "@reearth/beta/utils/raf";
+import { LatLngHeight } from "@reearth/beta/utils/value";
 
 import type { Camera, CameraOptions, Clock, FlyToDestination } from "..";
 
@@ -222,12 +223,12 @@ export const getCameraEllipsoidIntersection = (
   return getRayEllipsoidIntersection(ray, globe.ellipsoid, result);
 };
 
-export const getCameraTerrainIntersection = (scene: Scene): any => {
+export const getCameraTerrainIntersection = (scene: Scene): Cartesian3 | undefined => {
   const ray = createRayFromCamera(scene.camera);
   return scene.globe.pick(ray, scene);
 };
 
-export const cartesianToLatLngHeight = (cartesian: Cartesian3, scene: Scene): any => {
+export const cartesianToLatLngHeight = (cartesian: Cartesian3, scene: Scene): LatLngHeight => {
   const cartographic = Cartographic.fromCartesian(cartesian, scene.globe.ellipsoid);
   return {
     lng: CesiumMath.toDegrees(cartographic.longitude),

diff --git a/web/src/beta/lib/core/engines/Cesium/useEngineRef.ts b/web/src/beta/lib/core/engines/Cesium/useEngineRef.ts
@@ -74,19 +74,36 @@ export default function useEngineRef(
         if (!viewer || viewer.isDestroyed()) return;
         return getLocationFromScreen(viewer.scene, x, y, withTerrain);
       },
-      getCameraFovCenter: withTerrain => {
+      getCameraFovInfo: ({ withTerrain, calcViewSize }) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
         try {
+          let center;
+          let cartesian;
+          let viewSize;
           if (withTerrain) {
-            const cartesian = getCameraTerrainIntersection(viewer.scene);
+            cartesian = getCameraTerrainIntersection(viewer.scene);
             if (cartesian) {
-              return cartesianToLatLngHeight(cartesian, viewer.scene);
+              center = cartesianToLatLngHeight(cartesian, viewer.scene);
             }
           }
-          const cartesian = new Cesium.Cartesian3();
-          getCameraEllipsoidIntersection(viewer.scene, cartesian);
-          return cartesianToLatLngHeight(cartesian, viewer.scene);
+          if (!center) {
+            cartesian = new Cesium.Cartesian3();
+            getCameraEllipsoidIntersection(viewer.scene, cartesian);
+            center = cartesianToLatLngHeight(cartesian, viewer.scene);
+          }
+          if (
+            calcViewSize &&
+            cartesian &&
+            viewer.scene.camera.frustum instanceof Cesium.PerspectiveFrustum
+          ) {
+            const distance = Cesium.Cartesian3.distance(viewer.scene.camera.positionWC, cartesian);
+            viewSize = distance * Math.tan(viewer.scene.camera.frustum.fov / 2);
+          }
+          return {
+            center,
+            viewSize,
+          };
         } catch (e) {
           return undefined;
         }