THREE.js improve shadows and visualization

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

Poor visualization SetUp Design

Good visualization https://tylko.com/shelf/bookcases/486307/?cv=0&board=cat_1__type_2__id_4263

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.

1 Like

Have you already tried using ambient occlusion maps with your models?

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.

Last but not least you might be able to combine AO and contact shadows with good enough results react-three-fiber v5 - CodeSandbox

1 Like

Never actually tried this, how is an AO map applied in three?

This is my current configuration, what do you think?

1 Like