Refactor code structure for improved readability and maintainability

app/src/components/layout/sidebarRight/properties/FloorProperties.tsx

@@ -4,6 +4,8 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 
 import defaultTexture from '../../../../assets/textures/floor/white.png';
 import flootTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
+import flootTexture2 from '../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg';
+import flootTexture3 from '../../../../assets/textures/floor/tex2/MI_FloorMats01_baseColor.png';
 
 import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 
@@ -13,9 +15,11 @@ type Material = {
     textureName: string;
 };
 
-const materials = [
+export const materials = [
     { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
-    { texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
+    { texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" },
+    { texture: flootTexture2, textureId: "Material 2", textureName: "Tiled Floor" },
+    { texture: flootTexture3, textureId: "Material 3", textureName: "Metal Floor" },
 ];
 
 const FloorProperties = () => {
@@ -30,7 +34,7 @@ const FloorProperties = () => {
             top: materials.find((mat) => mat.textureId === topMaterial) || null,
             side: materials.find((mat) => mat.textureId === sideMaterial) || null,
         });
-    }, []);
+    }, [sideMaterial, topMaterial]);
 
     const handleDepthChange = (val: string) => {
         setFloorDepth(parseFloat(val));

app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx

@@ -2,15 +2,13 @@ import { useEffect, useState } from "react";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import InputToggle from "../../../ui/inputs/InputToggle";
 
-import defaultTexture from '../../../../assets/textures/floor/white.png';
-import floorTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
-
 import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import { useSceneContext } from "../../../../modules/scene/sceneContext";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useSocketStore } from "../../../../store/builder/store";
+import { materials } from "./FloorProperties";
 
 // import { upsertFloorApi } from "../../../../services/factoryBuilder/floor/upsertFloorApi";
 
