How to use background and lighting?

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

This is mine, it didn’t look very ideal.

Although I used some lighting(HemisphereLight、DirectionalLight)…
So, I would like to receive some of your suggestions.
Thank you!

This is the code

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.)

1 Like

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 guidance.
Thank you!

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

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