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.