使用变量设置Three.js网格HSL颜色时出现NaN错误的求助

我来帮你排查这个问题——直接写字面量时颜色正常显示，改用变量就出现NaN，大概率是你的变量没有被正确解析为数值类型，或者变量本身处于未定义/非数值状态。下面分几种常见情况给出解决方案：

1. 变量是字符串类型而非数值 #

如果你的HSL值是从输入框、配置文件或其他地方获取的字符串（比如".74"），直接传给setHSL()会被解析为NaN，因为这个方法只接受数值参数。

错误示例： #

// 变量是字符串，会导致setHSL得到NaN
const h = ".74";
const s = ".64";
const l = ".59";

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[ i ];
  face.color.setHSL(h, s, l); // 这里参数是字符串，内部转换会失败
}

正确做法： #

把字符串转为数值类型，推荐用parseFloat()或者直接写成数值字面量：

// 方案1：直接定义数值变量
const h = 0.74;
const s = 0.64;
const l = 0.59;

// 方案2：如果是字符串来源，转换为数值
const h = parseFloat(".74");
const s = parseFloat(".64");
const l = parseFloat(".59");

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[ i ];
  face.color.setHSL(h, s, l); // 现在参数是合法数值
}

2. 变量未正确定义或存在作用域问题 #

如果变量没有提前声明、拼写错误，或者在作用域外被引用，会导致变量值为undefined，传给setHSL()后也会变成NaN。

错误示例： #

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[ i ];
  // hVal、sVal未提前声明，值为undefined
  face.color.setHSL(hVal, sVal, lVal);
}

正确做法： #

确保变量在使用前已经声明并赋值，注意作用域范围：

// 提前在循环外声明并初始化变量
const hVal = 0.74;
const sVal = 0.64;
const lVal = 0.59;

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[ i ];
  face.color.setHSL(hVal, sVal, lVal);
}

3. 额外验证技巧 #

可以在调用setHSL()前打印变量的类型和值，快速定位问题：

const h = 0.74;
console.log("h的类型：", typeof h, "h的值：", h); // 应该输出 "h的类型： number h的值： 0.74"

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[ i ];
  face.color.setHSL(h, s, l);
}

如果打印结果显示类型不是number，或者值是undefined/NaN，就对应上面的两种情况去修复即可。

内容的提问来源于stack exchange，提问作者glaemart