feat: Top-view support filter points by z-axis

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

@@ -20,6 +20,7 @@ import { IPolygonPoint } from '@/types/tool/polygon';
 import uuid from '@/utils/uuid';
 import { PCDLoader } from './PCDLoader';
 import { OrbitControls } from './OrbitControls';
+import { Shader, WebGLRenderer } from 'three';
 
 interface IOrthographicCamera {
   left: number;
@@ -53,6 +54,11 @@ export class PointCloud {
 
   public pcdLoader: PCDLoader;
 
+  /**
+   * zAxis Limit for filter point over a value
+   */
+  public zAxisLimit: number = 10;
+
   private initCameraPosition = new THREE.Vector3(-1, 0, 10); // It will init when the camera positton be set
 
   private container: HTMLElement;
@@ -461,20 +467,50 @@ export class PointCloud {
     return ellipse;
   }
 
+  public overridePointShader = (shader: Shader, renderer: WebGLRenderer) => {
+    shader.vertexShader = `
+    attribute float sizes;
+    attribute float visibility;
+    varying float vVisible;
+  ${shader.vertexShader}`.replace(
+      `gl_PointSize = size;`,
+      `gl_PointSize = size * sizes;
+      vVisible = visibility;
+    `,
+    );
+    shader.fragmentShader = `
+    varying float vVisible;
+  ${shader.fragmentShader}`.replace(
+      `#include <clipping_planes_fragment>`,
+      `
+      if (vVisible < 0.5) discard;
+    #include <clipping_planes_fragment>`,
+    );
+  };
+
   public loadPCDFile = (src: string, cb?: () => void) => {
     this.pcdLoader.load(src, (points: any) => {
       points.material.size = 1;
       points.name = this.DEFAULT_POINTCLOUD;
 
+      const pointsMaterial = new THREE.PointsMaterial({
+        vertexColors: true,
+      });
+
+      pointsMaterial.onBeforeCompile = this.overridePointShader;
+
       const circle = this.createCircle(points.geometry.boundingSphere.radius * 2);
+      this.pointsUuid = points.uuid;
+
+      points.material = pointsMaterial;
+
+      this.filterZAxisPoints(points);
 
       this.scene.add(points);
       this.scene.add(circle);
 
       this.render();
 
-      this.pointsUuid = points.uuid;
-
       if (cb) {
         cb();
       }
@@ -950,6 +986,34 @@ export class PointCloud {
     return { newBoxParams };
   }
 
+  /**
+   * Filter Point by z-aixs
+   */
+  public filterZAxisPoints(pcdPoints?: any) {
+    const points: any = pcdPoints ? pcdPoints : this.scene.children.find((i) => i.uuid === this.pointsUuid);
+
+    if (points) {
+      const attributes = points.geometry.attributes;
+      const position = attributes.position;
+      const visibility = [];
+      const count = position.count;
+
+      for (let i = 0; i < count; i++) {
+        const z = position.getZ(i);
+        visibility.push(z > this.zAxisLimit ? 0 : 1);
+      }
+
+      points.geometry.setAttribute('visibility', new THREE.Float32BufferAttribute(visibility, 1));
+      points.geometry.attributes.visibility.needsUpdate = true;
+    }
+  }
+
+  public applyZAxisPoints = (zAxisLimit: number) => {
+    this.zAxisLimit = zAxisLimit;
+    this.filterZAxisPoints();
+    this.render();
+  };
+
   public render() {
     this.renderer.render(this.scene, this.camera);
   }

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

@@ -89,6 +89,7 @@ export const BoxInfos = () => {
           top: 8,
           fontSize: 12,
           padding: 8,
+          zIndex: 20,
         }}
       >
         {infos.map((i) => (

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

@@ -24,6 +24,7 @@ import { PointCloudContext } from './PointCloudContext';
 import { PointCloudContainer } from './PointCloudLayout';
 import { SidePointCloud, SidePointCloudPolygonOperation } from './PointCloudSideView';
 import { BoxInfos } from './PointCloudInfos';
+import { Slider } from 'antd';
 
 const { EPolygonPattern } = cTool;
 
@@ -226,13 +227,38 @@ const TopViewToolbar = () => {
   );
 };
 
+/**
+ * Z-axis points filter
+ */
+const ZAxisSlider = ({
+  setZAxisLimit,
+  zAxisLimit,
+}: {
+  setZAxisLimit: (value: number) => void;
+  zAxisLimit: number;
+}) => {
+  return (
+    <div style={{ position: 'absolute', top: 128, right: 8, height: 200, zIndex: 20 }}>
+      <Slider
+        vertical
+        step={0.5}
+        max={10}
+        min={0.5}
+        defaultValue={zAxisLimit}
+        onAfterChange={setZAxisLimit}
+      />
+    </div>
+  );
+};
+
 const PointCloudTopView = () => {
   const ref = useRef<HTMLDivElement>(null);
   const plgOpraRef = useRef<PointCloud2dOperation | null>();
   const ptCtx = React.useContext(PointCloudContext);
   const pointCloudRef = useRef<PointCloud | null>();
 
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const [zAxisLimit, setZAxisLimit] = useState<number>(10);
 
   const mainViewGenBox = (boxParams: IPointCloudBox, polygonID: string) => {
     pointCloudMain.generateBox(boxParams, polygonID);
@@ -444,14 +470,24 @@ const PointCloudTopView = () => {
     }
   }, [ptCtx, size]);
 
+  useEffect(() => {
+    console.log(zAxisLimit);
+    if (pointCloudRef.current) {
+      pointCloudRef.current.applyZAxisPoints(zAxisLimit);
+    }
+  }, [zAxisLimit]);
+
   return (
     <PointCloudContainer
       className={getClassName('point-cloud-container', 'top-view')}
       title='俯视图'
       toolbar={<TopViewToolbar />}
     >
-      <div style={{ width: '100%', height: 500, position: 'relative' }} ref={ref}>
+      <div style={{ position: 'relative' }}>
+        <div style={{ width: '100%', height: 500 }} ref={ref}></div>
+
         <BoxInfos />
+        <ZAxisSlider zAxisLimit={zAxisLimit} setZAxisLimit={setZAxisLimit} />
       </div>
     </PointCloudContainer>
   );