TGA Texture Repeating Issue

Based on the image you've shared, it appears you're experiencing an issue with gaps appearing between repeated TGA textures in Three.js. This is likely related to how the TGALoader handles texture wrapping and mipmapping.

Possible Causes

When textures repeat in Three.js, gaps can appear due to several reasons:

1. Texture filtering settings - Linear filtering can cause bleeding at the edges
2. Mipmapping issues - Mipmaps can cause artifacts at texture edges
3. Non-power-of-two textures - TGA textures that aren't sized to powers of two (128, 256, 512, etc.)
4. Texture wrapping settings - Incorrect wrapping mode

Potential Solutions

Try the following adjustments to your TGA texture:

JAVASCRIPTCopied
// After loading the texture with TGALoader
const loader = new THREE.TGALoader();
loader.load('your-texture.tga', function(texture) {
    // Disable mipmapping
    texture.generateMipmaps = false;
    
    // Use nearest filtering instead of linear
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    
    // Ensure proper wrapping
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    
    // Apply to your material
    const material = new THREE.MeshBasicMaterial({ map: texture });
});

If your texture isn't a power-of-two size, consider resizing it to the nearest power of two dimensions (e.g., 256×256, 512×512) as this can help with proper texture repeating.

You can also check the example of TGALoader usage at the link provided in the documentation: webgl_loader_texture_tga to see how textures are properly handled there.