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

import * as THREE from "three";
import { Geometry, Base, Subtraction } from "@react-three/csg";
import { useDeleteTool } 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 { 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);
        }
      });
    }
    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>
  );
};