Hello,
As you can see in video the 1st level color set from Yellow to Green.
How i can do this?
================
Check for solution:
Looks like a transition of hue. The easiest way to do this is to have a material per block, each with a slightly different hue on the diffuse colour.
Alternatively, you could use a shader that exposes a colour Param and change it on a per mesh instance basis.
1 Like
material = ringPartEntity.model.model.meshInstances[0].material.clone();
ringPartEntity.model.model.meshInstances[0].material = material;
// console.log(material);
if (material)
{
// material.diffuse.set(Math.random(), Math.random(), Math.random());
material.diffuse.set(0.439, 1, 0.121);
material.update();
}
Right now i am setting material color like this…
How i can do this here?
I mean how i can find color shade?
===============
I can do this hard way with maths… but looking for easy way
I normally use a HSV to RGB conversion code and just change the H to get that colour transition
So changing the H will give you the colour shift. Code to go from HSV to RGB can be found online.
The math way would probably be a lot more efficient in the long run but a lot harder to do
Created code to generate this type of effect! 
I am sharing code here…
GamePlayManagerScript.prototype.getColorShades = function(noOfShades, startingColor, endingColor) {
var colorShadesArray = [];
var sR = startingColor[0];
var sG = startingColor[1];
var sB = startingColor[2];
var eR = endingColor[0];
var eG = endingColor[1];
var eB = endingColor[2];
var diffR = 0;
var diffG = 0;
var diffB = 0;
var lowerR = 0;
var lowerG = 0;
var lowerB = 0;
if(sR > eR){diffR = sR-eR; lowerR = eR;}else{diffR = eR-sR;lowerR = sR;}
if(sG > eG){diffG = sG-eG; lowerG = eG;}else{diffG = eG-sG;lowerG = sG;}
if(sB > eB){diffB = sB-eB; lowerB = eB;}else{diffB = eB-sB;lowerB = sB;}
var divR = diffR / (noOfShades -1);
var divG = diffG / (noOfShades -1);
var divB = diffB / (noOfShades -1);
for(looper_i = 0, revCount = noOfShades -1; looper_i < noOfShades; ++looper_i, --revCount)
{
var valR = 0;
var valG = 0;
var valB = 0;
if(sR > eR){valR = (divR * looper_i) + lowerR;}else{valR = (divR * revCount) + lowerR;}
if(sG > eG){valG = (divG * looper_i) + lowerG;}else{valG = (divG * revCount) + lowerG;}
if(sB > eB){valB = (divB * looper_i) + lowerB;}else{valB = (divB * revCount) + lowerB;}
colorShadesArray.push([valR, valG, valB]);
}
if(startingColor[0] == colorShadesArray[0][0] && startingColor[1] == colorShadesArray[0][1] && startingColor[2] == colorShadesArray[0][2])
{
return colorShadesArray;
}
else
{
return colorShadesArray.reverse();
}
};
Way to use… e.g.
var colorShadeArray = this.getColorShades(60, [0.992, 0.992, 0.345], [0.439, 1, 0.121]);
Hope it will help you! 
===============
Edit: Code Improved!
1 Like