Add Floor2DInstance component and integrate into FloorInstances for 2D floor rendering

app/src/modules/builder/floor/Instances/Instance/floor2DInstance.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { DoubleSide, Shape, Vector2 } from 'three';
+import { Extrude } from '@react-three/drei';
+import * as Constants from '../../../../../types/world/worldConstants';
+
+function Floor2DInstance({ floor }: { floor: Floor }) {
+    const savedTheme: string | null = localStorage.getItem("theme");
+
+    const shape = useMemo(() => {
+        const shape = new Shape();
+        const points = floor.points.map(p => new Vector2(p.position[0], p.position[2]));
+        if (points.length < 3) return null;
+        shape.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            shape.lineTo(points[i].x, points[i].y);
+        }
+        return shape;
+    }, [floor]);
+
+    if (!shape) return null;
+
+    return (
+        <mesh
+            castShadow
+            receiveShadow
+            name={`Floor-2D-${floor.floorUuid}`}
+            rotation={[Math.PI / 2, 0, 0]}
+            position={[0, 0, 0]}
+            userData={floor}
+        >
+            <Extrude
+                name={`Floor-${floor.floorUuid}`}
+                args={[shape, {
+                    depth: Constants.floorConfig.height,
+                    bevelEnabled: floor.isBeveled,
+                }]}
+                userData={floor}
+            >
+                <meshBasicMaterial
+                    color={savedTheme === "dark" ? "#d2baff" : "#6f42c1"}
+                    side={DoubleSide}
+                    transparent
+                    opacity={0.4}
+                    depthWrite={false}
+                />
+            </Extrude>
+        </mesh>
+    );
+}
+
+export default Floor2DInstance;

app/src/modules/builder/floor/Instances/floorInstances.tsx

@@ -6,6 +6,7 @@ import { useToggleView } from '../../../../store/builder/store';
 import Line from '../../line/line';
 import Point from '../../point/point';
 import FloorInstance from './Instance/floorInstance';
+import Floor2DInstance from './Instance/floor2DInstance';
 
 function FloorInstances() {
     const { floorStore } = useSceneContext();
@@ -69,6 +70,14 @@ function FloorInstances() {
                 </mesh>
             )}
 
+            {toggleView && floors.length > 0 && (
+                <mesh name='Floors-2D-Group'>
+                    {floors.map((floor) => (
+                        <Floor2DInstance key={floor.floorUuid} floor={floor} />
+                    ))}
+                </mesh>
+            )}
+
             {toggleView && (
                 <>
                     <group name='Floor-Points-Group'>