在three.js着色器中使用灯光 [英] Using lights in three.js shader

问题描述

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

I'm trying to access the scene's lights from a shader in three.js.

这个问题几乎是Three.js ShaderMaterial 灯光问题但对该问题的评论并没有帮助我解决问题.

This question is nearly a duplicate of Three.js ShaderMaterial issue with lights but the comments on that question aren't helping me resolve the issue.

这里是顶点着色器:

#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:

and the relevant 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/

I've posted the entire example code here: https://jsfiddle.net/zhkvcajs/

移除 lights : true 会渲染一个绿色结，但它没有获得应该改变结颜色的 directionalLights 信息.显然，lights : true 是必需的，但会导致错误.

Removing the lights : true renders a green knot, but it's not getting the directionalLights information that should change the knot's color. Apparently, lights : true is required for that, but causes an error.

推荐答案

如果要使用ShaderMaterial的场景灯，需要设置lights: true.

If you want to use scene lights with ShaderMaterial, you need to set 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

three.js r.126

这篇关于在three.js着色器中使用灯光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！