Merge pull request #596 from Suntgr/feat/highlight

feat: Highlight the selected rectangular 3D view

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

@@ -165,6 +165,8 @@ export class PointCloud extends EventListener {
 
   private filterBoxWorkerTimer: ReturnType<typeof setTimeout> | null = null;
 
+  private highlightColor = 0xffff00;
+
   constructor({
     container,
     noAppend,
@@ -244,18 +246,44 @@ export class PointCloud extends EventListener {
         child.children.forEach((grandson) => {
           if (grandson instanceof THREE.Mesh) {
             clickMeshes.push(grandson);
+          } else {
+            this.updateMaterialColor(grandson, child.userData.defaultColor);
           }
         });
       });
       const intersects = this.raycaster.intersectObjects(clickMeshes, false);
       if (intersects.length > 0) {
-        const intersectedObject = intersects[0].object;
+        const parentGroup = intersects[0].object.parent;
+        // Find the BoxHelper and change the color
+        parentGroup?.children.forEach((child) => {
+          this.updateMaterialColor(child, this.highlightColor);
+        });
         this.pipe?.setNeedUpdateCenter(false);
-        this.pipe?.setSelectedIDs(intersectedObject.userData.selectedID);
+        this.pipe?.setSelectedIDs(parentGroup?.userData.selectedID);
       } else {
         this.pipe?.setSelectedIDs(undefined);
       }
+      this.render();
+    });
+  }
+
+  public setHighlightColor(selectedId: string) {
+    this.scene.children.forEach((child) => {
+      if (!(child instanceof THREE.Group)) return;
+      const color = child.name === `box${selectedId}` ? this.highlightColor : child.userData.defaultColor;
+      child.children.forEach((grandson) => {
+        this.updateMaterialColor(grandson, color);
+      });
     });
+    this.render();
+  }
+
+  private updateMaterialColor(child: THREE.Object3D<THREE.Event>, color: THREE.ColorRepresentation) {
+    if (child instanceof THREE.BoxHelper) {
+      (child.material as THREE.LineBasicMaterial).color.set(color);
+    } else if (child instanceof THREE.Sprite) {
+      (child.material as THREE.SpriteMaterial).color.set(color);
+    }
   }
 
   public setHandlerPipe(pipe: IPipeTypes) {
@@ -598,13 +626,13 @@ export class PointCloud extends EventListener {
     const arrow = this.generateBoxArrow(boxParams);
 
     // Temporarily hide
-    const boxID = this.generateBoxTrackID(boxParams);
+    const boxID = this.generateBoxTrackID(boxParams, color);
     if (boxID) {
       group.add(boxID);
     }
 
     // 生成并添加attribute标签
-    const attributeLabel = this.generateBoxAttributeLabel(boxParams);
+    const attributeLabel = this.generateBoxAttributeLabel(boxParams, color);
     if (attributeLabel) {
       group.add(attributeLabel);
     }
@@ -621,9 +649,8 @@ export class PointCloud extends EventListener {
     const clickGeometry = new THREE.BoxGeometry(width, height, depth);
     const clickMaterial = new THREE.MeshBasicMaterial({ visible: false });
     const clickMesh = new THREE.Mesh(clickGeometry, clickMaterial);
-    clickMesh.userData = { selectedID: id };
     group.add(clickMesh);
-
+    group.userData = { defaultColor: color, selectedID: id };
     this.scene.add(group);
   };
 
@@ -1397,8 +1424,7 @@ export class PointCloud extends EventListener {
     const dir = new THREE.Vector3(1, 0, 0);
     const origin = new THREE.Vector3(width / 2, 0, 0);
     const arrowLen = 2;
-    const hex = 0xffff00;
-    const arrowHelper = new THREE.ArrowHelper(dir, origin, arrowLen, hex);
+    const arrowHelper = new THREE.ArrowHelper(dir, origin, arrowLen, this.highlightColor);
     arrowHelper.visible = this.showDirection;
 
     return arrowHelper;
@@ -1410,7 +1436,7 @@ export class PointCloud extends EventListener {
    * @param scaleFactor  scale size
    * @returns  { sprite, canvasWidth, canvasHeight }
    */
-  public generateLabel = (text: string, scaleFactor: number) => {
+  public generateLabel = (text: string, scaleFactor: number, color: THREE.ColorRepresentation) => {
     const canvas = this.getTextCanvas(text);
     const texture = new THREE.Texture(canvas);
 
@@ -1423,7 +1449,7 @@ export class PointCloud extends EventListener {
     const canvasWidth = canvas.width / window.devicePixelRatio;
     const canvasHeight = canvas.height / window.devicePixelRatio;
 
-    const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthWrite: false });
+    const spriteMaterial = new THREE.SpriteMaterial({ map: texture, depthWrite: false, color });
     const sprite = new THREE.Sprite(spriteMaterial);
     sprite.scale.set(canvasWidth / scaleFactor, canvasHeight / scaleFactor, 1);
 
@@ -1435,10 +1461,10 @@ export class PointCloud extends EventListener {
    * @param boxParams
    * @returns sprite
    */
-  public generateBoxTrackID = (boxParams: IPointCloudBox) => {
+  public generateBoxTrackID = (boxParams: IPointCloudBox, color: THREE.ColorRepresentation) => {
     if (!boxParams.trackID) return;
 
-    const { sprite } = this.generateLabel(boxParams.trackID.toString(), 50);
+    const { sprite } = this.generateLabel(boxParams.trackID.toString(), 50, color);
 
     sprite.position.set(-boxParams.width / 2, 0, boxParams.depth / 2 + 0.5);
 
@@ -1450,13 +1476,13 @@ export class PointCloud extends EventListener {
    * @param boxParams
    * @returns sprite
    */
-  public generateBoxAttributeLabel = (boxParams: IPointCloudBox) => {
+  public generateBoxAttributeLabel = (boxParams: IPointCloudBox, color: THREE.ColorRepresentation) => {
     if (!boxParams.attribute || this.hiddenText) return;
 
     const classLabel = this.findSubAttributeLabel(boxParams, this.config);
     const subAttributeLabel = classLabel ? `${boxParams.attribute}\n${classLabel}` : `${boxParams.attribute}`;
 
-    const { sprite, canvasHeight } = this.generateLabel(subAttributeLabel, 100);
+    const { sprite, canvasHeight } = this.generateLabel(subAttributeLabel, 100, color);
 
     sprite.position.set(-boxParams.width / 2, 0, -boxParams.depth / 2 - canvasHeight / 150);
 

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

@@ -85,7 +85,7 @@ const PointCloudAnnotationView = (props: IProps) => {
 
       // Add Init Box
       boxParamsList.forEach((v: IPointCloudBox) => {
-        instance.current?.generateBox(v, v.id);
+        instance.current?.generateBox(v);
       });
     }
     return () => {

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

@@ -250,6 +250,7 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config, highlig
        */
       const zoom = ptCtx.topViewInstance?.pointCloudInstance?.camera.zoom ?? 1;
       ptCtx.mainViewInstance?.updateCameraZoom(zoom);
+      ptCtx.mainViewInstance?.setHighlightColor(selectedId);
     }
   }, [selectedBox?.info?.id]);
 

packages/lb-components/src/components/pointCloudView/hooks/usePointCloudViews.ts

@@ -580,7 +580,7 @@ export const synchronizeTopView = (
   }
 
   // Control the 3D view data to create box
-  mainViewInstance.generateBox(newBoxParams, newPolygon.id);
+  mainViewInstance.generateBox(newBoxParams);
   mainViewInstance.render();
 
   const { pointCloud2dOperation, pointCloudInstance } = topViewInstance;