Search code examples
three.jshsl

Three.js setHSL color from a variable


I'm trying to set the hsl color for a mesh in THREE.js using a variable to represent the color, so that I can eventually apply a changeable color palette to the faces. For now I'm just trying to get it to work with one color.

I am able to get it to display properly when I directly set the color:

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face = geometry.faces[ i ];
    face.color.setHSL(.74, .64, .59);}

But when I try to put the color value into a variable, it gives me a NaN result in the console. example code:

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face = geometry.faces[ i ];
    color1 = [0.74, 0.64, 0.59];
    face.color.setHSL(color1);
    console.log(face.color);
}

I would appreciate any advice!


Solution

  • The setHSL function of Color accepts 3 arguments, you are sending it an array in the second loop you posted.
    try:
    face.color.setHSL(color1[0], color1[1], color1[2]);