cables and noes now render in the bins, the label to show readinds appears when zooming in and inventory using fill percent works, still need to work on top node fill level for cable inventory control, and node heatmap/gradient similar to the bin SVG

src/3dModels/Shapes/3D/Sphere.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface SphereGeometry {
+    radius: number
+    widthSegments?: number
+    heightSegments?: number
+    phiStart?: number
+    phiLength?: number
+    thetaStart?: number
+    thetaLength?: number
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: SphereGeometry;
+}
+
+export default function Sphere(props: Props){
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.SphereGeometry(
+            geometry.radius,
+            geometry.widthSegments,
+            geometry.heightSegments,
+            geometry.phiStart,
+            geometry.phiLength,
+            geometry.thetaStart,
+            geometry.thetaLength
+        );
+    }, [
+        geometry.radius,
+        geometry.widthSegments,
+        geometry.heightSegments,
+        geometry.phiStart,
+        geometry.phiLength,
+        geometry.thetaStart,
+        geometry.thetaLength
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}