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) {