feat: Point cloud annotation view

packages/lb-annotation/package.json

@@ -96,7 +96,7 @@
     "color-rgba": "^2.3.0",
     "lodash": "^4.17.20"
   },
-  "pureDependencies": {
+  "peerDependencies": {
     "three": ">=0.141.0"
   }
 }

packages/lb-components/src/components/AnnotationView/pointCloudAnnotationView.tsx

@@ -0,0 +1,62 @@
+/*
+ * @Author: Laoluo luozefeng@sensetime.com
+ * @Date: 2022-06-13 19:31:36
+ * @LastEditors: Laoluo luozefeng@sensetime.com
+ * @LastEditTime: 2022-06-27 19:43:25
+ */
+
+import { PointCloud } from '@labelbee/lb-annotation';
+import { IPointCloudBox, PointCloudUtils } from '@labelbee/lb-utils';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+interface IProps {
+  src: string; // 图片路径
+  result: string;
+  size: {
+    width: number;
+    height: number;
+  };
+}
+
+const PointCloudAnnotationView = (props: IProps) => {
+  const { src, result, size } = props;
+  let viewOperation = useRef<any>();
+  const instance = useRef<any>();
+
+  const refCallback = useCallback((node) => {
+    viewOperation.current = node;
+  }, []);
+
+  useEffect(() => {
+    const pointCloud = new PointCloud({
+      container: viewOperation.current,
+      backgroundColor: '#ccc',
+    });
+    instance.current = pointCloud;
+  }, []);
+
+  useEffect(() => {
+    instance.current?.init();
+  }, [size]);
+
+  useEffect(() => {
+    if (instance.current && src) {
+      instance.current?.loadPCDFile(src);
+    }
+  }, [src]);
+
+  useEffect(() => {
+    if (result) {
+      const boxParamsList = PointCloudUtils.getBoxParamsFromResultList(result);
+
+      // Add Init Box
+      boxParamsList.forEach((v: IPointCloudBox) => {
+        instance.current?.generateBox(v, v.id);
+      });
+    }
+  }, [result]);
+
+  return <div style={size} ref={refCallback} />;
+};
+
+export default PointCloudAnnotationView;

packages/lb-components/src/index.tsx

@@ -1,5 +1,6 @@
 import { AppProps } from '@/App';
 import AnnotationView from '@/components/AnnotationView';
+import PointCloudAnnotationView from '@/components/AnnotationView/pointCloudAnnotationView';
 import { i18n } from '@labelbee/lb-utils';
 import React, { useImperativeHandle, useState } from 'react';
 import { I18nextProvider } from 'react-i18next';
@@ -48,4 +49,4 @@ const OutputApp = (props: AppProps, ref: any) => {
 
 export default React.forwardRef(OutputApp);
 
-export { AnnotationView, i18n, VideoTagTool };
+export { AnnotationView, PointCloudAnnotationView, i18n, VideoTagTool };

packages/lb-demo/src/App.js

@@ -4,22 +4,22 @@
  * @LastEditors: Laoluo luozefeng@sensetime.com
  * @LastEditTime: 2022-06-13 19:34:53
  */
+import { AnnotationView, PointCloudAnnotationView } from '@labelbee/lb-components';
+import StepUtils from '@labelbee/lb-components/dist/utils/StepUtils';
+import 'antd/dist/antd.css';
+import qs from 'qs';
 import React, { useState } from 'react';
 import './App.css';
-import 'antd/dist/antd.css';
 import Annotation from './components/Annotation';
+import { DEFAULT_ANNOTATIONS } from './mock';
 import {
   fileList as mockFileList,
   getMockResult,
   pointCloudList,
   pointCloudMappingImgList,
   videoList,
 } from './mock/index';
-import { getStepList, getDependStepList } from './mock/taskConfig';
-import qs from 'qs';
-import { AnnotationView } from '@labelbee/lb-components';
-import { DEFAULT_ANNOTATIONS } from './mock';
-import StepUtils from '@labelbee/lb-components/dist/utils/StepUtils';
+import { getDependStepList, getStepList } from './mock/taskConfig';
 
 const App = () => {
   const tool = qs.parse(window.location.search, { ignoreQueryPrefix: true, comma: true }).tool;
@@ -72,6 +72,20 @@ const App = () => {
     );
   }
 
+  if (tool === 'PointCloudAnnotationView') {
+    return (
+      <PointCloudAnnotationView
+        src='http://10.152.32.16:8080/top_center_lidar/2022-02-20-12-21-03-100.pcd'
+        size={{
+          height: 1080,
+          width: 1000,
+        }}
+        // result={'{}'}
+        // result={pointCloudResult1}
+      />
+    );
+  }
+
   const goBack = (data) => {
     console.log('goBack', data);
   };