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

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 背景色

Three.js use variable to set HSL background color

hsl

three.js