Three.js использует переменную для установки цвета фона HSL

Я пытаюсь установить 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);

Любой совет будет принят во внимание!


three.js hsl
person glaemart    schedule 07.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что фактическая ошибка в коде 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%)`);
person sallf    schedule 23.11.2020
comment
это сработало отлично, спасибо! - person TheLibzter; 22.01.2021

arrow_upward
2
arrow_downward

Вот один из способов установить и изменить цвет фона с помощью параметров 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 );

три.js р.92

person WestLangley    schedule 07.05.2018