How to use background and lighting in three.js?

Hello everyone, I have a difficult problem that I need your help with now.
This is someone else’s work, great:

This is my:

Although I also used some lighting(HemisphereLight、DirectionalLight), it didn’t look very ideal.
So, I would like to receive some of your suggestions. Thank you!
This is the code

You can use scene.background and scene.environment (together with a nice HDRI and scene.backgroundBlurriness.)


Yes, you are right. I adopted your method and achieved very good results.

There is another issue here, I used HDR (sunflowers_puresky_4k.hdr) as the background. But this HDR file size is very large(20M). Is there any way to compress it?

   const rgbeLoader = new RGBELoader();
                rgbeLoader.load("sunflowers_puresky_4k.hdr", (texture) => {
                    texture.mapping = THREE.EquirectangularReflectionMapping;

                    scene.background = texture;
                    scene.environment = texture;

                    cube.material.envMap = texture;
                    cube.material.needsUpdate = true;

Yeah, HDRs tend to be heavy, it is a lot of data after all. If your materials don’t need specular/sharp reflections you can use a blured/smaller HDR to save some bandwidth.

Another approach is to convert your HDR to RGBM format, which is an efficient way to pack high dynamic range data in 8bit per channel image (i.e. a simple PNG file), please see this two official examples for simple texture loading and env reflection use cases