在 Three.JS 中将变量传递给 HSL 颜色值

Question

我目前在我的代码中设置了 2 种 HSL 颜色：

scene.background = new THREE.Color("hsl(0, 100%, 50%)");
var light = new THREE.AmbientLight("hsl(180, 100%, 50%)");

我正在尝试从我的 CSS 中为“hue”传递一个变量。

当我运行这段代码时，我可以看到我在 CSS 中定义的 2 个颜色变量，它们分别是 0 和 180：

var style = getComputedStyle(document.body);
console.log(style.getPropertyValue("--color-accent-hue")); // get accent hue color
console.log(style.getPropertyValue("--color-accent-hue-inverse")); // get accent hue inverse color

在我的代码开头，我将这些定义为 JS 变量，如下所示：

const colorAccentHue = style.getPropertyValue('--color-accent-hue');
const colorAccentHueInverse = style.getPropertyValue('--color-accent-hue-inverse');

然后尝试在我的init() 函数中调用它们，如下所示：

scene.background = new THREE.Color("hsl(colorAccentHue, 100%, 50%)");
var light = new THREE.AmbientLight("hsl(colorAccentHueInverse, 100%, 50%)");`

但我什么也得不到。我哪里错了？

Answer 1

您可以使用template literals（或字符串连接）。

scene.background = new THREE.Color(`hsl(${colorAccentHue}, 100%, 50%)`);
var light = new THREE.AmbientLight(`hsl(${colorAccentHueInverse}, 100%, 50%)`);