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

2025-06-18 10:15:17 +05:30 · 2025-06-18 10:15:17 +05:30 · 4c20db213a
parent 462bae72a4
commit 4c20db213a
4 changed files with 37 additions and 94 deletions
--- a/app/src/modules/builder/builder.tsx
+++ b/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 />
        </>
    );
 }
--- a/app/src/modules/builder/wall/Instances/instance/helpers/useWallGeometry.ts
+++ b/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;
--- a/app/src/modules/builder/wall/Instances/instance/wall.tsx
+++ b/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 { Base } from '@react-three/csg';
+import { Decal, PivotControls } from '@react-three/drei';
+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>
    );
 }

--- a/app/src/modules/builder/wall/Instances/wallInstances.tsx
+++ b/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) => (
-                        <WallInstance key={wall.wallUuid} wall={wall} />
-                    ))}
+                <mesh >
+                    <Geometry ref={csg} computeVertexNormals useGroups>

-                    {/* <Base geometry={new BoxGeometry()} >
-                        <meshStandardMaterial />
-                    </Base>
+                        <Base name="base" geometry={box} scale={[3, 3, 3]} />

-                    <Geometry>
-                        <Subtraction scale={[5, 11, 5]} >
+                        {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={new BoxGeometry()} />
+                                <Base geometry={box} />
                            </Geometry>
                        </Subtraction>
-                    </Geometry> */}
-                </Geometry>
+                    </Geometry>
+                </mesh>
+
            </group>

            {toggleView && (
@ -76,4 +81,4 @@ function WallInstances() {
    )
 }

-export default WallInstances
+export default WallInstances