将变量传递到 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%)`);

将变量传递到 Three.JS 中的 HSL 颜色值

Passing variables into HSL color values in Three.JS

javascript

hsl

colors

three.js