THREE.js improve shadows and visualization

Question

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 can't attach images, sorry):

Poor visualization

And I want to have something like this (which is from website https://tylko.com/):

Good visualization

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

Here is my lighting:

<ambientLight intensity={0.3} />
<directionalLight intensity={0.4} position={[-25, 15, 30]} />
<directionalLight
  ref={lightRef}
  castShadow
  position={[25, 15, 30]}
  shadow-camera-left={-10}
  shadow-camera-right={10}
  shadow-camera-bottom={-10}
  shadow-camera-top={10}
  shadow-bias={-0.0001}
  shadow-darkness={0.2}
  intensity={0.8}
  shadow-mapSize-width={1024}
  shadow-mapSize-height={1024}
/>

Sandbox with similar setup: https://codesandbox.io/s/3d-configurator-shadows-zp6tj?file=/src/App.js

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.

Basically what the problem boils down to the color issue and shadows issue: the shadows are too sharp and the color of the shelves is kinda gray, when it's actually set to #ffffff.

Hope someone can help me here.

You might want to apply an ambient occlusion map to your asset. Alternatively, you can try adding a SSAO post-processing pass (https://threejs.org/examples/webgl_postprocessing_ssao). — Mugen87, Feb 09 '21 at 10:48
@Mugen87, hey, thanks for the reply. The ambient occlusion map needs to be pre-generated in a software and then just projected onto the scene, right? — Mukhammed Kairatuly, Feb 09 '21 at 11:12
Yes, it is precomputed. When using glTF, you can export it right within the asset. — Mugen87, Feb 09 '21 at 11:33
@Mugen87, thanks, I tried adding the SSAO to the project but still got the same sharp shadows — Mukhammed Kairatuly, Feb 09 '21 at 12:19
@Mugen87, here is a sandbox https://codesandbox.io/s/3d-configurator-shadows-zp6tj?file=/src/App.js — Mukhammed Kairatuly, Feb 09 '21 at 12:51

THREE.js improve shadows and visualization

0 Answers0