Phantom Texture Issue with Armature Modifier in glTF Export

This is a known issue that can occur when exporting models with armature modifiers from Blender to glTF format. The "phantom texture" you're experiencing is likely related to how the glTF format handles skinned meshes and their associated data.

Understanding the Issue

When you have an armature modifier in Blender, the glTF export process creates additional data structures to represent the skinning information. This can sometimes result in unexpected texture references being included in the export, even when no textures are explicitly assigned to the model.

Possible Solutions

1. Use GLTFExporter's Texture Handling Options:
   The GLTFExporter in Three.js has options to control how textures are processed. You might want to explore these options to see if they can help with your issue:

   JAVASCRIPTCopied
   const exporter = new GLTFExporter();
   const options = {
     // Set texture handling options
     embedImages: false,
     // Other options as needed
   };
   exporter.parse(scene, function(gltf) {
     // Handle the exported glTF
   }, options);

2. Manual Texture Cleanup After Loading:
   After loading the model with GLTFLoader, you could implement a function to specifically identify and remove unwanted textures:

   JAVASCRIPTCopied
   function cleanupPhantomTextures(object) {
     object.traverse((node) => {
       if (node.isMesh && node.material) {
         // Check if material has textures you want to remove
         if (node.material.map && !node.material.map.isNeeded) {
           node.material.map.dispose();
           node.material.map = null;
         }
         // Check other texture types as needed
       }
     });
   }
   
   // After loading the model
   gltfLoader.load('model.glb', (gltf) => {
     const model = gltf.scene;
     cleanupPhantomTextures(model);
     scene.add(model);
   });

3. Modify the Blender Export Process:
   Instead of applying the armature modifier (which breaks animations), you could try:

   • Using a different glTF exporter plugin for Blender
   • Adjusting the export settings in Blender's glTF exporter
   • Creating a separate UV map that's not connected to any textures

4. Use a Post-Processing Tool:
   You could use a glTF processing tool like glTF-Transform to clean up the exported file before loading it into Three.js.

Best Practice for Texture Disposal

When disposing of textures in Three.js, ensure you're using a comprehensive approach:

JAVASCRIPTCopied
function disposeScene(scene) {
  scene.traverse((object) => {
    if (object.geometry) {
      object.geometry.dispose();
    }
    
    if (object.material) {
      if (Array.isArray(object.material)) {
        object.material.forEach(material => disposeMaterial(material));
      } else {
        disposeMaterial(object.material);
      }
    }
  });
}

function disposeMaterial(material) {
  // Dispose textures
  for (const key in material) {
    if (material[key] && material[key].isTexture) {
      material[key].dispose();
    }
  }
  
  material.dispose();
}

This issue highlights one of the complexities of working with 3D model formats and their conversion processes. The GLTFExporter is your best tool for addressing this when working within Three.js.