Environment Mapping in Three.js Custom Shaders

Based on the information from the Three.js documentation, there are a few important considerations when implementing environment mapping in custom shaders.

The Issue

Your problem stems from how environment maps are handled in Three.js. When you set scene.background = envMap, you're not only setting the background but also potentially triggering internal mechanisms that make the environment map available to shaders.

Recommended Solution

For physically accurate rendering with environment maps, you should:

1. Process your environment map with PMREMGenerator first
2. Pass the processed environment map to your shader material

Here's how to modify your code:

JAVASCRIPTCopied
// Create a PMREMGenerator
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

// Process your environment map
// Assuming envMap is your cubemap texture
const envMapProcessed = pmremGenerator.fromCubemap(envMap).texture;
pmremGenerator.dispose();

// Use the processed map in your material
const material = new THREE.ShaderMaterial({
    glslVersion: THREE.GLSL3,
    uniforms: {
        lightDirection: { value: new THREE.Vector3(1, 1, 1) },
        baseColor: { value: new THREE.Color(1, 1, 1) },
        envMap: { value: envMapProcessed }
    },
    vertexShader,
    fragmentShader,
    side: THREE.FrontSide,
});

Shader Modifications

You may also need to update your fragment shader to use the correct sampling function for the processed environment map:

GLSLCopied
const fragmentShader = `
uniform samplerCube envMap;

in vec3 vReflect;
out vec4 color;

void main() {
    // Use texture instead of textureCube for GLSL3
    vec3 reflectColor = texture(envMap, vReflect).rgb;
    
    // You can control the intensity if needed
    // reflectColor *= envMapIntensity;
    
    color = vec4(reflectColor, 1.0);
}`;

Note that in GLSL3, you should use texture() instead of textureCube() for cubemap sampling.

This approach should allow you to use the environment map in your custom shader without affecting the scene background.