diff --git a/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Metalic.001.png b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Metalic.001.png new file mode 100644 index 0000000..48cc96b Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Metalic.001.png differ diff --git a/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Roughness.png b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Roughness.png new file mode 100644 index 0000000..c3af94e Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Roughness.png differ diff --git a/app/src/assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png b/app/src/assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png new file mode 100644 index 0000000..6634cfb Binary files /dev/null and b/app/src/assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png differ diff --git a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx index 718a798..a8fc1c1 100644 --- a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx +++ b/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} />