Artifacts with DirectionalLight

Hi, I’m new in the Three.js
I want to create a 3D room using react three fiber
All the walls are just like this:

<mesh receiveShadow castShadow  position={[-2.0,1.0,-6]} rotation={[0,0,0]}>
          <boxBufferGeometry attach="geometry" args={[4,2, 0.1]} />
          <meshPhongMaterial  attach="material" color='grey'/>

I added a DirectionalLight:

<directionalLight castShadow
                                 position={[-15, 10, -20]}
                                 intensity={3} ref={lightRef}
                                 target-position={[0, 0, 0]}/>

Why there are some light artifacts on the wall joints?

Hi! Use shadow bias -0.0004 or material.side=THREE.doubleSide;

1 Like

It helped, thank you!
But do you know why I got this ripples effect when I use side=DoubleSide?

Change bias value like -0.002 or 0.002

1 Like

It works, thank you again

1 Like

I continue with creating of the room model.
Walls look unrealistic and flat now because they are lit evently (despite the fact there is a directional light comes through the window, you can see a light spot near the bed)
Do you know a way to make it more realistics so that will be a shadows on the corners for example?

Try this three.js examples

just add another dim light that does not cast shadow