Refactor Bounding Box Logic (#555)

* Refactor bounding box logic

* Update packages/base/src/3dview/mainview.tsx

Co-authored-by: Duc Trung Le <[email protected]>

---------

Co-authored-by: Duc Trung Le <[email protected]>

Author: arjxn-py

packages/base/src/3dview/helpers.ts

@@ -251,6 +251,21 @@ export function buildShape(options: {
     edgeIdx++;
   }
 
+  const bbox = new THREE.Box3().setFromObject(mainMesh);
+  const size = new THREE.Vector3();
+  bbox.getSize(size);
+  const center = new THREE.Vector3();
+  bbox.getCenter(center);
+
+  const boundingBox = new THREE.LineSegments(
+    new THREE.EdgesGeometry(new THREE.BoxGeometry(size.x, size.y, size.z)),
+    new THREE.LineBasicMaterial({ color: BOUNDING_BOX_COLOR, depthTest: false })
+  );
+  boundingBox.position.copy(center);
+  boundingBox.visible = false;
+  boundingBox.name = SELECTION_BOUNDING_BOX;
+  meshGroup.add(boundingBox);
+
   meshGroup.add(mainMesh);
 
   return { meshGroup, mainMesh, edgesMeshes };

packages/base/src/3dview/mainview.tsx

@@ -1032,11 +1032,14 @@ export class MainView extends React.Component<IProps, IStates> {
         selectedMesh.material.color = originalColor;
       }
 
-      const groupBoundingBox = this._meshGroup?.getObjectByName(
+      const parentGroup = this._meshGroup?.getObjectByName(
+        selectedMesh.name
+      )?.parent;
+      const boundingBox = parentGroup?.getObjectByName(
         SELECTION_BOUNDING_BOX
-      );
-      if (groupBoundingBox) {
-        this._meshGroup?.remove(groupBoundingBox);
+      ) as THREE.Mesh;
+      if (boundingBox) {
+        boundingBox.visible = false;
       }
 
       const material = selectedMesh.material as THREE.Material & {
@@ -1058,6 +1061,10 @@ export class MainView extends React.Component<IProps, IStates> {
         continue;
       }
 
+      if (!selectedMesh.visible) {
+        continue;
+      }
+
       if (selectedMesh.name.startsWith('edge')) {
         // Highlight edges using the old method
         if (!selectedMesh.userData.originalColor) {
@@ -1080,29 +1087,16 @@ export class MainView extends React.Component<IProps, IStates> {
         // Highlight non-edges using a bounding box
         this._selectedMeshes.push(selectedMesh);
 
-        // Create and add bounding box
-        const geometry = new THREE.BoxGeometry(1, 1, 1);
-        const material = new THREE.LineBasicMaterial({
-          color: BOUNDING_BOX_COLOR,
-          depthTest: false
-        });
-        const boundingBox = new THREE.LineSegments(
-          new THREE.EdgesGeometry(geometry),
-          material
-        );
-        boundingBox.name = SELECTION_BOUNDING_BOX;
-
-        // Set the bounding box size and position
-        const bbox = new THREE.Box3().setFromObject(selectedMesh);
-        const size = new THREE.Vector3();
-        bbox.getSize(size);
-        boundingBox.scale.copy(size);
+        const parentGroup = this._meshGroup?.getObjectByName(
+          selectedMesh.name
+        )?.parent;
+        const boundingBox = parentGroup?.getObjectByName(
+          SELECTION_BOUNDING_BOX
+        ) as THREE.Mesh;
 
-        const center = new THREE.Vector3();
-        bbox.getCenter(center);
-        boundingBox.position.copy(center);
-
-        this._meshGroup?.add(boundingBox);
+        if (boundingBox) {
+          boundingBox.visible = true;
+        }
       }
     }
   }