object selection

webclient/src/components/layers/SceneEditor/SelectionBoundingBox.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import type { ObjectGeometryViewItem } from "../../../state/viewLayers";
+
+export const SelectionBoundingBox = 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>;
+};