feat: simplify the Array model

src/modules/models/HeatLossArrow/HeatLossArrow.tsx

@@ -24,10 +24,10 @@ const GLB_FILE_PATH = `${MODELS_3D_ROOT_PATH}/HeatLossArrow.glb`;
 
 type GLTFResult = GLTF & {
   nodes: {
-    Arrow_Material001_0: Mesh;
+    Arrow: Mesh;
   };
   materials: {
-    ['Material.001']: MeshStandardMaterial;
+    Arrow: MeshStandardMaterial;
   };
 };
 
@@ -36,26 +36,32 @@ type Props = JSX.IntrinsicElements['group'] & {
   position?: Position;
 };
 
+// These factors will affect the range of sizes of the arrows.
+const MIN_HEATLOSS = 0;
+const MAX_HEATLOSS = 5 * powerConversionFactors.KiloWatt;
+const MIN_SCALE = 0.8;
+const MAX_SCALE = 1.6;
+
+const ARRAY_COLOR = new Color('red');
+const TEXT_COLOR = 'white';
+
 export const HeatLossArrow = ({
   heatLoss,
   position,
   ...props
 }: Props): JSX.Element => {
   const { nodes, materials } = useGLTF(GLB_FILE_PATH) as GLTFResult;
-  const material = materials['Material.001'];
-
-  const minHeatLoss = 0;
-  const maxHeatLoss = 5 * powerConversionFactors.KiloWatt;
-  const minScale = 0.8;
-  const maxScale = 1.6;
+  const material = materials.Arrow;
 
-  // const scale = 0.8;
   const scale =
-    minScale +
-    (maxScale - minScale) *
+    MIN_SCALE +
+    (MAX_SCALE - MIN_SCALE) *
       Math.min(
         1,
-        Math.max(0.1, (heatLoss - minHeatLoss) / (maxHeatLoss - minHeatLoss)),
+        Math.max(
+          0.1,
+          (heatLoss - MIN_HEATLOSS) / (MAX_HEATLOSS - MIN_HEATLOSS),
+        ),
       );
 
   const scaleRef = useRef<Group>(null);
@@ -69,14 +75,14 @@ export const HeatLossArrow = ({
     }
   });
 
-  material.color = new Color('red');
+  material.color = ARRAY_COLOR;
 
   return (
     <group ref={scaleRef} {...props} position={position} dispose={null}>
-      <mesh geometry={nodes.Arrow_Material001_0.geometry} material={material} />
+      <mesh geometry={nodes.Arrow.geometry} material={material} />
       <HeatLossTextArrow
         heatLoss={formatHeatLossRate(heatLoss)}
-        color="white"
+        color={TEXT_COLOR}
       />
     </group>
   );