Refactor code structure for improved readability and maintainability

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

@@ -6,6 +6,7 @@ import {
   TextureLoader,
   RepeatWrapping,
   SRGBColorSpace,
+  NoColorSpace,
 } from "three";
 import { useLoader } from "@react-three/fiber";
 import { Extrude } from "@react-three/drei";
@@ -19,13 +20,14 @@ import texturePathDark from "../../../../../assets/textures/floor/black.png";
 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 material2Map from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg";
 import material2NormalMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg";
-import material2MetallicRoughnessMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_MetallicRoughness.001.jpg";
+import material2MetalicRoughnessMap 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";
+import material3MetalicRoughnessMap from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png";
 
 function FloorInstance({ floor }: { floor: Floor }) {
   const { togglView } = useToggleView();
@@ -52,13 +54,15 @@ function FloorInstance({ floor }: { floor: Floor }) {
     },
     "Material 2": {
       map: material2Map,
-      roughnessMap: material2MetallicRoughnessMap,
-      metalnessMap: material2MetallicRoughnessMap,
+      roughnessMap: material2MetalicRoughnessMap,
+      metalnessMap: material2MetalicRoughnessMap,
       normalMap: material2NormalMap,
       textureTileScale: 0.1,
     },
     "Material 3": {
       map: material3Map,
+      roughnessMap: material3MetalicRoughnessMap,
+      metalnessMap: material3MetalicRoughnessMap,
       normalMap: material3NormalMap,
     },
   };
@@ -102,18 +106,37 @@ function FloorInstance({ floor }: { floor: Floor }) {
   const sideTexturesList = getMaterialMaps(sideMaterial, defaultMaterialMap);
 
   // Use loader to load top and side textures
-  const [topTexture] = useLoader(TextureLoader, topTexturesList);
-  const [sideTexture] = useLoader(TextureLoader, sideTexturesList);
+  const [
+    topTexture, topNormalTexture, topRoughnessTexture, topMetalicTexture,
+  ] = useLoader(TextureLoader, topTexturesList);
 
-  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(tileScale, tileScale);
-    tex.colorSpace = SRGBColorSpace;
+  const [
+    sideTexture, sideNormalTexture, sideRoughnessTexture, sideMetalicTexture,
+  ] = useLoader(TextureLoader, sideTexturesList);
+
+  // Early exit if materials are missing
+  if (!materials[floor.topMaterial] || !materials[floor.sideMaterial]) return null;
+
+  // Combine and pair textures with their corresponding material
+  const textureMaterialMap = [
+    { textures: [topTexture, topNormalTexture, topRoughnessTexture, topMetalicTexture], materialKey: floor.topMaterial },
+    { textures: [sideTexture, sideNormalTexture, sideRoughnessTexture, sideMetalicTexture], materialKey: floor.sideMaterial },
+  ];
+
+  // Apply texture settings
+  textureMaterialMap.forEach(({ textures, materialKey }) => {
+    const tileScale = materials[materialKey]?.textureTileScale ?? textureScale;
+
+    textures.forEach((tex, idx) => {
+      if (!tex) return;
+      tex.wrapS = tex.wrapT = RepeatWrapping;
+      tex.repeat.set(tileScale, tileScale);
+      // First texture is always the color map (use SRGB), others should be linear
+      tex.colorSpace = idx < 1 ? SRGBColorSpace : NoColorSpace;
+    });
   });
 
+
   if (!shape) return null;
 
   return (
@@ -165,12 +188,20 @@ function FloorInstance({ floor }: { floor: Floor }) {
           attach="material-0"
           color={Constants.floorConfig.defaultColor}
           map={topTexture}
+          roughnessMap={topRoughnessTexture}
+          metalnessMap={topMetalicTexture}
+          normalMap={topNormalTexture}
+          roughness={1.0}
+          metalness={1.0}
           side={DoubleSide}
         />
         <meshStandardMaterial
           attach="material-1"
           color={Constants.floorConfig.defaultColor}
-          map={sideTexture}
+          map={sideTexture?.clone()}
+          roughnessMap={sideRoughnessTexture?.clone()}
+          metalnessMap={sideMetalicTexture?.clone()}
+          normalMap={sideNormalTexture?.clone()}
           side={DoubleSide}
         />
       </Extrude>