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; return rooms;
}; };

View File

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

View File

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

View File

@ -102,6 +102,28 @@ function WallCreator() {
}; };
if (tempPoints.length === 0) { 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]); setTempPoints([newPoint]);
setIsCreating(true); setIsCreating(true);
} else { } else {