Troubleshooting GLTF Texture Issues in Three.js

When your GLTF model displays correctly in viewers like Babylon.js Sandbox or Three.js Editor but not in your own Three.js implementation, the issue likely lies in your implementation rather than the model itself. Here are some common causes and solutions for texture mapping issues:

Common Issues and Solutions

1. Texture Loading Path Issues

Make sure your GLTFLoader is correctly resolving texture paths:

JAVASCRIPTCopied
// Import the loader
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// Create loader instance
const loader = new GLTFLoader();

// Load the model with proper path handling
loader.load(
  'path/to/your/model.gltf',
  (gltf) => {
    // Model loaded successfully
    scene.add(gltf.scene);
  },
  (xhr) => {
    // Loading progress
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  (error) => {
    // Error handling
    console.error('An error occurred loading the model:', error);
  }
);

2. Lighting Setup

Improper lighting can make textures appear wrong:

JAVASCRIPTCopied
// Add ambient light for overall illumination
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// Add directional light for shadows and highlights
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

3. Material Settings

Check if you need to adjust material properties after loading:

JAVASCRIPTCopied
loader.load('model.gltf', (gltf) => {
  scene.add(gltf.scene);
  
  // Traverse all objects in the model
  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      // Ensure textures use correct settings
      if (child.material.map) {
        child.material.map.encoding = THREE.sRGBEncoding;
        child.material.needsUpdate = true;
      }
    }
  });
});

4. Renderer Configuration

Make sure your renderer is properly configured:

JAVASCRIPTCopied
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding; // Important for textures
renderer.physicallyCorrectLights = true;
renderer.gammaFactor = 2.2;

5. UV Mapping Verification

While you mentioned checking UV mappings in Blender, it's worth double-checking that the UVs are properly exported and loaded. You can inspect this in your code:

JAVASCRIPTCopied
gltf.scene.traverse((child) => {
  if (child.isMesh) {
    console.log('Mesh:', child.name);
    console.log('Has UVs:', child.geometry.attributes.uv ? true : false);
  }
});

Next Steps

1. Try loading your model with minimal scene setup (just the model and basic lighting)
2. Check the console for any errors related to texture loading
3. Inspect the loaded model's materials and textures in your code
4. Compare your renderer settings with those used in the Three.js Editor

If the issue persists, you might need to examine how the textures are referenced in your GLTF file or consider using the DRACOLoader alongside GLTFLoader for more robust loading.