A big difference between the render in blender and in gltf loader/viwer

please see the attached image for more information. When I export a gltf file from Blender and try to import into threejs, these details are missing and creating a big difference in both renders.
I’m trying to find anybody who is aware of this issue.

Of course its totally diffrent.
It has the diffrent lights / materials , even diffrent renderer.
And I think you forget to load an enviorement texture to your scene in your real-time renderering threejs , and your blender files seems to be Raytraced rendering.

Thankyou for highlighting things, I will surely check for these.
Please just let me know Is there any way to get somehow similar results? I can understand that in three.js I cannot get this much realistic result.

I am very beginner in threejs can you please confirm does these settings need to be done in threejs part or in the modeling part?

We won’t be able to look at the screenshot and tell you how to make the images match; there’s no simple answer to that in general. There are a ton of differences between Blender and three.js, and we’d be totally guessing without the source files, or knowing what materials and lighting were used. Many things Blender can do (e.g. the Cycles pathtracer, node-based materials) cannot simply be exported with a model in any format, they are Blender-specific. A few examples:

  • for soft shadows like Blender shows, you’ll probably want to look for tutorials on “baked ambient occlusion”
  • for reflections off the floor, you might look into “screen space reflections”
  • for the missing images, I’m not sure but check that your materials are configured according to the Blender exporter documentation

If you use the same lighting setup in both, and do color management correctly, then Blender’s Eevee renderer and three.js can often be set up to look very similar.

Thankyou!

I’ll look into these settings.

I didn’t work with GLTF models much, but in case it helps comparing, Microsoft 3D Viewer (part of Windows 10) is able to open .gltf files as well. If it shows the same result as GLTF Viewer, then you know that you’d have to set the export from Blender properly so you can get a similar outcome. If it doesn’t and it matches what you see in Blender, then the culprit is somewhere else.

Oh, and I can also confirm that Blender’s output can be matched by the Three.js one. I didn’t export the GLTF model from Blender, but my Earth globe made from Blender exported images (Eevee) looks very much the same as the replica that I wrote for Three.js.

1 Like