diff --git a/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx b/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx
index e549b1d..d1d3cfd 100644
--- a/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx
+++ b/app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx
@@ -3,60 +3,96 @@ import { useMemo } from "react";
import * as THREE from "three";
import { useSelectedAssets } from "../../../../store/builder/store";
-const BoundingBox = ({ boundingBoxRef }: any) => {
+interface BoundingBoxProps {
+ boundingBoxRef?: any;
+ isPerAsset?: boolean;
+}
+
+const getBoxLines = (min: THREE.Vector3, max: THREE.Vector3) => [
+ [min.x, min.y, min.z], [max.x, min.y, min.z],
+ [max.x, min.y, min.z], [max.x, max.y, min.z],
+ [max.x, max.y, min.z], [min.x, max.y, min.z],
+ [min.x, max.y, min.z], [min.x, min.y, min.z],
+
+ [min.x, min.y, max.z], [max.x, min.y, max.z],
+ [max.x, min.y, max.z], [max.x, max.y, max.z],
+ [max.x, max.y, max.z], [min.x, max.y, max.z],
+ [min.x, max.y, max.z], [min.x, min.y, max.z],
+
+ [min.x, min.y, min.z], [min.x, min.y, max.z],
+ [max.x, min.y, min.z], [max.x, min.y, max.z],
+ [max.x, max.y, min.z], [max.x, max.y, max.z],
+ [min.x, max.y, min.z], [min.x, max.y, max.z],
+];
+
+const BoundingBox = ({ boundingBoxRef, isPerAsset = true }: BoundingBoxProps) => {
const { selectedAssets } = useSelectedAssets();
+ const savedTheme: string = localStorage.getItem("theme") || "light";
- const { points, boxProps } = useMemo(() => {
- if (selectedAssets.length === 0) return { points: [], boxProps: {} };
+ const boxes = useMemo(() => {
+ if (selectedAssets.length === 0) return [];
- const box = new THREE.Box3();
- selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));
+ if (isPerAsset) {
+ return selectedAssets.map((obj: any) => {
+ const box = new THREE.Box3().setFromObject(obj.clone());
+ const size = new THREE.Vector3();
+ const center = new THREE.Vector3();
+ box.getSize(size);
+ box.getCenter(center);
- const size = new THREE.Vector3();
- box.getSize(size);
- const center = new THREE.Vector3();
- box.getCenter(center);
+ const halfSize = size.clone().multiplyScalar(0.5);
+ const min = center.clone().sub(halfSize);
+ const max = center.clone().add(halfSize);
- const halfSize = size.clone().multiplyScalar(0.5);
- const min = center.clone().sub(halfSize);
- const max = center.clone().add(halfSize);
+ return {
+ points: getBoxLines(min, max),
+ position: center.toArray(),
+ size: size.toArray(),
+ };
+ });
+ } else {
+ const box = new THREE.Box3();
+ selectedAssets.forEach((obj: any) => box.expandByObject(obj.clone()));
+ const size = new THREE.Vector3();
+ const center = new THREE.Vector3();
+ box.getSize(size);
+ box.getCenter(center);
- const points: any = [
- [min.x, min.y, min.z], [max.x, min.y, min.z],
- [max.x, min.y, min.z], [max.x, max.y, min.z],
- [max.x, max.y, min.z], [min.x, max.y, min.z],
- [min.x, max.y, min.z], [min.x, min.y, min.z],
+ const halfSize = size.clone().multiplyScalar(0.5);
+ const min = center.clone().sub(halfSize);
+ const max = center.clone().add(halfSize);
- [min.x, min.y, max.z], [max.x, min.y, max.z],
- [max.x, min.y, max.z], [max.x, max.y, max.z],
- [max.x, max.y, max.z], [min.x, max.y, max.z],
- [min.x, max.y, max.z], [min.x, min.y, max.z],
-
- [min.x, min.y, min.z], [min.x, min.y, max.z],
- [max.x, min.y, min.z], [max.x, min.y, max.z],
- [max.x, max.y, min.z], [max.x, max.y, max.z],
- [min.x, max.y, min.z], [min.x, max.y, max.z],
- ];
-
- return {
- points,
- boxProps: { position: center.toArray(), args: size.toArray() }
- };
- }, [selectedAssets]);
-
- const savedTheme: string | null = localStorage.getItem("theme") || "light";
+ return [
+ {
+ points: getBoxLines(min, max),
+ position: center.toArray(),
+ size: size.toArray(),
+ },
+ ];
+ }
+ }, [selectedAssets, isPerAsset]);
return (
<>
- {points.length > 0 && (
- <>
-
-
-
+ {boxes.map((box: any, index: number) => (
+
+
+
+
- >
- )}
+
+ ))}
>
);
};
diff --git a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
index 2dcd775..477fc98 100644
--- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
@@ -158,7 +158,7 @@ const SelectionControls: React.FC = () => {
let selectedObjects = selectionBox.select();
let Objects = new Set();
- selectedObjects.map((object) => {
+ selectedObjects.forEach((object) => {
let currentObject: THREE.Object3D | null = object;
while (currentObject) {
if (currentObject.userData.modelUuid) {