Hello everyone, I have a difficult problem that I need your help with now. This is someone else’s work, it’s great. [Screenshot 2024-03-16 162311] This is mine, it didn’t look very ideal. [捕获01] Although I used some lighting(HemisphereLight、DirectionalLight)… So, I would like to receive some…

Consider using an HDRI as scene.environment and scene.background - it makes the scene look a bit prettier in general (and is cheaper than using multiple lights in the scene, when you’re using HDRIs you don’t need to add any lights to the scene.)

When you apply a HDR environment map to the scene’s background, you can blur it like in the screenshot by setting a value like 0.3 or 0.5 for Scene.backgroundBlurriness . Check out the tone mapping example if you need a code template: three.js webgl - tone mapping

Yes, that’s a good idea. I tried it and the effect was very good. But at the same time, we encountered another issue: the HDR file size is too large(20M). I don’t know if there’s any way to compress it. Have you ever encountered this kind of problem before? If possible, I hope to receive your gui…

I used an HDR JPG image as the scene background and object texture, which can be referenced . Here is the code

The problem has been resolved. Thank you very much for your help

How to use background and lighting?

Questions

Mugen87 March 21, 2024, 1:45pm 5

@nieyuan1980 Please continue the discussion about smaller HDR file sizes in Can HDR be compressed?.

Topic		Replies	Views
How to use background and lighting in three.js? Questions geometry	3	769	March 19, 2024
Why HDR backgrounds are so poor quality Questions hdr	6	1755	June 6, 2022
Reduce the size of .HDR files Questions textures , hdr	2	2571	January 26, 2024
Can HDR be compressed? Questions textures , hdr	23	3457	May 1, 2024
Trouble Rendering HDR Background in Three.js project Questions blender , textures , hdr	3	114	June 28, 2025

How to use background and lighting?

Related topics