Environment map reflections not working with SSR

I have the SSR example running, and I tried to add an environment map to the scene but the objects aren’t picking up the map in the reflections. They are only showing the SSR reflections

I removed the fog, and hemisphere lighting from the scene, and added this to the initialization:

new RGBELoader()
                .setDataType( THREE.UnsignedByteType )
                .setPath( 'textures/equirectangular/' )
                .load( 'T_KitchenRef.hdr', function ( texture ) {
                    const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
                    scene.background = envMap;
                    scene.environment = envMap;

Is there anything special I have to do to get the environment map reflections to play nicely with SSR?


May be a good idea to mention it here. SSR is one of the newer additions, so it’s possible it doesn’t handle environment maps at all yet.

(/cc @gonnavis )

Thanks, I’ll post about it in there. I did find this react threejs example that has both SSR and an environment map: https://codesandbox.io/s/reflector-with-postprocessing-vn56b?file=/src/use-reflector.js

If you tilt the camera down low you can see the reflections

I know javascript, but I’ve never worked with typescript before so I’m having trouble translating that example to regular javascript

I might be very wrong, by R3F’s reflector is not SSR :speak_no_evil: It’s just a planar reflector, and SSR is a post-processing effect - they work a bit differently (hence, if the entire environment map isn’t within the viewport, it might be not possible to actually show it in a reflection.)

(If all you’d need is planar reflections, vanilla three also has a reflector.)

Hello, there are two parts.

For pure SSRPass, just increase the metalness and decrease the roughness values of the MeshStandardMaterial, then can see the EnvMap.

const material = new THREE.MeshStandardMaterial( { metalness:.5,roughness:.1, color: 0x606060 } );

For the auxiliary planar groundReflector, which is a modified version of Reflector.js, need set it’s maxDistance to Infinity, or just use original Reflector.js, then can see the EnvMap, but in exchange for sacrificing the fade effect.

ssrPass.maxDistance = .1;
// groundReflector.maxDistance = ssrPass.maxDistance;
groundReflector.maxDistance = Infinity;
folder.add( ssrPass, 'maxDistance' ).min( 0 ).max( .5 ).step( .001 ).onChange( ()=>{

  // groundReflector.maxDistance = ssrPass.maxDistance;

} );


1 Like

Thank you so much @gonnavis !!! Those two things fixed it :grinning:

1 Like