Lighting for interior

[doum]

I’m making a project for interior like showroom.littleworkshop.fr,

I don’t know what’s config the light for this object. Current I using only HemisphereLight and AmbientLight. then this’s my result

I read the source code from donmccurdy
material.envMap = envMap;

[Mugen87]

Do you want to achieve reflections similar to the table in the showcase? Using an environment map is the right approach for this. However, the reflections highly depends on the material configuration. It might be easier to provide useful feedback if you show you the rest of your material is set up.

Apart from the reflections, the demo uses ambient occlusion maps in order to create the realistic lighting in the room. Achieving a similar effect just with some lights and without post-processing is not possible with three.js. If you google “ambient occlusion maps”, “lightmaps” or “baked lighting”, you will find many resources for this topic.

[doum]

@Mugen87

Do you want to achieve reflections similar to the table in the showcase? Using an environment map is the right approach for this. However, the reflections highly depends on the material configuration. It might be easier to provide useful feedback if you show you the rest of your material is set up.

Apart from the reflections, the demo uses ambient occlusion maps in order to create the realistic lighting in the room. Achieving a similar effect just with some lights and without post-processing is not possible with three.js . If you google “ambient occlusion maps”, “lightmaps” or “baked lighting”, you will find many resources for this topic.

I using https://gltf-viewer.donmccurdy.com/ for review my object like this !

Is this correct ?
I realized they used a lot of different envMap for each object, whether this makes the project complicated

[looeee]

@Mugen87

Using an environment map is the right approach for this.

EDIT: Since I wrote this there was a box projected cube map example added, and then removed from three.js. You can find the code here.

Using an environment map is the best approach available in three.js.
It’s not the correct approach for indoor scenes though since it assumes an environment at an infinite distance.

I don’t think it would be possible to get the correct parallax from the windows on the coffee table like this using an environment map:

Instead, you would need to use light probes or something similar.

Then again, the more I look at it, the less correct the window reflection looks to me so maybe they are using an environment map

[Thanh_Ha]

I want to build a room like this too. But I can not get the idea. Was the showroom built form ‘gltf file’?

[Mugen87]

The showcase is now many years old and at that time glTF was not that established like today. The project used a custom JSON format for defining the scene. If you want to develop a similar application now, I would recommend to use glTF.

[Thanh_Ha]

Do you know how to create a list sphere to choose material for object when click to it like that showroom?