@@ -29,11 +27,6 @@ const SelectedFloorProperties = () => {
 
     const [activeSurface, setActiveSurface] = useState<"top" | "side">("top");
 
-    const materials = [
-        { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
-        { texture: floorTexture1, textureId: "Material 1", textureName: "Grunge Concrete" }
-    ];
-
     const floor = selectedFloor ? getFloorById(selectedFloor.userData.floorUuid) : null;
 
     useEffect(() => {

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

@@ -1,30 +1,73 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import { Shape, Vector2, DoubleSide, TextureLoader, RepeatWrapping, SRGBColorSpace } from 'three';
+import {
-import { useLoader } from '@react-three/fiber';
+  Shape,
-import { Extrude } from '@react-three/drei';
+  Vector2,
-import useModuleStore from '../../../../../store/useModuleStore';
+  DoubleSide,
-import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
+  TextureLoader,
-import { useToggleView } from '../../../../../store/builder/store';
+  RepeatWrapping,
-import * as Constants from '../../../../../types/world/worldConstants';
+  SRGBColorSpace,
+} from "three";
+import { useLoader } from "@react-three/fiber";
+import { Extrude } from "@react-three/drei";
+import useModuleStore from "../../../../../store/useModuleStore";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
+import { useToggleView } from "../../../../../store/builder/store";
+import * as Constants from "../../../../../types/world/worldConstants";
 
 import texturePath from "../../../../../assets/textures/floor/white.png";
 import texturePathDark from "../../../../../assets/textures/floor/black.png";
-import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
+import material1 from "../../../../../assets/textures/floor/factory wall texture.jpg";
+
+// floor-mat1
+import material2Map from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.png";
+import material2NormalMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg";
+import material2MetallicRoughnessMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_MetallicRoughness.001.jpg";
+
+// floor-mat2
+import material3Map from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_baseColor.png";
+import material3NormalMap from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_Normal.png";
 
 function FloorInstance({ floor }: { floor: Floor }) {
   const { togglView } = useToggleView();
   const { activeModule } = useModuleStore();
-    const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore();
+  const { selectedFloor, setSelectedFloor, setSelectedDecal } =
-    const savedTheme = localStorage.getItem('theme');
+    useBuilderStore();
+  const savedTheme = localStorage.getItem("theme");
 
-    const materials: Record<string, string> = {
+  const materials: Record<
-        "Default Material": savedTheme === "dark" ? texturePathDark : texturePath,
+    string,
-        "Material 1": savedTheme === "dark" ? material1 : material1,
+    {
+      map: string;
+      roughnessMap?: string;
+      metalnessMap?: string;
+      normalMap?: string;
+      textureTileScale?: number;
+    }
+  > = {
+    "Default Material": {
+      map: savedTheme === "dark" ? texturePathDark : texturePath,
+    },
+    "Material 1": {
+      map: material1,
+    },
+    "Material 2": {
+      map: material2Map,
+      roughnessMap: material2MetallicRoughnessMap,
+      metalnessMap: material2MetallicRoughnessMap,
+      normalMap: material2NormalMap,
+      textureTileScale: 0.1,
+    },
+    "Material 3": {
+      map: material3Map,
+      normalMap: material3NormalMap,
+    },
   };
 
   const shape = useMemo(() => {
     const shape = new Shape();
-        const points = floor.points.map(p => new Vector2(p.position[0], p.position[2]));
+    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++) {
@@ -35,19 +78,39 @@ function FloorInstance({ floor }: { floor: Floor }) {
 
   const textureScale = Constants.floorConfig.textureScale;
 
-    const [topTexture, sideTexture] = useLoader(
+  // Helper function to handle texture maps and filter out null values
-        TextureLoader,
+  function getMaterialMaps(material: any, defaultMap: any) {
-        [
+    const materialMap = material.map || defaultMap;
-            materials[floor.topMaterial] || materials['Default Material'],
+    const normalMap = material.normalMap || null;
-            materials[floor.sideMaterial] || materials['Default Material']
+    const roughnessMap = material.roughnessMap || null;
-        ]
+    const metalnessMap = material.metalnessMap || null;
+
+    return [materialMap, normalMap, roughnessMap, metalnessMap].filter(
+      (texture): texture is string => texture !== null
     );
+  }
 
-    if (!materials[floor.topMaterial] || !materials[floor.sideMaterial]) return null;
+  // Default material map
+  const defaultMaterialMap = materials["Default Material"].map;
 
-    [topTexture, sideTexture].forEach(tex => {
+  // Get top and side material maps
+  const topMaterial = materials[floor.topMaterial];
+  const sideMaterial = materials[floor.sideMaterial];
+
+  // Get the filtered lists for top and side textures
+  const topTexturesList = getMaterialMaps(topMaterial, defaultMaterialMap);
+  const sideTexturesList = getMaterialMaps(sideMaterial, defaultMaterialMap);
+
+  // Use loader to load top and side textures
+  const [topTexture] = useLoader(TextureLoader, topTexturesList);
+  const [sideTexture] = useLoader(TextureLoader, sideTexturesList);
+
+  if (!materials[floor.topMaterial] || !materials[floor.sideMaterial])
+    return null;
+  [topTexture, sideTexture].forEach((tex) => {
+    const tileScale = materials[floor.topMaterial].textureTileScale ?? textureScale
     tex.wrapS = tex.wrapT = RepeatWrapping;
-        tex.repeat.set(textureScale, textureScale);
+    tex.repeat.set(tileScale, tileScale);
     tex.colorSpace = SRGBColorSpace;
   });
 
@@ -59,10 +122,14 @@ function FloorInstance({ floor }: { floor: Floor }) {
       receiveShadow
       name={`Floor-${floor.floorUuid}`}
       rotation={[Math.PI / 2, 0, 0]}
-            position={[0, !floor.isBeveled ? (floor.floorDepth - 0.1) : (floor.floorDepth - 0.2), 0]}
+      position={[
+        0,
+        !floor.isBeveled ? floor.floorDepth - 0.1 : floor.floorDepth - 0.2,
+        0,
+      ]}
       userData={floor}
       onDoubleClick={(e) => {
-                if (!togglView && activeModule === 'builder') {
+        if (!togglView && activeModule === "builder") {
           if (e.object.userData.floorUuid) {
             e.stopPropagation();
             setSelectedFloor(e.object);
@@ -71,21 +138,27 @@ function FloorInstance({ floor }: { floor: Floor }) {
         }
       }}
       onPointerMissed={() => {
-                if (selectedFloor && selectedFloor.userData.floorUuid === floor.floorUuid) {
+        if (
+          selectedFloor &&
+          selectedFloor.userData.floorUuid === floor.floorUuid
+        ) {
           setSelectedFloor(null);
         }
       }}
     >
       <Extrude
         name={`Floor-${floor.floorUuid}`}
-                args={[shape, {
+        args={[
-                    depth: !floor.isBeveled ? floor.floorDepth : (floor.floorDepth - 0.1),
+          shape,
+          {
+            depth: !floor.isBeveled ? floor.floorDepth : floor.floorDepth - 0.1,
             bevelEnabled: floor.isBeveled,
             bevelSegments: floor.bevelStrength,
             bevelOffset: -0.1,
             bevelSize: 0.1,
             bevelThickness: 0.1,
-                }]}
+          },
+        ]}
         userData={floor}
       >
         <meshStandardMaterial