feat: add functionality to create additional walls when no temporary points are present
This commit is contained in:
parent
4c20db213a
commit
e90a67e97f
|
@ -120,6 +120,7 @@ export function useWallClassification(walls: Walls) {
|
|||
}
|
||||
});
|
||||
|
||||
console.log('rooms: ', rooms);
|
||||
return rooms;
|
||||
};
|
||||
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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} />
|
||||
))}
|
||||
|
||||
|
||||
<Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
|
||||
<Geometry>
|
||||
<Base geometry={box} />
|
||||
</Geometry>
|
||||
</Subtraction>
|
||||
</Geometry>
|
||||
</mesh>
|
||||
|
||||
</group>
|
||||
{/* <Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
|
||||
<Geometry>
|
||||
<Base geometry={box} />
|
||||
</Geometry>
|
||||
</Subtraction> */}
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
{toggleView && (
|
||||
<>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue