diff --git a/app/package-lock.json b/app/package-lock.json index 7bb6a97..5da4733 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2026,7 +2026,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2038,7 +2038,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4180,25 +4180,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4310,25 +4291,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -9082,7 +9063,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9959,7 +9940,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15343,7 +15324,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20820,7 +20801,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20863,7 +20844,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20875,7 +20856,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21371,7 +21352,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22430,7 +22411,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/package.json b/app/package.json index a6683aa..16c4ac0 100644 --- a/app/package.json +++ b/app/package.json @@ -52,9 +52,7 @@ "prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js", "start": "react-scripts start", "build": "GENERATE_SOURCEMAP=false react-scripts build", - "test": "jest", - "cypress:open": "cypress open", - "cypress:run": "cypress run" + "test": "jest" }, "eslintConfig": { "extends": [ diff --git a/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg new file mode 100644 index 0000000..6f7991e Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg differ diff --git a/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.png b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.png new file mode 100644 index 0000000..f3f3248 Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.png differ 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_MetallicRoughness.001.jpg b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_MetallicRoughness.001.jpg new file mode 100644 index 0000000..e181405 Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_MetallicRoughness.001.jpg differ diff --git a/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg new file mode 100644 index 0000000..462c044 Binary files /dev/null and b/app/src/assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg 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_Normal.png b/app/src/assets/textures/floor/tex2/MI_FloorMats01_Normal.png new file mode 100644 index 0000000..b10551b Binary files /dev/null and b/app/src/assets/textures/floor/tex2/MI_FloorMats01_Normal.png differ diff --git a/app/src/assets/textures/floor/tex2/MI_FloorMats01_baseColor.png b/app/src/assets/textures/floor/tex2/MI_FloorMats01_baseColor.png new file mode 100644 index 0000000..cf12929 Binary files /dev/null and b/app/src/assets/textures/floor/tex2/MI_FloorMats01_baseColor.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..cc84470 Binary files /dev/null and b/app/src/assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png differ diff --git a/app/src/assets/textures/floor/tex3/metal_plate_diff_1k.jpg b/app/src/assets/textures/floor/tex3/metal_plate_diff_1k.jpg new file mode 100644 index 0000000..e3da12a Binary files /dev/null and b/app/src/assets/textures/floor/tex3/metal_plate_diff_1k.jpg differ diff --git a/app/src/assets/textures/floor/tex3/metal_plate_metal_1k.png b/app/src/assets/textures/floor/tex3/metal_plate_metal_1k.png new file mode 100644 index 0000000..5d7594e Binary files /dev/null and b/app/src/assets/textures/floor/tex3/metal_plate_metal_1k.png differ diff --git a/app/src/assets/textures/floor/tex3/metal_plate_nor_gl_1k.png b/app/src/assets/textures/floor/tex3/metal_plate_nor_gl_1k.png new file mode 100644 index 0000000..aa89562 Binary files /dev/null and b/app/src/assets/textures/floor/tex3/metal_plate_nor_gl_1k.png differ diff --git a/app/src/assets/textures/floor/tex3/metal_plate_rough_1k.png b/app/src/assets/textures/floor/tex3/metal_plate_rough_1k.png new file mode 100644 index 0000000..f454a84 Binary files /dev/null and b/app/src/assets/textures/floor/tex3/metal_plate_rough_1k.png differ diff --git a/app/src/assets/textures/hdr/autoshop_01_1k.hdr b/app/src/assets/textures/hdr/autoshop_01_1k.hdr new file mode 100644 index 0000000..3abce56 Binary files /dev/null and b/app/src/assets/textures/hdr/autoshop_01_1k.hdr differ diff --git a/app/src/assets/textures/hdr/empty_warehouse_01_1k.hdr b/app/src/assets/textures/hdr/empty_warehouse_01_1k.hdr new file mode 100644 index 0000000..5066e1e Binary files /dev/null and b/app/src/assets/textures/hdr/empty_warehouse_01_1k.hdr differ diff --git a/app/src/assets/textures/hdr/industrial_pipe_and_valve_01_1k.hdr b/app/src/assets/textures/hdr/industrial_pipe_and_valve_01_1k.hdr new file mode 100644 index 0000000..d9e9bcb Binary files /dev/null and b/app/src/assets/textures/hdr/industrial_pipe_and_valve_01_1k.hdr differ diff --git a/app/src/assets/textures/hdr/machine_shop_02_1k.hdr b/app/src/assets/textures/hdr/machine_shop_02_1k.hdr new file mode 100644 index 0000000..22c4758 Binary files /dev/null and b/app/src/assets/textures/hdr/machine_shop_02_1k.hdr differ diff --git a/app/src/components/layout/sidebarRight/properties/FloorProperties.tsx b/app/src/components/layout/sidebarRight/properties/FloorProperties.tsx index 41e8d41..c5938f7 100644 --- a/app/src/components/layout/sidebarRight/properties/FloorProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/FloorProperties.tsx @@ -4,6 +4,9 @@ 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 flootTexture4 from '../../../../assets/textures/floor/tex3/metal_plate_diff_1k.jpg'; import { useBuilderStore } from "../../../../store/builder/useBuilderStore"; @@ -13,9 +16,12 @@ 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" }, + { texture: flootTexture4, textureId: "Material 4", textureName: "Metal Floor 2" }, ]; const FloorProperties = () => { @@ -30,7 +36,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)); diff --git a/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx index 8df2a88..21fbdc7 100644 --- a/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx +++ b/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(() => { diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx index ab9434b..d340a35 100644 --- a/app/src/modules/builder/builder.tsx +++ b/app/src/modules/builder/builder.tsx @@ -95,7 +95,7 @@ export default function Builder() { - + {/* @@ -103,7 +103,7 @@ export default function Builder() { - + */} @@ -113,9 +113,9 @@ export default function Builder() { - + {/* */} - + {/* */} diff --git a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx index c6c8139..419c1d8 100644 --- a/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx +++ b/app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx @@ -1,108 +1,247 @@ -import { useMemo } from 'react'; -import { Shape, Vector2, DoubleSide, TextureLoader, RepeatWrapping, 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 { useMemo } from "react"; +import { + Shape, + Vector2, + DoubleSide, + TextureLoader, + RepeatWrapping, + SRGBColorSpace, + NoColorSpace, +} 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.jpg"; +import material2NormalMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.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"; + +// floor-mat3 +import material4Map from "../../../../../assets/textures/floor/tex3/metal_plate_diff_1k.jpg"; +import material4RoughnessMap from "../../../../../assets/textures/floor/tex3/metal_plate_rough_1k.png"; +import material4MetalicMap from "../../../../../assets/textures/floor/tex3/metal_plate_metal_1k.png"; +import material4NormalMap from "../../../../../assets/textures/floor/tex3/metal_plate_nor_gl_1k.png"; function FloorInstance({ floor }: { floor: Floor }) { - const { togglView } = useToggleView(); - const { activeModule } = useModuleStore(); - const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore(); - const savedTheme = localStorage.getItem('theme'); + const { togglView } = useToggleView(); + const { activeModule } = useModuleStore(); + const { selectedFloor, setSelectedFloor, setSelectedDecal } = + useBuilderStore(); + const savedTheme = localStorage.getItem("theme"); - const materials: Record = { - "Default Material": savedTheme === "dark" ? texturePathDark : texturePath, - "Material 1": savedTheme === "dark" ? material1 : material1, - }; + const materials: Record< + string, + { + map: string; + roughnessMap?: string; + metalnessMap?: string; + normalMap?: string; + textureTileScale?: [number, number]; + } + > = { + "Default Material": { + map: savedTheme === "dark" ? texturePathDark : texturePath, + }, + "Material 1": { + map: material1, + }, + "Material 2": { + map: material2Map, + roughnessMap: material2MetalicRoughnessMap, + metalnessMap: material2MetalicRoughnessMap, + normalMap: material2NormalMap, + textureTileScale: [0.1, 0.1], + }, + "Material 3": { + map: material3Map, + roughnessMap: material3MetalicRoughnessMap, + metalnessMap: material3MetalicRoughnessMap, + normalMap: material3NormalMap, + textureTileScale: [0.35, 0.5], + }, + "Material 4": { + map: material4Map, + roughnessMap: material4RoughnessMap, + metalnessMap: material4MetalicMap, + normalMap: material4NormalMap, + }, + }; - 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]); - - const textureScale = Constants.floorConfig.textureScale; - - const [topTexture, sideTexture] = useLoader( - TextureLoader, - [ - materials[floor.topMaterial] || materials['Default Material'], - materials[floor.sideMaterial] || materials['Default Material'] - ] + 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 (!materials[floor.topMaterial] || !materials[floor.sideMaterial]) return null; + const textureScale = Constants.floorConfig.textureScale; - [topTexture, sideTexture].forEach(tex => { - tex.wrapS = tex.wrapT = RepeatWrapping; - tex.repeat.set(textureScale, textureScale); - tex.colorSpace = SRGBColorSpace; + // Helper function to handle texture maps and filter out null values + function getMaterialMaps(material: any, defaultMap: any) { + const materialMap = material.map || defaultMap; + const normalMap = material.normalMap || null; + const roughnessMap = material.roughnessMap || null; + const metalnessMap = material.metalnessMap || null; + + return [materialMap, normalMap, roughnessMap, metalnessMap].filter( + (texture): texture is string => texture !== null + ); + } + + // Default material map + const defaultMaterialMap = materials["Default Material"].map; + + // 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, topNormalTexture, topRoughnessTexture, topMetalicTexture] = + useLoader(TextureLoader, topTexturesList); + + 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, + textureScale, + ]; + + textures.forEach((tex, idx) => { + if (!tex) return; + tex.wrapS = tex.wrapT = RepeatWrapping; + tex.repeat.set(tileScale[0], tileScale[1]); + tex.anisotropy = 16; + // First texture is always the color map (use SRGB), others should be linear + tex.colorSpace = idx < 1 ? SRGBColorSpace : NoColorSpace; }); + }); - if (!shape) return null; + if (!shape) return null; - return ( - { - if (!togglView && activeModule === 'builder') { - if (e.object.userData.floorUuid) { - e.stopPropagation(); - setSelectedFloor(e.object); - setSelectedDecal(null); - } - } - }} - onPointerMissed={() => { - if (selectedFloor && selectedFloor.userData.floorUuid === floor.floorUuid) { - setSelectedFloor(null); - } - }} - > - - - - - - ); + return ( + { + if (!togglView && activeModule === "builder") { + if (e.object.userData.floorUuid) { + e.stopPropagation(); + setSelectedFloor(e.object); + setSelectedDecal(null); + } + } + }} + onPointerMissed={() => { + if ( + selectedFloor && + selectedFloor.userData.floorUuid === floor.floorUuid + ) { + setSelectedFloor(null); + } + }} + > + + + + + + ); } -export default FloorInstance; \ No newline at end of file +export default FloorInstance; diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx index 297a4c2..3b96455 100644 --- a/app/src/modules/scene/postProcessing/postProcessing.tsx +++ b/app/src/modules/scene/postProcessing/postProcessing.tsx @@ -1,4 +1,4 @@ -import { DepthOfField, EffectComposer, GodRays, N8AO, Outline } from "@react-three/postprocessing"; +import { DepthOfField, Bloom, EffectComposer, N8AO, Outline } from "@react-three/postprocessing"; import { useThree } from "@react-three/fiber"; import { BlendFunction } from "postprocessing"; import { @@ -84,6 +84,12 @@ export default function PostProcessing() { focalLength={0.15} bokehScale={2} /> + {selectedWallAsset && ( [ @@ -52,6 +52,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co }).catch((err) => { console.error(err); }); + // eslint-disable-next-line }, [activeModule, assets, loadingProgress]) return ( @@ -68,7 +69,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co onCreated={(e) => { e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d); }} - gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }} + gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }} > @@ -79,4 +80,4 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co ); -} \ No newline at end of file +} diff --git a/app/src/modules/scene/setup/setup.tsx b/app/src/modules/scene/setup/setup.tsx index 431b192..71dcce7 100644 --- a/app/src/modules/scene/setup/setup.tsx +++ b/app/src/modules/scene/setup/setup.tsx @@ -5,6 +5,7 @@ import Controls from '../controls/controls'; import { AdaptiveDpr, AdaptiveEvents, Environment } from '@react-three/drei' import background from "../../../assets/textures/hdr/mudroadpuresky2k.hdr"; +// import { Perf } from 'r3f-perf'; function Setup() { return ( @@ -17,6 +18,8 @@ function Setup() { + {/* */} + {/* */} @@ -28,4 +31,4 @@ function Setup() { ) } -export default Setup; \ No newline at end of file +export default Setup; diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index 1ab5888..4db9e8b 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -74,10 +74,10 @@ border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); } - .upload-btn{ + .upload-btn { padding: 4px 16px !important; } - .generate-walls-btn{ + .generate-walls-btn { padding: 4px 16px; @include flex-center; gap: 4px; @@ -117,9 +117,20 @@ } } } - - } -.label-toogler.bottom{ +.label-toogler.bottom { bottom: 32%; } + +.scene-performance-stats { + bottom: 36px !important; + left: 12px !important; + border-radius: 6px; + backdrop-filter: blur(4px); + svg { + display: none; + } + .c-jiwtRJ{ + align-items: center; + } +} diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index 0764fd2..ffd9ddf 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -245,8 +245,12 @@ const KeyPressListener: React.FC = () => { if (keyCombination === "Ctrl+Shift+?") { setShowShortcuts(!showShortcuts); } + + // if (keyCombination === "Ctrl+Shift+P") { + // pref + // } + if (keyCombination === "U") { - // console.log("viewSceneLabels: ", viewSceneLabels); setViewSceneLabels((prev) => !prev); }