various tweaks and now trying to build heatmaps in two different ways

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

@@ -8,9 +8,11 @@ import { Vector3 } from "three";
 import { useMemo } from "react";
 import { BuildCableData, CableData } from "../Data/BuildCableData";
 import { BuildNodeData, NodeData } from "../Data/BuildNodeData";
-import NodePointCloud from "../Systems/Heatmap/NodePointCloud";
+import Heatmap from "../Systems/Heatmap/HeatMapAlpha";
 import { pond } from "protobuf-ts/pond";
 import GrainCableFill from "../Systems/Inventory/GrainCableFill";
+import TempHeatMap from "../Systems/Heatmap/TempHeatMap";
+// import NodePointCloud from "../Systems/Heatmap/NodePointCloud";
 
 interface Props {
     /**
@@ -28,13 +30,17 @@ interface Props {
      */
     fillPercent?: number
     nodeClick?: (node: NodeData, cable: CableData) => void
+    /**
+     * When true, renders the heatmap instead of the grain fill.
+     */
+    showHeatmap?: boolean
 }
 
 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, nodeClick} = props
+    const {bin, scale = 100, fillPercent, nodeClick, showHeatmap = false} = props
     const binCenter = useMemo(() => new Vector3(0, 0, 0), []);
     const cableData = useMemo(() => BuildCableData(bin), [bin]);
     const nodeData = useMemo(() => BuildNodeData(cableData), [cableData]);
@@ -58,6 +64,7 @@ export default function Bin3dView(props: Props){
             sidewallHeight={bin.sidewallHeight()}
             hopperHeight={bin.hopperHeight()}
             fillPercent={fillPercent}
+            grainOpacity={0.3}
         />
         }
     }
@@ -75,11 +82,11 @@ export default function Bin3dView(props: Props){
                     sidewallHeight={bin.sidewallHeight()}
                     roofHeight={bin.roofHeight()}
                     hopperHeight={bin.hopperHeight()}
-                    
+                    renderOrder={4}
                 />
 
                 {/* grain - cylinder*/}
-                {grainInventory()}
+                {/* {!showHeatmap && grainInventory()} */}
                 {/* cables */}
                 <BinCables cableData={cableData} nodeData={nodeData} bin={bin} binCenter={binCenter} 
                     onNodeClick={(node, cable) => {
@@ -88,8 +95,10 @@ export default function Bin3dView(props: Props){
                         if(nodeClick){
                             nodeClick(node, cable)
                         }
-                    }}/>
-                <NodePointCloud bin={bin} nodes={nodeData} />
+                    }}
+                    renderOrder={1}/>
+                {/* <NodePointCloud bin={bin} nodes={nodeData} /> */}
+                <TempHeatMap bin={bin} nodes={nodeData}/>
               </group>
 
                 {/* lighting */}