Could Someone Give me Advice with Texture Mapping on Imported GLTF Models in Three.js?

Questions
,
1

Hello there, :wave:

I am new to Three.js and have been experimenting with importing 3D models using the GLTFLoader. While I have had success loading models into my scene, I am encountering an issue with texture mapping on the imported objects.

I have created a simple model in Blender, applied materials and textures, and exported it as a GLTF/GLB file. When I load the model into my Three.js scene; the geometry appears fine, but the textures look either stretched; misaligned; or sometimes missing altogether.

Strangely; when I load the same GLTF file into an online viewer like the Babylon.js Sandbox or the Three.js Editor, the textures look perfect.

I’ve tried adjusting the material properties and UV mappings in Blender, but the issue persists. I also verified that the textures are included in the exported GLTF file. Am I missing something in my Three.js setup that could be causing this problem? :thinking:

Also, I have gone through this post; https://discourse.threejs.org/t/need-help-on-imported-gltf-model-with-changing-texture-of-it-machine-learning which definitely helped me out a lot.

Could it be related to the way I am handling lighting, renderer settings, or textures in the Three.js scene?

Thanks in advance for your help and assistance. :innocent:

2

What three.js version are you using? Older three.js versions did have some limitations especially with multiple UV sets or UV transforms. And, upon loading are you making any changes to the three.js materials or textures in your application?

3

First, ensure that your textures are being correctly loaded in your Three.js setup.
Second, you should check UV map in blender.

Online viewers like the Babylon.js Sandbox or the Three.js Editor might use slightly different Three.js versions. Ensure your Three.js version aligns with the one used in the viewer.