How to achieve a look similar to Windows 3D Viewer?

Questions
1

Hey there, I am asking a pretty generic question and I am hoping someone can point me in the right direction!

Currently in my Three.js app I am running into the issue of my 3D render looking “flat”, there is also no depth in my current render. Shadows are not showing, and there is no “floor” for my 3D model to sit upon.

Windows has a 3D Viewer that does EXACTLY what I want, here is what a 3D desk looks like in the my project vs Windows 3D Viewer.

My Project:

[Album] my Three.js desk

Windows 3D Viewer:

[Album] Windows 3D Viewer Desk

How can I achieve this look? It seems to have a floor of some sort in the 3D viewer and also has a spotlight of some sort going down on top of the object?

Any help with this would be GREATLY appreciated, thank you for any help in advance! I have been enjoying Three.js a bunch and am getting pretty close on my project! Check out the current build of my project here if you are curious, https://cooperlappenbusch.github.io/3DDeskSetup/ (I can’t promise it is a working build at all times).

1 Like
2

Have you tried a similar setup like in this demo?

https://threejs.org/examples/#webgl_animation_skinning_blending

Indeed, rendering shadows will make the scene looking more natural. Also combining this with fog will give you a nice fading background.

3

I will try this out tonight, thank you for the response! I will mark as solution if I get to the intended result.

4

another thing that’s most definitively involved is proper gamma encoding, this gives you the flatter, even, less saturated, but more realistic tone, whereas the default can look fake and plasticky at times.

renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.outputEncoding = THREE.sRGBEncoding
1 Like