feat: Implement wall asset management features including creation, instances, and rendering; enhance wall properties input validation

app/src/modules/builder/builder.tsx

@@ -2,8 +2,8 @@
 
 import * as THREE from "three";
 import { useEffect, useRef } from "react";
-import { useThree } from "@react-three/fiber";
-import { Bvh } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import { Geometry } from "@react-three/csg";
 
 //////////  Zustand State Imports  //////////
 
@@ -39,16 +39,14 @@ import ZoneGroup from "./zone/zoneGroup";
 import { useParams } from "react-router-dom";
 import { useBuilderStore } from "../../store/builder/useBuilderStore";
 import { getUserData } from "../../functions/getUserData";
+import WallAssetGroup from "./wallAsset/wallAssetGroup";
 
 export default function Builder() {
-    const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
+    const state = useThree<Types.ThreeState>();
+    const plane = useRef<THREE.Mesh>(null);
+    const csgRef = useRef<any>(null);
 
-    // Assigning the scene and camera from the Three.js state to the references.
-
-    const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
-    const grid = useRef() as any; // Reference for a grid object for raycaster reference.
-
-    const { toggleView } = useToggleView(); // State for toggling between 2D and 3D.
+    const { toggleView } = useToggleView();
     const { setToolMode } = useToolMode();
     const { setRoofVisibility } = useRoofVisibility();
     const { setWallVisibility } = useWallVisibility();
@@ -59,14 +57,6 @@ export default function Builder() {
     const { setHoveredPoint, setHoveredLine } = useBuilderStore();
     const { userId, organization } = getUserData();
 
-    // const loader = new GLTFLoader();
-    // const dracoLoader = new DRACOLoader();
-
-    // dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
-    // loader.setDRACOLoader(dracoLoader);
-
-    //////////  All Toggle's //////////
-
     useEffect(() => {
         if (!toggleView) {
             setHoveredLine(null);
@@ -91,29 +81,31 @@ export default function Builder() {
         fetchVisibility();
     }, []);
 
-    //////////  Return  //////////
+    useFrame(() => {
+        if (csgRef.current) {
+            csgRef.current.update();
+        }
+    })
 
     return (
         <>
-            <Ground grid={grid} plane={plane} />
+            <Ground plane={plane} />
 
             <SocketResponses />
 
-            {/* <WallsAndWallItems
-                CSGGroup={CSGGroup}
-                setSelectedItemsIndex={setSelectedItemsIndex}
-                selectedItemsIndex={selectedItemsIndex}
-                currentWallItem={currentWallItem}
-                csg={csg}
-                lines={lines}
-                hoveredDeletableWallItem={hoveredDeletableWallItem}
-            /> */}
-
             <AssetsGroup plane={plane} />
 
-            <AislesGroup />
+            <mesh name='Walls-And-WallAssets-Group'>
+                <Geometry ref={csgRef} useGroups>
 
-            <WallGroup />
+                    <WallGroup />
+
+                    <WallAssetGroup />
+
+                </Geometry>
+            </mesh>
+
+            <AislesGroup />
 
             <FloorGroup />