如何在Three.js房间场景中实现灯光色温调节功能？

嘿，这个需求超实用！在Three.js里实现灯光色温调节，核心就是把色温值（开尔文K）转换成Three.js能识别的RGB颜色，再绑定到灯光的color属性上。咱们一步步来搞定：

1. 先搞一个色温转RGB的工具函数 #

Three.js的灯光color属性只认THREE.Color对象，但色温是物理单位（比如2700K暖黄、6500K正白、9000K冷白），所以得先做个转换。下面这个是行业常用的靠谱算法，能准确把开尔文值转成sRGB颜色：

// 色温转RGB函数，推荐参数范围1000-10000K（覆盖暖黄到冷白全区间）
function kelvinToRgb(kelvin) {
  let temp = kelvin / 100;
  let r, g, b;

  // 计算红色通道
  if (temp <= 66) {
    r = 255;
  } else {
    r = temp - 60;
    r = 329.698727446 * Math.pow(r, -0.1332047592);
    r = Math.max(0, Math.min(255, r));
  }

  // 计算绿色通道
  if (temp <= 66) {
    g = temp;
    g = 99.4708025861 * Math.log(g) - 161.1195681661;
    g = Math.max(0, Math.min(255, g));
  } else {
    g = temp - 60;
    g = 288.1221695283 * Math.pow(g, -0.0755148492);
    g = Math.max(0, Math.min(255, g));
  }

  // 计算蓝色通道
  if (temp >= 66) {
    b = 255;
  } else if (temp <= 19) {
    b = 0;
  } else {
    b = temp - 10;
    b = 138.5177312231 * Math.log(b) - 305.0447927307;
    b = Math.max(0, Math.min(255, b));
  }

  // 转换成Three.js需要的0-1范围RGB值
  return new THREE.Color(r / 255, g / 255, b / 255);
}

2. 绑定调节控件（以dat.GUI为例） #

假设你已经有了场景里的灯光实例（比如const pointLight = new THREE.PointLight(0xffffff, 1)），现在可以用控件让用户直观调节色温：

// 假设你已经初始化了dat.GUI
const gui = new dat.GUI();

// 定义色温参数，默认6500K（标准正白）
const lightSettings = {
  colorTemperature: 6500
};

// 添加色温滑块到GUI，步长设为100方便精准调节
gui.add(lightSettings, 'colorTemperature', 1000, 10000, 100)
  .name('色温(K)')
  .onChange((value) => {
    // 每次调节时，更新灯光颜色
    pointLight.color.copy(kelvinToRgb(value));
    // 如果场景里有多个灯光，循环更新所有需要调节的灯光即可
    // yourOtherDirectionalLight.color.copy(kelvinToRgb(value));
  });

3. 实用小提示 #

• 兼容所有带color属性的灯光：PointLight、DirectionalLight、SpotLight、RectAreaLight等都支持，只要修改它们的color属性就行。
• 联动已有调节功能：因为色温变化会影响视觉亮度，你可以和已有的曝光、功率调节联动，比如暖色温时适当降低功率，避免画面过黄刺眼。
• 自定义HTML滑块替代dat.GUI：如果不用dat.GUI，也可以自己写HTML滑块，监听input事件，调用kelvinToRgb更新灯光颜色，逻辑完全一致。

拖动手试试2700K的暖黄氛围和9000K的冷白效果，房间的氛围感瞬间就不一样啦～

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