nodes and labes adjust based on zoom level, colours show based on the bins upper and lower temp limits, working on panning functionality for the camera

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

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import BaseMesh, { BaseMeshProps } from "../BaseMesh";
+
+export interface RingGeometry{
+    // the radius of the ring from the center to the ouside edge, must be larger than thickness
+    radius: number
+    // the thickness of the tube, must be smaller than radius
+    thickness: number
+    radialSegments?: number
+    tubularSegments?: number
+    // central angle in radians
+    arc?: number
+}
+
+interface Props extends Omit<BaseMeshProps, "geometry"> {
+    geometry: RingGeometry;
+}
+
+export default function Ring(props: Props) {
+    const { geometry } = props;
+
+    const geo = useMemo(() => {
+        return new THREE.TorusGeometry(
+            geometry.radius,
+            geometry.thickness,
+            geometry.radialSegments ?? 12,
+            geometry.tubularSegments ?? 48,
+            geometry.arc ?? Math.PI * 2
+        );
+    }, [
+        geometry.radius,
+        geometry.thickness,
+        geometry.radialSegments,
+        geometry.tubularSegments,
+        geometry.arc
+    ]);
+
+    return <BaseMesh {...props} geometry={geo} />;
+}