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是必需的，但会导致错误。

Answer 1

如果你想使用ShaderMaterial的场景灯，除了设置lights: true之外，还需要使用这种模式创建你的制服：

var uniforms = THREE.UniformsUtils.merge( [

    THREE.UniformsLib[ "ambient" ],
    THREE.UniformsLib[ "lights" ]

] );

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

更新了小提琴：https://jsfiddle.net/zhkvcajs/3/

three.js r.74

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

1 个答案: