在three.js着色器中使用光照

Question

我正在尝试从three.js的着色器中访问场景灯光。

这个问题与Three.js ShaderMaterial issue with lights几乎重复，但是那个问题的评论没有帮助我解决问题。

下面是顶点着色器：

#if NUM_DIR_LIGHTS > 0
    struct DirectionalLight {
        vec3 direction;
        vec3 color;
        int shadow;
        float shadowBias;
        float shadowRadius;
        vec2 shadowMapSize;
     };
     uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif
  varying vec3 color;
  void main() {
     float r = directionalLights[0].color.r;
     color = vec3(r,1.0,0.0);
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0);
  }

以及相关的着色器材质（ShaderMaterial）：

var material = new THREE.ShaderMaterial({
    uniforms: THREE.UniformsLib['lights'],
    vertexShader: document.getElementById('vertexShader').innerHTML,
    fragmentShader: document.getElementById('fragmentShader').innerHTML,
    lights : true
  });

我已经将整个示例代码发布在这里：https://jsfiddle.net/zhkvcajs/ 去除lights: true会呈现一个绿色的节点，但是它无法获取应更改节点颜色的directionalLights信息。 显然，需要lights：true来实现该功能，但会导致错误。

- turtlegraphics

Answer 1

如果您想使用场景灯光和ShaderMaterial一起使用，您需要设置lights: true。

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').innerHTML,
    fragmentShader: document.getElementById('fragmentShader').innerHTML,
    lights: true
} );

three.js r.126

- WestLangley

---

所以，我已经将THREE.UniformsLib [“lights”]作为 uniform，但没有包含THREE.UniformsLib [“ambient”]。很明显，除了灯光之外，使用灯光还需要其他东西，这种设计看起来并不是很易于发现。如果您不能在没有环境光的情况下使用灯光，那么为什么环境光uniforms不直接包含在灯光uniforms中呢？ - turtlegraphics

我认为可以合理地辩称这是一个错误。 - WestLangley

已于r.75dev版本修复。"ambient"统一变量已合并入"lights"统一变量中。 - WestLangley

太棒了，WL。我正在学期中间，一有时间就要整理一个错误报告。感谢您的回答和新修复！ - turtlegraphics