ThreeJS bad material render

I have created an object in Blender, applied textures and exported as GLB file. Then I have imported it into a ThreeJS scene through GLTFloader. However, the textures look rather different to those from blender (pic attached). The metal texture is the most worrying one. Despite the color of the material is good, it has some big strips of different color. Even in the BabylonJS sandbox the final GLB looks amazing.

What I am missing? Is it the problem with Blender exported or ThreeJS scene code? Would really appreciate your help.

Bad one (in HTML)

Good (in Sandbox)

And of course, you can see that even carbon texture is not as good as in Blender. Is it the same issue or something different?

semiFin - Copy.html (9.1 KB)

If sRGBEncoding then need for diffuse textures use


or maybe into exporter can select srgb encoding

Thanks, it got a bit better. But the low-quality marks still remain. Is there a chance it looses quality or something?

I think yes. Because in three.js example of gltf loader all good.
Need to see. Maybe metall texture have metalness texture which too have srgb encoding, but for good result metalness texture must have default encoding. Can u load here gltf file.
I was have bad output then use effectcomposer but found mugen solution

You use three.js version 116 there ACESFilmicToneMapping have number 5. But at version 142 it have number 4 and may have many differenrs of encoding. Use new version of all

The problem is that RoughnessMipmapper is only valid up to version 136. It does not exist in 142. If I try to move to 142 (with RoughnessMipmapper being on R116 let say), it create an error

I used last version


Cool. I guess switching to newer versions made model to look much better. However, I did not get the bit with CUBEUV definitions? I am using CND’s so cant really change source code. Can i define then within the script?

Need modify THREE.ShaderChunk["cube_uv_reflection_fragment"]

Right. I managed to do that, and there are results:

Before fix (with an error as below) it still looks brilliant:


Then, solved error by
THREE.ShaderChunk[“cube_uv_reflection_fragment”] = cube_uv_reflection_fragment2; (which includes CUBEUV_… stuff). but the picture not as good as before.

Whats the case? I tried editing mipmap values from 0 to 40, but still bad.

Maybe THREE.ShaderChunk[“cube_uv_reflection_fragment”] not change material as need. I dont know