refactor: remove unused useWallGeometry helper and update Wall component geometry logic

app/src/modules/builder/builder.tsx

@@ -205,7 +205,7 @@ export default function Builder() {
                 />
             </Bvh>
 
-            <WallsAndWallItems
+            {/* <WallsAndWallItems
                 CSGGroup={CSGGroup}
                 setSelectedItemsIndex={setSelectedItemsIndex}
                 selectedItemsIndex={selectedItemsIndex}
@@ -213,7 +213,7 @@ export default function Builder() {
                 csg={csg}
                 lines={lines}
                 hoveredDeletableWallItem={hoveredDeletableWallItem}
-            />
+            /> */}
 
             <Bvh firstHitOnly>
 
@@ -255,8 +255,6 @@ export default function Builder() {
                     plane={plane}
                 />
 
-                <WallGroup />
-
                 <AislesGroup />
 
                 <MeasurementTool />
@@ -275,6 +273,8 @@ export default function Builder() {
 
                 <LayoutImage />
             </Bvh>
+
+            <WallGroup />
         </>
     );
 }

app/src/modules/builder/wall/Instances/instance/helpers/useWallGeometry.ts

@@ -1,64 +0,0 @@
-import * as THREE from 'three';
-import { useMemo } from 'react';
-
-function useWallGeometry(wallLength: number, wallHeight: number, wallThickness: number) {
-    return useMemo(() => {
-        const geometry = new THREE.BufferGeometry();
-
-        const halfLength = wallLength / 2;
-        const halfThickness = wallThickness / 2;
-        const height = wallHeight;
-
-        const vertices = [
-            -halfLength, -height / 2, halfThickness,
-            -halfLength, height / 2, halfThickness,
-            halfLength, height / 2, halfThickness,
-            halfLength, -height / 2, halfThickness,
-            -halfLength, -height / 2, -halfThickness,
-            -halfLength, height / 2, -halfThickness,
-            halfLength, height / 2, -halfThickness,
-            halfLength, -height / 2, -halfThickness,
-            -halfLength, height / 2, halfThickness,
-            -halfLength, height / 2, -halfThickness,
-            halfLength, height / 2, -halfThickness,
-            halfLength, height / 2, halfThickness,
-            -halfLength, -height / 2, halfThickness,
-            -halfLength, -height / 2, -halfThickness,
-            halfLength, -height / 2, -halfThickness,
-            halfLength, -height / 2, halfThickness,
-        ];
-
-        const indices = [
-            0, 1, 2, 0, 2, 3,
-            4, 6, 5, 4, 7, 6,
-            0, 4, 5, 0, 5, 1,
-            3, 2, 6, 3, 6, 7,
-            8, 9, 10, 8, 10, 11,
-            12, 14, 13, 12, 15, 14
-        ];
-
-        geometry.setIndex(indices);
-        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
-        geometry.setAttribute('uv', new THREE.Float32BufferAttribute([
-            0, 0, 0, 1, 1, 1, 1, 0,
-            0, 0, 0, 1, 1, 1, 1, 0,
-            0, 0, 0, 1, 1, 1, 1, 0,
-            0, 0, 0, 1, 1, 1, 1, 0,
-            0, 0, 0, 1, 1, 1, 1, 0,
-            0, 0, 0, 1, 1, 1, 1, 0
-        ], 2));
-
-        geometry.computeVertexNormals();
-
-        geometry.addGroup(0, 6, 0);   // Front
-        geometry.addGroup(6, 6, 1);   // Back
-        geometry.addGroup(12, 6, 2);  // Left
-        geometry.addGroup(18, 6, 3);  // Right
-        geometry.addGroup(24, 6, 4);  // Top
-        geometry.addGroup(30, 6, 5);  // Bottom
-
-        return geometry;
-    }, [wallLength, wallHeight, wallThickness]);
-}
-
-export default useWallGeometry;

app/src/modules/builder/wall/Instances/instance/wall.tsx

@@ -4,13 +4,12 @@ import * as Constants from '../../../../../types/world/worldConstants';
 
 import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
 import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
-import useWallGeometry from './helpers/useWallGeometry';
 import { useWallStore } from '../../../../../store/builder/useWallStore';
 import { useWallClassification } from './helpers/useWallClassification';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useWallVisibility } from '../../../../../store/builder/store';
-import { Decal } from '@react-three/drei';
+import { Decal, PivotControls } from '@react-three/drei';
-import { Base } from '@react-three/csg';
+import { Base, Geometry, Subtraction } from '@react-three/csg';
 
 function Wall({ wall }: { readonly wall: Wall }) {
     const { walls } = useWallStore();
@@ -57,6 +56,10 @@ function Wall({ wall }: { readonly wall: Wall }) {
     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,
@@ -67,14 +70,10 @@ function Wall({ wall }: { readonly wall: Wall }) {
                 side: THREE.DoubleSide,
                 map: wall.outsideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
             }),
-            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
         ];
     }, [defaultWallTexture, material1WallTexture, wall]);
 
-    const geometry = useWallGeometry(wallLength, wall.wallHeight, wall.wallThickness);
+    const geometry = useMemo(() => new THREE.BoxGeometry(wallLength, wall.wallHeight, wall.wallThickness), [wallLength, wall.wallHeight, wall.wallThickness]);
 
     useFrame(() => {
         if (!meshRef.current) return;
@@ -93,14 +92,17 @@ function Wall({ wall }: { readonly wall: Wall }) {
     })
 
     return (
-        <group
+        <mesh
             name={`Wall-${wall.wallUuid}`}
             userData={wall}
-            position={[centerX, centerY, centerZ]}
-            rotation={[0, -angle, 0]}
             visible={visible}
         >
-            <Base ref={meshRef} geometry={geometry} visible>
+            <Base
+                ref={meshRef}
+                geometry={geometry}
+                position={[centerX, centerY, centerZ]}
+                rotation={[0, -angle, 0]}
+            >
                 {materials.map((material, index) => (
                     <primitive key={index} object={material} attach={`material-${index}`} />
                 ))}
@@ -123,7 +125,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
                     )
                 })}
             </Base>
-        </group>
+        </mesh>
     );
 }
 

app/src/modules/builder/wall/Instances/wallInstances.tsx

@@ -11,6 +11,7 @@ function WallInstances() {
     const { walls } = useWallStore();
     const { toggleView } = useToggleView();
     const ref = useRef<any>();
+    const csg = useRef<any>();
 
     useEffect(() => {
         // console.log('walls: ', walls);
@@ -32,27 +33,31 @@ function WallInstances() {
         return points;
     }, [walls]);
 
+
+    const box = useMemo(() => new BoxGeometry(), []);
+
     return (
         <>
             <group name='Walls-Group' ref={ref}>
-                <Geometry computeVertexNormals>
 
-                    {walls.map((wall) => (
+                <mesh >
-                        <WallInstance key={wall.wallUuid} wall={wall} />
+                    <Geometry ref={csg} computeVertexNormals useGroups>
-                    ))}
 
-                    {/* <Base geometry={new BoxGeometry()} >
+                        <Base name="base" geometry={box} scale={[3, 3, 3]} />
-                        <meshStandardMaterial />
-                    </Base>
 
-                    <Geometry>
+                        {walls.map((wall) => (
-                        <Subtraction scale={[5, 11, 5]} >
+                            <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={new BoxGeometry()} />
+                                <Base geometry={box} />
                             </Geometry>
                         </Subtraction>
-                    </Geometry> */}
+                    </Geometry>
-                </Geometry>
+                </mesh>
+
             </group>
 
             {toggleView && (