feat: PointCloud style feature

Add a color change for the point cloud points inside the box

packages/lb-annotation/src/core/pointCloud/index.tsx

@@ -1,11 +1,9 @@
-/*
- * POINTCLOUD - ALPHA - DEMO
- *
- * @Author: Laoluo luozefeng@sensetime.com
- * @Date: 2022-06-13 19:05:33
- * @LastEditors: Laoluo luozefeng@sensetime.com
- * @LastEditTime: 2022-07-08 14:13:48
+/**
+ * @file POINTCLOUD - ALPHA - DEMO
+ * @createdate 2022-07-11
+ * @author Ron <ron.f.luo@gmail.com>
  */
+
 /*eslint import/no-unresolved: 0*/
 import * as THREE from 'three';
 import {
@@ -15,6 +13,7 @@ import {
   IVolume,
   IPointCloudBox,
   I3DSpaceCoord,
+  PointCloudUtils,
 } from '@labelbee/lb-utils';
 import { isInPolygon } from '@/utils/tool/polygonTool';
 import { IPolygonPoint } from '@/types/tool/polygon';
@@ -66,6 +65,8 @@ export class PointCloud {
 
   private orthgraphicParams?: IOrthographicCamera;
 
+  private DEFAULT_POINTCLOUD = 'POINTCLOUD';
+
   constructor({ container, noAppend, isOrthographicCamera, orthgraphicParams }: IProps) {
     this.container = container;
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -282,19 +283,10 @@ export class PointCloud {
     return pointVector.clone().applyMatrix4(TBack).applyMatrix4(Rz).applyMatrix4(TFrom);
   }
 
-  /**
-   * For pcd filter point under box
-   * @param boxParams
-   * @param points
-   * @param color
-   * @returns
-   */
-  public filterPointsByBox(boxParams: IPointCloudBox, points: number[], color: number[]) {
-    const newPosition = [];
-    const newColor = [];
+  public getCuboidFromPointCloudBox(boxParams: IPointCloudBox) {
     const { center, width, height, depth, rotation } = boxParams;
 
-    const polygon = [
+    const polygonPointList = [
       {
         x: center.x + width / 2,
         y: center.y + height / 2,
@@ -322,12 +314,32 @@ export class PointCloud {
     const zMax = center.z + depth / 2;
     const zMin = center.z - depth / 2;
 
+    return {
+      polygonPointList,
+      zMax,
+      zMin,
+    };
+  }
+
+  /**
+   * For pcd filter point under box
+   * @param boxParams
+   * @param points
+   * @param color
+   * @returns
+   */
+  public filterPointsByBox(boxParams: IPointCloudBox, points: number[], color: number[]) {
+    const newPosition = [];
+    const newColor = [];
+
+    const { zMin, zMax, polygonPointList } = this.getCuboidFromPointCloudBox(boxParams);
+
     for (let i = 0; i < points.length; i += 3) {
       const x = points[i];
       const y = points[i + 1];
       const z = points[i + 2];
 
-      const inPolygon = isInPolygon({ x, y }, polygon);
+      const inPolygon = isInPolygon({ x, y }, polygonPointList);
 
       if (inPolygon && z >= zMin && z <= zMax) {
         newPosition.push(x);
@@ -346,6 +358,39 @@ export class PointCloud {
     return geometry;
   }
 
+  /**
+   * For pcd points & Update Color
+   *
+   * Notice. It will directly update the parameter(color)
+   * @param boxParams
+   * @param points
+   * @param color
+   * @returns
+   */
+  public filterPointsColor(boxParams: IPointCloudBox, points: number[], color: number[]) {
+    const { zMin, zMax, polygonPointList } = this.getCuboidFromPointCloudBox(boxParams);
+
+    for (let i = 0; i < points.length; i += 3) {
+      const x = points[i];
+      const y = points[i + 1];
+      const z = points[i + 2];
+
+      const inPolygon = isInPolygon({ x, y }, polygonPointList);
+
+      if (inPolygon && z >= zMin && z <= zMax) {
+        color[i] = 0;
+        color[i + 1] = 1;
+        color[i + 2] = 1;
+      } else {
+        // DEFAULT COLOR RENDERc
+        const [r, g, b] = PointCloudUtils.getStandardColorByCoord(x, y, z);
+        color[i] = r;
+        color[i + 1] = g;
+        color[i + 2] = b;
+      }
+    }
+  }
+
   public getCameraVector(
     centerPoint: I3DSpaceCoord,
     rotationZ: number,
@@ -417,6 +462,7 @@ export class PointCloud {
   public loadPCDFile = (src: string, cb?: () => void) => {
     this.pcdLoader.load(src, (points: any) => {
       points.material.size = 1;
+      points.name = this.DEFAULT_POINTCLOUD;
 
       const circle = this.createCircle(points.geometry.boundingSphere.radius * 2);
 
@@ -433,6 +479,26 @@ export class PointCloud {
     });
   };
 
+  /**
+   * It needs to be updated after load PointCLoud's data.
+   * @param boxParams
+   * @returns
+   */
+  public hightLightOriginPointCloud(boxParams: IPointCloudBox) {
+    const oldPointCloud: any = this.scene.getObjectByName(this.DEFAULT_POINTCLOUD);
+    if (!oldPointCloud) {
+      return;
+    }
+
+    this.filterPointsColor(
+      boxParams,
+      oldPointCloud.geometry.attributes.position.array,
+      oldPointCloud.geometry.attributes.color.array,
+    );
+    oldPointCloud.geometry.attributes.color.needsUpdate = true;
+    this.render();
+  }
+
   /**
    * Load PCD File by box
    * @param src
@@ -450,6 +516,7 @@ export class PointCloud {
       );
 
       const newPoints = new THREE.Points(newGeometry, points.material);
+      newPoints.name = this.DEFAULT_POINTCLOUD;
       this.scene.add(newPoints);
       this.render();
     });

packages/lb-components/src/components/pointCloudView/PointCloudBackView.tsx

@@ -17,6 +17,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { synchronizeSideView, synchronizeTopView } from './PointCloudTopView';
 import { PointCloudContext } from './PointCloudContext';
 import { IPointCloudBox } from '@labelbee/lb-utils';
+import { pointCloudMain } from './PointCloud3DView';
 
 const { EPolygonPattern } = cTool;
 
@@ -215,6 +216,7 @@ const PointCloudSideView = () => {
 
         synchronizeTopView(newBoxParams, newPolygon);
         synchronizeSideView(newBoxParams, newPolygon);
+        pointCloudMain.hightLightOriginPointCloud(newBoxParams);
         ptCtx.updateSelectedPointCloud(newPolygon.id, newBoxParams);
       },
     );

packages/lb-components/src/components/pointCloudView/PointCloudSideView.tsx

@@ -1,8 +1,7 @@
-/*
- * @Author: Laoluo luozefeng@sensetime.com
- * @Date: 2022-06-22 11:08:31
- * @LastEditors: Laoluo luozefeng@sensetime.com
- * @LastEditTime: 2022-07-08 11:09:02
+/**
+ * @file PointCloud sideView - React Component
+ * @createdate 2022-07-11
+ * @author Ron <ron.f.luo@gmail.com>
  */
 import {
   PolygonOperation,
@@ -17,6 +16,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { synchronizeBackView, synchronizeTopView } from './PointCloudTopView';
 import { IPointCloudBox } from '@labelbee/lb-utils';
 import { PointCloudContext } from './PointCloudContext';
+import { pointCloudMain } from './PointCloud3DView';
 
 const { EPolygonPattern } = cTool;
 
@@ -222,6 +222,7 @@ const PointCloudSideView = () => {
 
         synchronizeTopView(newBoxParams, newPolygon);
         synchronizeBackView(newBoxParams, newPolygon);
+        pointCloudMain.hightLightOriginPointCloud(newBoxParams);
         ptCtx.updateSelectedPointCloud(newPolygon.id, newBoxParams);
       },
     );

packages/lb-components/src/components/pointCloudView/PointCloudTopView.tsx

@@ -2,7 +2,7 @@
  * @Author: Laoluo luozefeng@sensetime.com
  * @Date: 2022-06-22 11:08:31
  * @LastEditors: Laoluo luozefeng@sensetime.com
- * @LastEditTime: 2022-07-08 12:28:56
+ * @LastEditTime: 2022-07-08 15:44:18
  */
 import { ISize } from '@/types/main';
 import { getClassName } from '@/utils/dom';
@@ -332,29 +332,6 @@ export const PointCloudTopView = () => {
         polygonOperation.setPattern(EPolygonPattern.Rect);
         TopPointCloudPolygonOperation = polygonOperation;
 
-        polygonOperation.singleOn('polygonCreated', (polygon: any) => {
-          const { boxParams } = afterPolygonCreated(polygon, pointCloud, size);
-
-          synchronizeSideView(boxParams, polygon);
-          synchronizeBackView(boxParams, polygon);
-        });
-
-        polygonOperation.singleOn('selectedChange', () => {
-          const selectedID = polygonOperation.selectedID;
-          ptCtx.setSelectedID(selectedID ?? '');
-
-          const boxParams = ptCtx.pointCloudBoxList.find((v) => v.id === selectedID);
-          const polygon = polygonOperation.selectedPolygon;
-
-          // TODO! Need to Update setSeletctedID in PolygonOperation
-          if (!boxParams || !polygon) {
-            return;
-          }
-
-          synchronizeSideView(boxParams, polygon);
-          synchronizeBackView(boxParams, polygon);
-        });
-
         /**
          * Synchronized 3d point cloud view displacement operations
          *
@@ -398,6 +375,7 @@ export const PointCloudTopView = () => {
             width: ref.current.clientWidth,
             height: ref.current.clientHeight,
           });
+          pointCloudMain.hightLightOriginPointCloud(boxParams);
           synchronizeSideView(boxParams, polygon);
           synchronizeBackView(boxParams, polygon);
         }
@@ -440,6 +418,7 @@ export const PointCloudTopView = () => {
 
         synchronizeSideView(newBoxParams, newPolygon);
         synchronizeBackView(newBoxParams, newPolygon);
+        pointCloudMain.hightLightOriginPointCloud(newBoxParams);
         ptCtx.updateSelectedPointCloud(newPolygon.id, newBoxParams);
       });
     }

packages/lb-utils/src/PointCloudUtils.ts

@@ -0,0 +1,30 @@
+/**
+ * @file PointCloud Utils
+ * @createdate 2022-07-11
+ * @author Ron <ron.f.luo@gmail.com>
+ */
+
+class PointCloudUtils {
+  public static genColorByCoord(x: number, y: number, z: number) {
+    if (z <= 0) {
+      return [128, 128, 128];
+    }
+
+    if (z < 5) {
+      return [255, 0, 0];
+    }
+
+    if (z < 10) {
+      return [0, 255, 0];
+    }
+
+    return [0, 0, 255];
+  }
+
+  public static getStandardColorByCoord(x: number, y: number, z: number) {
+    const pdColor = this.genColorByCoord(x, y, z);
+    return pdColor.map((hex) => hex / 255);
+  }
+}
+
+export default PointCloudUtils;

packages/lb-utils/src/constant/pointCloud.ts

@@ -1,10 +1,9 @@
-/*
- * PointCloud default constant
- * @Author: Laoluo luozefeng@sensetime.com
- * @Date: 2022-06-16 17:19:53
- * @LastEditors: Laoluo luozefeng@sensetime.com
- * @LastEditTime: 2022-06-16 19:31:56
+/**
+ * @file PointCloud default constant
+ * @createdate 2022-07-11
+ * @author Ron <ron.f.luo@gmail.com>
  */
+
 export enum EPerspectiveView {
   Front = 'FRONT',
   Back = 'BACK',

packages/lb-utils/src/index.ts

@@ -7,6 +7,7 @@
 import i18n from './i18n/index';
 import toolStyleConverter from './toolStyle';
 import PerspectiveShiftUtils from './PerspectiveShiftUtils';
+import PointCloudUtils from './PointCloudUtils';
 
 // Constant
 export * from './constant/pointCloud';
@@ -15,4 +16,4 @@ export * from './constant/pointCloud';
 export * from './types/pointCloud';
 
 // Utils
-export { i18n, toolStyleConverter, PerspectiveShiftUtils };
+export { i18n, toolStyleConverter, PerspectiveShiftUtils, PointCloudUtils };