refactor: Update selectedObjects iteration method in SelectionControls
This commit is contained in:
parent
d3ea36d1ba
commit
e26de7e651
|
@ -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 && (
|
||||
<>
|
||||
<Line depthWrite={false} points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
|
||||
<mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
|
||||
<boxGeometry args={boxProps.args} />
|
||||
{boxes.map((box: any, index: number) => (
|
||||
<group key={index}>
|
||||
<Line
|
||||
depthWrite={false}
|
||||
points={box.points}
|
||||
color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"}
|
||||
lineWidth={2.7}
|
||||
segments
|
||||
/>
|
||||
<mesh
|
||||
ref={index === 0 ? boundingBoxRef : null}
|
||||
visible={false}
|
||||
position={box.position}
|
||||
>
|
||||
<boxGeometry args={box.size} />
|
||||
<meshBasicMaterial />
|
||||
</mesh>
|
||||
</>
|
||||
)}
|
||||
</group>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -158,7 +158,7 @@ const SelectionControls: React.FC = () => {
|
|||
let selectedObjects = selectionBox.select();
|
||||
let Objects = new Set<THREE.Object3D>();
|
||||
|
||||
selectedObjects.map((object) => {
|
||||
selectedObjects.forEach((object) => {
|
||||
let currentObject: THREE.Object3D | null = object;
|
||||
while (currentObject) {
|
||||
if (currentObject.userData.modelUuid) {
|
||||
|
|
Loading…
Reference in New Issue