Gradient color in 1000 cubes

Hi, I fetch 1000 cubes from json file, and i want to have a gradient color on whole of my project in terms of cubes keys. this is my code :

let cubes = [];
let cubesOrder;
fetch("./Blocks.json")
.then(function (response) {
return response.json();
})
.then(function (users) {

  cubes = users;
  cubes.forEach(function (c) {
    const cube = new BABYLON.MeshBuilder.CreateBox(
      c.key,
      { height: c.Yinc, width: c.Xinc, depth: c.Zinc },
      scene
    );
    // console.log(cube);
    cube.position.x = c.X;
    cube.position.y = c.Y;
    cube.position.z = c.Z;
    var gradientMaterial = new BABYLON.GradientMaterial("grad", scene);
    gradientMaterial.topColor = new BABYLON.Color3(0, 0, 100); // Set the gradient top color
    gradientMaterial.bottomColor = new BABYLON.Color3(0, 1, 0); // Set the gradient bottom color
    gradientMaterial.offset = 0.5;
  });
  cubesOrder = cubes.sort(function (x, y) {
    return x.key - y.key;
  });
  console.log(cube);
  cubeOrder.material = gradientMaterial;
});

return scene;
};

when i using this way i just get the 2 color not gradient color.

what should i do to have each cube own color in terms of increasing the keys.

Not entirely clear what you are trying to achieve. However

  1. Final line I see no other reference to cubeOrder
  2. If you mean cubesOrder then you are setting material to an array not a mesh.

A playground would be useful, even if you create three or four cubes directly rather than importing with JSON to fill your cubs array.