first commit

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

@@ -0,0 +1,63 @@
+import * as THREE from "three";
+import { Geometry, Base, Subtraction } from "@react-three/csg";
+import { useDeleteTool } from "../../../store/builder/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 { deleteTool } = useDeleteTool();
+    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 && deleteTool) {
+            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 && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
+                }
+            });
+        }
+        let currentObject = object;
+        while (currentObject) {
+            if (currentObject.name === "Scene") {
+                break;
+            }
+            currentObject = currentObject.parent as THREE.Mesh;
+        }
+        if (currentObject) {
+            props.hoveredDeletableWallItem.current = hovered ? currentObject : 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>
+    );
+};