Artifacts with DirectionalLight

Questions
1

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'/>
</mesh>

I added a DirectionalLight:

<directionalLight castShadow
                                 shadow-mapSize-width={1024}
                                 shadow-mapSize-height={1024}
                                 shadow-camera-bottom={-50}
                                 shadow-camera-left={-50}
                                 shadow-camera-right={50}
                                 shadow-camera-top={50}
                                 position={[-15, 10, -20]}
                                 intensity={3} ref={lightRef}
                                 target-position={[0, 0, 0]}/>

Why there are some light artifacts on the wall joints?

image
image1366×617 51.9 KB

2

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

image
image847×472 60.9 KB

1 Like
3

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

image
image1308×524 38.3 KB

4

Change bias value like -0.002 or 0.002

1 Like
5

It works, thank you again

1 Like
6

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?

image
image1365×577 37.5 KB

7

Try this three.js examples

8

just add another dim light that does not cast shadow