How should i use ColorGradient?

Questions
1

Hi everyone,

is it possible to help me to know how can i use colorGradient, because when i use in this way:

var gradientMaterial = new BABYLON.GradientMaterial(“grad”, scene);
gradientMaterial = new BABYLON.ColorGradient( 0.5, BABYLON.Color3(0,0,1);

i got the error, how can i use it?

2

I think this should help: Gradient - Babylon.js Documentation

3

Hi,
I don’t want to have a gradient on one shape, i have 100 cubes and each cube has a grade number between 0 to 1 , i just want to know how can i make a gradient between these cubes.

4

You can try something like this:

https://playground.babylonjs.com/#US24QY

5

Thank you so much for helping, But the problem is each cube has a specific grade, and i must define a specific grade on each of them.

6

The thing is gradient material works inside on a single mesh based on its local position not a world space one.

So either you create your own material in node material or shader material or you need some information per meshes relative to the gradient.

The last option is to create one mesh with all the cubes inside.

1 Like
7

Do you mean this:

https://playground.babylonjs.com/#US24QY#1

1 Like
8

i have a forEach loop and in the loop i have a mesh factory , i want to give a specific gradient to each cube.

async function fetchUsers() {
const response = await fetch("./BlockModelWithGrade.json");
const cubes = await response.json();
cubes.forEach(function ( c ) {

  const cube = new BABYLON.MeshBuilder.CreateBox(
    c.key,
    { height: c.Yinc, width: c.Xinc, depth: c.Zinc },
    scene
  );

  const color1 = new BABYLON.Color3(0, 0, 1);
  const color2 = new BABYLON.Color3(0, 1, 1);
  const mat = new BABYLON.StandardMaterial("mat", scene);
  mat.diffuseColor = new BABYLON.Color3.Lerp(color1, color2, c.G);


  cube.position.x = c.X;

  cube.position.y = c.Y;

  cube.position.z = c.Z;
});

}

fetchUsers();

9

thank you so much i find the way with the aid of this example.

1 Like