Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to set the renderer.setClearColor() to a new HSL color using a variable. It works if I define the variable directly, but when I try to change it by using another variable, I get this error:

THREE.Color: Unknown color hsl(color1[0], 96%, 95%)
here is the code I am using to try and just change the hue:
backgroundColor = new THREE.Color("hsl(0, 96%, 95%)");
function getColors(){
color1 = [];
color1h = (data[1] / 359);
color1s = (0.90);
color1l = (0.65);
color1.push(color1h, color1s, color1l);
backgroundColor = new THREE.Color("hsl(color1[0], 96%, 95%)");
renderer.setClearColor(backgroundColor);
Any advice would be appreciated!
Here is one way to set and change the background color using HSL parameters:
var color = new THREE.Color(); // create once and reuse it
Then, to set or change the clear color
color.setHSL( 0.5, 0.90, 0.95 );
renderer.setClearColor( color );
There is also another pattern that is supported:
scene.background = new THREE.Color().setHSL( 0.5, 0.90, 0.95 );
And to change it:
scene.background.setHSL( 0.9, 0.90, 0.95 );
three.js r.92
I think the actual bug in the OP's code is that it's passing a variable as a string. Using template literal it should be:
backgroundColor = new THREE.Color(`hsl(${color1[0]}%, 96%, 95%)`);
I had this same issue, but it was caused by the hsl values being floats instead of integers. In other words I was passing something like hsl(45.356456%, 96%, 95%). I was able to fix it by just rounding the number to the nearest integer.
backgroundColor = new THREE.Color(`hsl(${Math.round(color1[0])}%, 96%, 95%)`);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.