diff --git a/app/src/modules/builder/wall/Instances/instance/helpers/useWallClassification.ts b/app/src/modules/builder/wall/Instances/instance/helpers/useWallClassification.ts index 00b7eaa..5ae9a21 100644 --- a/app/src/modules/builder/wall/Instances/instance/helpers/useWallClassification.ts +++ b/app/src/modules/builder/wall/Instances/instance/helpers/useWallClassification.ts @@ -120,7 +120,6 @@ export function useWallClassification(walls: Walls) { } }); - console.log('rooms: ', rooms); return rooms; }; diff --git a/app/src/modules/builder/wall/Instances/wallInstances.tsx b/app/src/modules/builder/wall/Instances/wallInstances.tsx index eacf943..37f07e0 100644 --- a/app/src/modules/builder/wall/Instances/wallInstances.tsx +++ b/app/src/modules/builder/wall/Instances/wallInstances.tsx @@ -1,15 +1,22 @@ import React, { useEffect, useMemo } from 'react'; +import { DoubleSide, RepeatWrapping, Shape, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from 'three'; +import { Geometry } from '@react-three/csg'; +import { Html, Extrude } from '@react-three/drei'; import { useWallStore } from '../../../../store/builder/useWallStore' -import WallInstance from './instance/wallInstance'; +import { useWallClassification } from './instance/helpers/useWallClassification'; +import { useToggleView } from '../../../../store/builder/store'; import Line from '../../line/line'; import Point from '../../point/point'; -import { useToggleView } from '../../../../store/builder/store'; -import { Geometry } from '@react-three/csg'; -import { Vector3 } from 'three'; -import { Html } from '@react-three/drei'; +import WallInstance from './instance/wallInstance'; +import * as Constants from '../../../../types/world/worldConstants'; + +import texturePath from "../../../../assets/textures/floor/white.png"; +import texturePathDark from "../../../../assets/textures/floor/black.png"; +import { useLoader } from '@react-three/fiber'; function WallInstances() { const { walls } = useWallStore(); + const { rooms } = useWallClassification(walls) const { toggleView } = useToggleView(); useEffect(() => { @@ -34,15 +41,22 @@ function WallInstances() { return ( <> - {!toggleView && ( - - - {walls.map((wall) => ( - + <> + + + {walls.map((wall) => ( + + ))} + + + + + {rooms.map((room, index) => ( + ))} - - + + )} {toggleView && ( @@ -97,4 +111,36 @@ function WallInstances() { ) } -export default WallInstances +export default WallInstances; + +function Floor({ room }: { room: Point[] }) { + const savedTheme: string | null = localStorage.getItem('theme'); + const textureScale = Constants.floorConfig.textureScale; + const floorTexture = useLoader(TextureLoader, savedTheme === "dark" ? texturePathDark : texturePath); + floorTexture.wrapS = floorTexture.wrapT = RepeatWrapping; + floorTexture.repeat.set(textureScale, textureScale); + floorTexture.colorSpace = SRGBColorSpace; + + const shape = useMemo(() => { + const shape = new Shape(); + const points = room.map(p => new Vector2(p.position[0], p.position[2])); + if (points.length < 3) return null; + shape.moveTo(points[0].x, points[0].y); + points.forEach((pt) => { shape.lineTo(pt.x, pt.y); }); + return shape; + }, [room]); + + if (!shape) return null; + + return ( + + + + + + ); +} diff --git a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx index e263571..61af916 100644 --- a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx +++ b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx @@ -243,7 +243,7 @@ function WallCreator() { canvasElement.removeEventListener("click", onMouseClick); canvasElement.removeEventListener("contextmenu", onContext); }; - }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addWall, getWallPointById, snappedPosition, snappedPoint]); + }, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addWall, getWallPointById, wallThickness, wallHeight, insideMaterial, outsideMaterial, snappedPosition, snappedPoint]); return ( <>