app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx

@@ -9,6 +9,7 @@ const MaterialAnimator = ({
   const meshRef = useRef<any>(null!);
   const [hasLoad, setHasLoad] = useState(false);
   const { scene } = useThree();
+  const padding = 0.1;
 
   useEffect(() => {
     setHasLoad(storage.currentLoad > 0);
@@ -21,42 +22,43 @@ const MaterialAnimator = ({
   const materialPositions = useMemo(() => {
     if (!storageModel || storage.currentMaterials.length === 0) return [];
 
-    // Get the bounding box of the model
     const box = new Box3().setFromObject(storageModel);
     const size = new Vector3();
     box.getSize(size);
 
-    const padding = 0.1; // space between items
     const matCount = storage.currentMaterials.length;
 
-    // Estimate how many columns and rows fit (try square layout)
-    const aspectRatio = size.x / size.z;
-    const cols = Math.ceil(Math.sqrt(matCount * aspectRatio));
-    const rows = Math.ceil(matCount / cols);
+    // Assumed size each material needs in world units
+    const materialWidth = 0.45;
+    const materialDepth = 0.45;
+    const materialHeight = 0.3;
 
-    const cellWidth = size.x / cols;
-    const cellDepth = size.z / rows;
+    const cols = Math.floor(size.x / materialWidth);
+    const rows = Math.floor(size.z / materialDepth);
+    const itemsPerLayer = cols * rows;
 
     const origin = new Vector3(
-      box.min.x + cellWidth / 2,
-      box.max.y + 0, // place slightly above the model
-      box.min.z + cellDepth / 2
+      box.min.x + materialWidth / 2,
+      box.max.y + padding, // slightly above the surface
+      box.min.z + materialDepth / 2
     );
 
-    // Generate grid positions
     return Array.from({ length: matCount }, (_, i) => {
-      const row = Math.floor(i / cols);
-      const col = i % cols;
+      const layer = Math.floor(i / itemsPerLayer);
+      const layerIndex = i % itemsPerLayer;
+      const row = Math.floor(layerIndex / cols);
+      const col = layerIndex % cols;
+
       return new Vector3(
-        origin.x + col * cellWidth,
-        origin.y,
-        origin.z + row * cellDepth
+        origin.x + col * materialWidth,
+        origin.y + layer * (materialHeight + padding),
+        origin.z + row * materialDepth
       );
     });
   }, [storageModel, storage.currentMaterials]);
 
   return (
-    <>
+    <group position={[0, -padding, 0]}>
       {hasLoad &&
         storage.currentMaterials.map((mat, index) => (
           <MaterialModel
@@ -66,7 +68,7 @@ const MaterialAnimator = ({
             position={materialPositions[index]}
           />
         ))}
-    </>
+    </group>
   );
 };