add initial components and utility functions for simulation and builder modules

app/src/modules/builder/csg/csg.tsx

@@ -0,0 +1,54 @@
+import * as THREE from "three";
+import { Geometry, Base, Subtraction } from "@react-three/csg";
+import { useDeleteModels } from "../../../store/store";
+import { useRef } from "react";
+
+export interface CsgProps {
+  position: THREE.Vector3 | [number, number, number];
+  scale: THREE.Vector3 | [number, number, number];
+  model: THREE.Object3D;
+  hoveredDeletableWallItem: { current: THREE.Mesh | null };
+}
+
+export const Csg: React.FC<CsgProps> = (props) => {
+  const { deleteModels } = useDeleteModels();
+  const modelRef = useRef<THREE.Object3D>();
+  const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
+
+  const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
+    if (modelRef.current && deleteModels) {
+      modelRef.current.traverse((child) => {
+        if (child instanceof THREE.Mesh) {
+          if (!originalMaterials.current.has(child)) {
+            originalMaterials.current.set(child, child.material);
+          }
+          child.material = child.material.clone();
+          child.material.color.set(hovered && deleteModels ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
+        }
+      });
+    }
+    props.hoveredDeletableWallItem.current = hovered ? object : null;
+  };
+
+  return (
+    <Geometry>
+      <Subtraction {...props}>
+        <Geometry>
+          <Base geometry={new THREE.BoxGeometry()} />
+        </Geometry>
+      </Subtraction>
+      <primitive
+        object={props.model}
+        ref={modelRef}
+        onPointerOver={(e: any) => {
+          e.stopPropagation();
+          handleHover(true, e.object.parent);
+        }}
+        onPointerOut={(e: any) => {
+          e.stopPropagation();
+          handleHover(false, null);
+        }}
+      />
+    </Geometry>
+  );
+};