如何在片元着色器中区分不同的聚光灯？

可以区分，但需要手动为每个聚光灯添加唯一标识，并将该标识传递到着色器的uniform数组中，具体步骤如下：

• 给聚光灯添加唯一ID
  在创建聚光灯时，通过自定义字段添加唯一标识（数字或字符串均可，数字性能更优）：

  const lightA = new THREE.SpotLight();
  lightA.userData.uniqueId = 1;
  const lightB = new THREE.SpotLight();
  lightB.userData.uniqueId = 2;
  

• 扩展聚光灯的uniform结构
  自定义着色器材质时，将每个聚光灯的ID加入到spotLights的uniform数组中，和位置、方向、颜色等灯光参数一起传递：

  const uniforms = {
    spotLights: {
      value: [
        {
          position: lightA.position,
          direction: lightA.target.position.clone().sub(lightA.position).normalize(),
          uniqueId: lightA.userData.uniqueId,
          color: lightA.color,
          intensity: lightA.intensity,
          // 其他必填的聚光灯参数
        },
        {
          position: lightB.position,
          direction: lightB.target.position.clone().sub(lightB.position).normalize(),
          uniqueId: lightB.userData.uniqueId,
          color: lightB.color,
          intensity: lightB.intensity,
          // 其他必填的聚光灯参数
        }
      ]
    }
  };
  

• 在片元着色器中判断ID
  遍历spotLights数组时，通过每个元素的uniqueId字段区分不同聚光灯：

  struct SpotLight {
    vec3 position;
    vec3 direction;
    int uniqueId;
    vec3 color;
    float intensity;
    // 其他对应的聚光灯参数
  };
  
  uniform SpotLight spotLights[2];
  
  void main() {
    vec3 totalLight = vec3(0.0);
    for (int i = 0; i < 2; i++) {
      SpotLight light = spotLights[i];
      if (light.uniqueId == 1) {
        // 处理聚光灯A的光照逻辑
        totalLight += light.color * light.intensity;
      } else if (light.uniqueId == 2) {
        // 处理聚光灯B的光照逻辑
        totalLight += light.color * light.intensity * 0.5; // 示例：让B灯亮度减半
      }
    }
    gl_FragColor = vec4(totalLight, 1.0);
  }
  

• 注意事项

  • 如果使用Three.js内置材质，需要通过onBeforeCompile方法扩展uniforms和着色器代码，替换默认的聚光灯处理逻辑；
  • 确保ID全局唯一，避免不同灯光出现标识冲突；
  • 优先使用数字类型ID，比字符串ID在着色器中判断更高效。

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