46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useMemo } from "react";
|
|
import * as THREE from "three";
|
|
import { observer } from "mobx-react-lite";
|
|
import type { ObjectGeometryViewItem } from "../../../state/viewLayers";
|
|
|
|
export const SelectionBoundingBox = observer(function({ item }: { item: ObjectGeometryViewItem }) {
|
|
const obj = item.object;
|
|
const bb = item.objectTypeGeometry.boundingBox;
|
|
|
|
const geometry = useMemo(() => {
|
|
if (!bb)
|
|
return undefined;
|
|
|
|
const box = new THREE.BoxGeometry(
|
|
bb.max[0] - bb.min[0],
|
|
bb.max[1] - bb.min[1],
|
|
bb.max[2] - bb.min[2],
|
|
);
|
|
return new THREE.EdgesGeometry(box);
|
|
}, [bb]);
|
|
|
|
const center = useMemo(() => {
|
|
if (!bb)
|
|
return [0.5, 0.5, 0.5] as const;
|
|
|
|
return [
|
|
(bb.min[0] + bb.max[0]) / 2,
|
|
(bb.min[1] + bb.max[1]) / 2,
|
|
(bb.min[2] + bb.max[2]) / 2,
|
|
] as const;
|
|
}, [bb]);
|
|
|
|
if (!geometry)
|
|
return null;
|
|
|
|
return <mesh
|
|
position={obj.position}
|
|
rotation={obj.rotation}
|
|
scale={obj.scale}
|
|
>
|
|
<lineSegments position={center} geometry={geometry}>
|
|
<lineBasicMaterial color="#ffff00" />
|
|
</lineSegments>
|
|
</mesh>;
|
|
});
|