I am working on a 3D Furniture configurator using THREE.js and react-three-fiber. The problem that I encountered is the poor visualization and shadows and I couldn’t get it to work right. You can see the image here
I tried many things from changing different properties of light to changing the toneMapping property of glRenderer. I’ve also tried all the advices from the stackoverflow and anything I could find on the web, but nothing works.
If you have control over the models look into baking, for instance in blender. That allows you get photo realistic scenes without any performance overhead. If models are dynamic then the effect in the second example is called ambient occlusion, or AO, and it can be processed real-time. Here’s an example r3f gamma correction - CodeSandbox
As for shadows, without baking you’re out of luck. You can try soft shadows r3f soft shadows - CodeSandbox but they’re on the expensive side, might be fine for just some shelves though.