Question

我正在尝试使用变量将renderer.setClearColor（）设置为新的HSL颜色。如果我直接定义变量，它可以工作，但当我尝试使用另一个变量更改它时，我收到此错误：

THREE.Color: Unknown color hsl(color1[0], 96%, 95%)

这是我用来尝试的代码，只是改变了色调：

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);

任何建议都将不胜感激！

Answer 1

以下是使用HSL参数设置和更改背景颜色的一种方法：

var color = new THREE.Color(); // create once and reuse it

然后，设置或更改清晰颜色

color.setHSL( 0.5, 0.90, 0.95 );
renderer.setClearColor( color );

还支持另一种模式：

scene.background = new THREE.Color().setHSL( 0.5, 0.90, 0.95 );

并改变它：

scene.background.setHSL( 0.9, 0.90, 0.95 );

three.js r.92

Answer 2

我认为OP的代码中的实际错误是将变量作为字符串传递。使用模板文字应为：

backgroundColor = new THREE.Color(`hsl(${color1[0]}%, 96%, 95%)`);

我遇到了同样的问题，但这是由于hsl值是浮点数而不是整数引起的。换句话说，我正在传递类似hsl(45.356456%, 96%, 95%)之类的东西。我可以通过将数字四舍五入到最接近的整数来解决它。

backgroundColor = new THREE.Color(`hsl(${Math.round(color1[0])}%, 96%, 95%)`);

Three.js使用变量来设置HSL背景颜色

2 个答案: