THREE JS realistic render

Question

I created scene on three js editor. And I also tryed to get same result with my project. I used R3F on my own project.

My Project Scene Screenshot

Three js editor screenshot

On the threeJS editor if I increase the directional light intensity everything seems fine. But in my project the lights have kind of a overexposure and the colors are overly saturated. Also shadow bias seems to work differently

And also when I try to enable shadows. I need to open cast and recieve shadows for same model. After enable receive and cast shadow it causes noise effect.

Noise

I need to show my models as realistic as posible.

Answer 1

try enable tone mapping, and change outputEncoding. Some settings differ in versions of threeJS. But there is my settings for three 0.141.0 version.

renderer.toneMapping = ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
renderer.outputEncoding = sRGBEncoding