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

Question

我目前在我的代码中设置了 2 个 HSL colors：

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

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

当我运行这段代码时，我可以看到我在 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() function 中调用它们，如下所示：

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

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

Answer 1

您可以使用模板文字（或字符串连接）。

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