feat: add functionality to create additional walls when no temporary points are present

This commit is contained in:
Jerald-Golden-B 2025-06-18 11:38:35 +05:30
parent 4c20db213a
commit e90a67e97f
4 changed files with 42 additions and 28 deletions

View File

@ -120,6 +120,7 @@ export function useWallClassification(walls: Walls) {
}
});
console.log('rooms: ', rooms);
return rooms;
};

View File

@ -54,12 +54,11 @@ function Wall({ wall }: { readonly wall: Wall }) {
}, [wallLength, wall.wallHeight]);
const materials = useMemo(() => {
return [
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide }), // Left
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide }), // Right
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide }), // Top
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide }), // Bottom
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Left
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Right
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Top
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Bottom
new THREE.MeshStandardMaterial({
color: Constants.wallConfig.defaultColor,
side: THREE.DoubleSide,
@ -68,7 +67,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
new THREE.MeshStandardMaterial({
color: Constants.wallConfig.defaultColor,
side: THREE.DoubleSide,
map: wall.outsideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
map: wall.outsideMaterial === 'Default Material`' ? defaultWallTexture : material1WallTexture,
}),
];
}, [defaultWallTexture, material1WallTexture, wall]);
@ -94,8 +93,8 @@ function Wall({ wall }: { readonly wall: Wall }) {
return (
<mesh
name={`Wall-${wall.wallUuid}`}
key={wall.wallUuid}
userData={wall}
visible={visible}
>
<Base
ref={meshRef}
@ -104,7 +103,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
rotation={[0, -angle, 0]}
>
{materials.map((material, index) => (
<primitive key={index} object={material} attach={`material-${index}`} />
<primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
))}
{wall.decals.map((decal) => {

View File

@ -4,14 +4,11 @@ import WallInstance from './instance/wallInstance';
import Line from '../../line/line';
import Point from '../../point/point';
import { useToggleView } from '../../../../store/builder/store';
import { Base, Geometry, Subtraction } from '@react-three/csg';
import { BoxGeometry } from 'three';
import { Geometry } from '@react-three/csg';
function WallInstances() {
const { walls } = useWallStore();
const { toggleView } = useToggleView();
const ref = useRef<any>();
const csg = useRef<any>();
useEffect(() => {
// console.log('walls: ', walls);
@ -33,32 +30,27 @@ function WallInstances() {
return points;
}, [walls]);
const box = useMemo(() => new BoxGeometry(), []);
return (
<>
<group name='Walls-Group' ref={ref}>
<mesh >
<Geometry ref={csg} computeVertexNormals useGroups>
{!toggleView && (
<Base name="base" geometry={box} scale={[3, 3, 3]} />
<mesh name='Walls-Group'>
{/* <Base name="base" geometry={box} scale={[3, 3, 3]} /> */}
<Geometry useGroups>
{walls.map((wall) => (
<WallInstance key={wall.wallUuid} wall={wall} />
))}
</Geometry>
<Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
{/* <Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
<Geometry>
<Base geometry={box} />
</Geometry>
</Subtraction>
</Geometry>
</Subtraction> */}
</mesh>
</group>
)}
{toggleView && (
<>

View File

@ -102,6 +102,28 @@ function WallCreator() {
};
if (tempPoints.length === 0) {
const wall2: Wall = {
wallUuid: THREE.MathUtils.generateUUID(),
points: [point1, newPoint],
outsideMaterial: insideMaterial,
insideMaterial: outsideMaterial,
wallThickness: wallThickness,
wallHeight: wallHeight,
decals: []
}
addWall(wall2);
const wall3: Wall = {
wallUuid: THREE.MathUtils.generateUUID(),
points: [point2, newPoint],
outsideMaterial: insideMaterial,
insideMaterial: outsideMaterial,
wallThickness: wallThickness,
wallHeight: wallHeight,
decals: []
}
addWall(wall3);
setTempPoints([newPoint]);
setIsCreating(true);
} else {