feat(pointcloud): Change 3DView camera from perspective to orthographic

open-mmlab · Feb 13, 2023 · 6be1167 · 6be1167
1 parent 71dd3b5
commit 6be1167
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 14 deletions.
diff --git a/packages/lb-annotation/src/core/pointCloud/index.ts b/packages/lb-annotation/src/core/pointCloud/index.ts
@@ -342,6 +342,11 @@ export class PointCloud {
     };
   }
 
+  public updateCameraZoom(zoom: number) {
+    this.camera.zoom = zoom;
+    this.camera.updateProjectionMatrix();
+  }
+
   /**
    * Update Camera position & target
    * @param boxParams
@@ -392,7 +397,7 @@ export class PointCloud {
    * Reset camera to center-top
    */
   public resetCamera() {
-    this.updateCamera({ x: -1, y: 0, z: 500 }, { x: 0, y: 0, z: 0 });
+    this.updateCamera(this.DEFAULT_INIT_CAMERA_POSITION, { x: 0, y: 0, z: 0 });
   }
 
   public createThreeMatrix4(matrix4: TMatrix4Tuple) {

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx
@@ -34,8 +34,8 @@ const PointCloud3DContext = React.createContext<{
   reset3DView: () => void;
 }>({
   isActive: false,
-  setTarget3DView: () => {},
-  reset3DView: () => {},
+  setTarget3DView: () => { },
+  reset3DView: () => { },
 });
 
 const PointCloudViewIcon = ({
@@ -95,7 +95,7 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
     if (!ptCtx.mainViewInstance) {
       return;
     }
-    initPointCloud3d?.();
+    initPointCloud3d?.(size);
   }, [size]);
   const { selectedBox } = useSingleBox();
 
@@ -111,15 +111,29 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
     ptCtx.mainViewInstance?.resetCamera();
   };
 
+  /**
+   * Listen for data changes.
+   */
   useEffect(() => {
     if (ref.current && currentData?.url) {
       let pointCloud = ptCtx.mainViewInstance;
-      if (!pointCloud) {
+      if (!pointCloud && size.width) {
+        const orthographicParams = {
+          left: -size.width / 2,
+          right: size.width / 2,
+          top: size.height / 2,
+          bottom: -size.height / 2,
+          near: 100,
+          far: -100,
+        }
+
+        // Need to be showed
         pointCloud = new PointCloud({
           container: ref.current,
-          backgroundColor: '#4c4c4c',
-          config,
+          isOrthographicCamera: true,
+          orthographicParams,
         });
+        ptCtx.setMainViewInstance(pointCloud);
       }
 
       if (currentData.result) {
@@ -140,9 +154,8 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
         ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid);
       }
 
-      ptCtx.setMainViewInstance(pointCloud);
     }
-  }, [currentData]);
+  }, [currentData, size]);
 
   /**
    *  Observe selectedID and reset camera to target top-view

diff --git a/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx
@@ -196,7 +196,7 @@ const PointCloudTopView: React.FC<IProps> = ({
 
     const { pointCloud2dOperation: TopView2dOperation } = ptCtx.topViewInstance;
 
-    TopView2dOperation.singleOn('polygonCreated', (polygon: IPolygonData) => {
+    TopView2dOperation.singleOn('polygonCreated', (polygon: IPolygonData, zoom: number) => {
       if (TopView2dOperation.pattern === EPolygonPattern.Normal || !currentData?.url) {
         /**
          * Notice. The Polygon need to be converted to pointCloud coordinate system for storage.
@@ -216,6 +216,7 @@ const PointCloudTopView: React.FC<IProps> = ({
         size,
         imgList,
         trackConfigurable: config.trackConfigurable,
+        zoom
       });
     });
 

diff --git a/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts b/packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts
@@ -378,11 +378,13 @@ export const usePointCloudViews = () => {
     size,
     imgList,
     trackConfigurable,
+    zoom,
   }: {
     newPolygon: any;
     size: ISize;
     imgList: IFileItem[];
     trackConfigurable?: boolean;
+    zoom: number;
   }) => {
     const newImgList = imgList as any[];
 
@@ -423,7 +425,7 @@ export const usePointCloudViews = () => {
 
     polygonOperation.setSelectedIDs([newPolygon.id]);
     setSelectedIDs(boxParams.id);
-    syncPointCloudViews(PointCloudView.Top, newPolygon, boxParams);
+    syncPointCloudViews(PointCloudView.Top, newPolygon, boxParams, zoom);
     addPointCloudBox(boxParams);
     addHistory({ newBoxParams: boxParams });
   };
@@ -528,7 +530,12 @@ export const usePointCloudViews = () => {
    * @param polygon
    * @param boxParams
    */
-  const syncPointCloudViews = (omitView: string, polygon: any, boxParams: IPointCloudBox) => {
+  const syncPointCloudViews = (
+    omitView: string,
+    polygon: any,
+    boxParams: IPointCloudBox,
+    zoom?: number,
+  ) => {
     const dataUrl = currentData?.url;
 
     const viewToBeUpdated = {
@@ -550,6 +557,10 @@ export const usePointCloudViews = () => {
         viewToBeUpdated[key]();
       }
     });
+    if (zoom) {
+      mainViewInstance?.updateCameraZoom(zoom);
+    }
+
     mainViewGenBox(boxParams);
     mainViewInstance?.highlightOriginPointCloud(boxParams);
   };
@@ -559,12 +570,21 @@ export const usePointCloudViews = () => {
     mainViewInstance?.generateBoxes(newBoxes);
   };
 
-  const initPointCloud3d = () => {
+  const initPointCloud3d = (size: ISize) => {
     if (!mainViewInstance) {
       return;
     }
 
-    mainViewInstance.initPerspectiveCamera();
+    const orthographicParams = {
+      left: -size.width / 2,
+      right: size.width / 2,
+      top: size.height / 2,
+      bottom: -size.height / 2,
+      near: 100,
+      far: -100,
+    }
+
+    mainViewInstance.initOrthographicCamera(orthographicParams);
     mainViewInstance.initRenderer();
     mainViewInstance.render();
   };