How i can get clean light?

Hello , how i can get a clean light like real light , cuz when i add light it look like a group of circle ?

Bad news, you “can’t”, it doesn’t cast rays and it therefore doesn’t have global illumination, soft shadows and ambient occlusion. Some of these are possible with post processing but that’s usually quite expensive to just run over the scene.

Good news, you can make it look real by faking realism as best as you can:

  • Bake lights in blender and you have realism, nothing will beat this. But it only works for static objects and is a nightmare to accomplish. Bruno Simons Threejs journey course has the best overview i have seen so far, nothing on Youtube came even close to his content.
  • Use correct gamma, see: Color Management in three.js If you’re lighting a scene without baking then this is the #1 key. Three has a linear colorspace by default and wrecks your colors and lights.
  • Use environment maps as much as you can, they are the closest thing to natural lighting.
  • If you learn a bit about light positioning you can get pretty good results even with harsh spot, point and directional lights. Like in photography, a fill (ambient-light), main from above left or right, strip from behind left or right.

If you’re using React there are components that do all this for you: This is similar to model-viewer but looks way more realistic. In plain three it’ll cost you some boilerplate but the fundamentals above are all the same.

PS. in case you’re just wondering about the circular spot, the prop that makes it soft is called “penumbra”.