Accepted answer
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%)`);
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
Three.js use variable to set HSL background color
set the color the one object in three js with dat.GUI choose color
Three.js. How do I use a custom material for a scene background rather then color or texture?
Can you set background color of a Three.js TextGeometry object?
UV texture's color is set to all model in collada loader of three js
Changing three.js background to transparent or other color
three.js set background image
Change color of mesh using mouseover in three js
How to use Three JS with Angular 7
Convert an animated maya model to JSON for use with three js
Three js black color of material to transparent
How to set opacity in drawing lines use three.js, use LineBasicMaterial?
set line color between two points on line
How to set up image background in three.js?
Add background to THREE scene
How three.js uses the gradient color for the background
Changing material color on a merged mesh with three js
Three js Shader Material - Pixelated glitching when transparency is set to true
how i can use parent variable in child javascript code?
Use user data of the scene in Three JS editor
Set color of sphere as a function of coordinates in three.js
Three JS Circle Line Geom Color for Negative Values
Radio button background color with Chrome and WebGL <canvas>
three.js - How to set custom color to *.obj model when it is delivered without *.mtl file?
How to use THREE js TextureLoader() in React native?
Three.js set face color
THREE.js Color and position attributes of bufferGeometry use different vertices, and are hard to compare
three.js webgl mesh materials get the same color as canvas background
Simple Background Color in Three.js/WebGL Globe
Use a texture and a color on a cube three.js
More Query from same tag
how to detect click events on three.js sprite
ThreeJS: Exporting a scene to 3DS
Rotating a cube with keyboard key in three.js
is there a container type object in three.js to transform a group of children?
Three.js get center of Scene
FontLoader doesn't work properly with Vuejs
How to use externally generated textures with three.js
Object Becomes Number After Function Call - Javascript
Camera configuration in ThreeJS
Is there any thing like origin point in Three.js
How to improve performance of three.js scene in Gatsby.js / react?
THREE.EffectComposer in A-Frame
'Vector is undefined' warning when cloning vertices in a THREE.Geometry object
ColladaLoader can't load two different models
The tag <primitive> is unrecognized in this browser
Using THREE.js to make a shining sun
Three.js PMREMGenerator has incorrect texture filtering
Compute top,left,width,height in Three.js projetion
Three.js update object's matrix and scale?
threejs - mapping converted JSON animations to sliders, not fully working
ThreeJS error: THREE.FaceNormalsHelper is not a constructor
Scale object to fit inside certain bounding box three.js
Object.defineProperty does nothing in constructor
Does converting a Geometry to a BufferGeometry in Three.js increase the number of vertices?
rotate camera in three.js not working properly
Three.js webgl video texture CORS issue on safari
Three.js: How to draw a sphere with a spherical triangle on its surface?
Three.js within web worker: Simulating animation without rendering to canvas
ThreeJS ObjectLoader- cannot read property 'fog' of undefined
How To exclude helper objects from intersection check by raycaster in threejs?
