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;
|
return rooms;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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} />
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|
||||||
<Subtraction rotation={[0, Math.PI / 2, 0]} position={[-1.425, -0.45, 0]} scale={[1, 3, 1]}>
|
|
||||||
<Geometry>
|
|
||||||
<Base geometry={box} />
|
|
||||||
</Geometry>
|
|
||||||
</Subtraction>
|
|
||||||
</Geometry>
|
</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 && (
|
{toggleView && (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue