在three.js着色器中使用燈

我試圖從three.js中的着色器訪問場景的燈光。在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呈現綠色結，但它沒有得到應該改變結的顏色的信息。顯然，lights : true是必需的，但會導致錯誤。

來源

2016-02-24 turtlegraphics

如果你想使用場景中的燈光與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所河74

來源

2016-02-24 11:27:31 WestLangley

所以，我確實有'THREE.UniformsLib [「lights」]'作爲制服，但是沒有包括'THREE.UniformsLib [「ambient」]''。使用燈光似乎很難發現，除了燈光之外，你還需要其他東西。如果你無法使用沒有環境的燈，那麼爲什麼環境制服不僅僅是燈制服的一部分？ – turtlegraphics

我認爲可以合理地說這是一個錯誤。 – WestLangley

在r.75dev中修復。 '「環境」制服已被合併到「燈光」制服中。 – WestLangley

在three.js着色器中使用燈

回答

相關問題