did some refactoring so the node and cable data is computed in the data layer so that it is accessible by anything in the bin to make way for a heatmap

src/bin/3dView/Scene/Bin3dView.tsx

@@ -0,0 +1,76 @@
+import OrbitCameraControls from "3dModels/CameraControls/OrbitCameraControls";
+import { Canvas } from "@react-three/fiber";
+import { Bin } from "models";
+import BinShell from "../BinParts/BinShell";
+import GrainFillFlat from "../Systems/Inventory/GrainFillFlat";
+import BinCables from "../Systems/Cables/BinCables";
+import { Vector3 } from "three";
+import { useMemo } from "react";
+import { BuildCableData } from "../Data/BuildCableData";
+import { BuildNodeData } from "../Data/BuildNodeData";
+
+interface Props {
+    /**
+     * The bin to generate a 3D model of
+     */
+    bin: Bin
+    /**
+     * The scale to apply to the bin dimensions
+     * ie 100 would make the bin 1:100 scale
+     * @default 100
+     */
+    scale: number
+    /**
+     * optional: the percent of the bin to fill using a level top, this will be used with manual and lidar controls
+     */
+    fillPercent?: number
+}
+
+export default function Bin3dView(props: Props){
+    //this function will generate a 3D model of a bin based on its settings using multiple meshes, cylinder for the body, cone for the roof
+    // and either a cone for the hopper or circle for flat bottom, it is possible to also use lathe geometry for this as well, 
+    // it might even work better because we can control the smoothness easier with it being only one mesh rather than 3
+    const {bin, scale = 100, fillPercent} = props
+    const binCenter = useMemo(() => new Vector3(0, 0, 0), []);
+    const cableData = useMemo(() => BuildCableData(bin), [bin]);
+    const nodeData = useMemo(() => BuildNodeData(cableData), [cableData]);
+
+    return (
+            <Canvas>
+              <group scale={[1/scale, 1/scale, 1/scale]}>
+                <BinShell 
+                    binBodyColour="#fff" 
+                    radialSegments={20} 
+                    binMetalness={0.5} 
+                    binRoughness={0.7} 
+                    binOpacity={0.5}
+                    diameter={bin.diameter()}
+                    sidewallHeight={bin.sidewallHeight()}
+                    roofHeight={bin.roofHeight()}
+                    hopperHeight={bin.hopperHeight()}
+                    
+                />
+
+                {/* grain - cylinder*/}
+                {fillPercent !== undefined && (
+                    <GrainFillFlat
+                        diameter={bin.diameter()}
+                        sidewallHeight={bin.sidewallHeight()}
+                        hopperHeight={bin.hopperHeight()}
+                        fillPercent={fillPercent}
+                    />
+                )}
+                {/* cables */}
+                <BinCables cableData={cableData} nodeData={nodeData} bin={bin} binCenter={binCenter}/>
+              </group>
+
+                {/* lighting */}
+                <ambientLight intensity={0.2} color={"white"}/>
+                <directionalLight intensity={0.2} color={"white"} position={[0,0,5]}/>
+                <directionalLight intensity={0.2} color={"white"} position={[0,0,-5]}/>
+                <directionalLight intensity={0.2} color={"white"} position={[5,0,0]}/>
+                <directionalLight intensity={0.2} color={"white"} position={[-5,0,0]}/>
+                <OrbitCameraControls clampVerticalRotation />
+            </Canvas>        
+    )
+}