Approximating Sketchfab's lighting on this cityscape

I’ve been trying for days to replicate a similar light system as seen on this Sketchfab model (located here). It doesn’t need to be exact, but I’d like the colors to be somewhat close and, for the life of me, I cannot get the car to brighten up or illuminate very much at all. I’m currently using one hemisphere and two directional lights, but I have no idea if I’m chasing my tail.

I can’t get shadows to work either, but I assume that’s just a result of the export process from Sketchfab. (Please do correct me if I’m wrong). I also know Sketchfab uses a different (custom) library altogether to display their models, but I figure three.js should still be able to approximate the lighting on this piece. Is it possible? Can someone test it out and see if they have more success?

Thank you for reading and I appreciate any help you can offer.

These shadows are actually not exported but rendered in real-time. In other words: They are no part of the model.

1 Like

I had a closer look to the Sketchfab scene and you need a HDR environment map in order to achieve a similar result (e.g. you can clearly see the reflections of the background at the car). Use the code from the official glTF example in order to load such a map. You then have to apply it to all meshes of your glTF asset.

https://threejs.org/examples/webgl_loader_gltf

The scene also uses some sort of post-processing in order to achieve the final result. However, I’m not sure what exactly they are doing. When you open the model inspector at Sketchfab, you can disable post-processing to see the rendering without additional effects.

1 Like

These shadows are actually not exported but rendered in real-time. In other words: They are no part of the model.

Apologies for not understanding, but are you saying I should be able to have the buildings (and other parts of the GLTF) cast and receive shadows?

If so, that’s one more thing I’m doing wrong that I’ll have to figure out.

Yes. However, you have to add a light to your scene that casts shadows e.g. a directional light. You need to set the position, color and intensity in a way so it fits to your respective environment map. Otherwise the lighting might not look “right”.

1 Like