How to use background and lighting in three.js?

Questions
1

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

Screenshot 2024-03-16 162311
Screenshot 2024-03-16 1623111176×684 42.4 KB

This is my:

捕获01
捕获011894×918 139 KB

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

2

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

2 Likes
3

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;

                    //将加载的材质texture设置给背景和环境
                    scene.background = texture;
                    scene.environment = texture;

                    cube.material.envMap = texture;
                    cube.material.needsUpdate = true;
                    this.render();
                });
4

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