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;
texture.dispose();
pmremGenerator.dispose();
render();
});
Is there anything special I have to do to get the environment map reflections to play nicely with SSR?
Thanks!
-Ben
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 
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;
} );
https://raw.githack.com/gonnavis/three.js/SSRPassWithEnvMapShared/examples/webgl_postprocessing_ssr.html
1 Like
Thank you so much @gonnavis !!! Those two things fixed it 
1 Like
