UV Map Issues with Baked Textures in Three.js

Based on your description and images, I can see you're having issues with applying a baked texture to your model in Three.js. The problem likely relates to how Three.js handles multiple UV maps when importing GLB files.

Potential Issues

1. UV Map Selection: Three.js typically uses the first UV map (UV0) by default when applying textures. If your baked texture is meant for the second UV map (UV1), this could explain the misalignment.

2. Material Configuration: When creating materials in Three.js, you need to explicitly tell it which UV map to use for the texture.

Solutions

Option 1: Export with the Baking UV Map as UV0

The simplest solution would be to rearrange your UV maps in your 3D software before export, making the baking UV map the first UV channel (UV0).

Option 2: Configure Material to Use the Second UV Map

If you need to keep your UV maps in their current order, you can tell Three.js to use the second UV map for your texture:

JAVASCRIPTCopied
// Load your model and texture
const textureLoader = new THREE.TextureLoader();
const bakedTexture = textureLoader.load('path/to/your/baked_texture.jpg');

// When setting up your material
const material = new THREE.MeshBasicMaterial({ 
  map: bakedTexture 
});

// After loading your model
loader.load('your_model.glb', (gltf) => {
  const model = gltf.scene;
  
  // Find all meshes and update them to use the second UV set
  model.traverse((child) => {
    if (child.isMesh) {
      // Make sure the geometry has the second UV set
      if (child.geometry.attributes.uv2) {
        // Tell Three.js to use uv2 instead of uv for this texture
        child.geometry.attributes.uv = child.geometry.attributes.uv2;
      }
      
      // Apply your material
      child.material = material;
    }
  });
  
  scene.add(model);
});

Option 3: Use a Custom Shader Material

For more complex scenarios, you might need a custom shader material:

JAVASCRIPTCopied
const customMaterial = new THREE.ShaderMaterial({
  uniforms: {
    bakedTexture: { value: bakedTexture }
  },
  vertexShader: `
    attribute vec2 uv2;
    varying vec2 vUv2;
    
    void main() {
      vUv2 = uv2;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D bakedTexture;
    varying vec2 vUv2;
    
    void main() {
      gl_FragColor = texture2D(bakedTexture, vUv2);
    }
  `
});

Additional Considerations

• Make sure your baked texture resolution matches what you used during the baking process
• Check if your UV islands in the baking UV map are properly laid out without overlaps
• Verify that the texture coordinates in Three.js match what you see in your 3D software

By addressing these issues, you should be able to correctly apply your baked texture using the appropriate UV map in Three.js.