Fixing Texture Loading Issues in Three.js

Based on your code, I can see you're using the MTLLoader, OBJLoader, and EXRLoader to load your photogrammetry model. The issue with the black spots is likely related to how the textures are being applied to the materials. Let me suggest some improvements to your texture loading approach.

Key Issues and Solutions

1. Texture Assignment: When working with multiple materials and textures, you need to ensure they're correctly mapped to the right material slots.

2. EXR Handling: EXR files are HDR images and need special handling in Three.js.

3. Material Properties: You might need to adjust additional material properties beyond just assigning the map.

Here's an improved version of your loadModel function:

JAVASCRIPTCopied
loadModel() {
  const onProgress = (xhr) => {
    if (xhr.lengthComputable) {
      const percentComplete = (xhr.loaded / xhr.total) * 100;
      this.loadingBar.style.width = `${percentComplete}%`;
      console.log(`${percentComplete.toFixed(2)}% downloaded`);

      if (percentComplete === 100) {
        setTimeout(() => {
          this.loadingContainer.style.display = 'none';
        }, 500);
      }
    }
  };

  // Configure EXR loader with proper settings
  const exrLoader = new EXRLoader()
    .setPath('/model/')
    .setDataType(THREE.FloatType); // Important for HDR textures

  // Load textures first
  const texturePromises = [
    new Promise((resolve) => {
      exrLoader.load('texture_1001.exr', (texture) => {
        // Configure the texture properly
        texture.encoding = THREE.LinearEncoding;
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.flipY = true; // Try with both true and false
        resolve(texture);
      });
    }),
    new Promise((resolve) => {
      exrLoader.load('texture_1002.exr', (texture) => {
        // Configure the texture properly
        texture.encoding = THREE.LinearEncoding;
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.flipY = true; // Try with both true and false
        resolve(texture);
      });
    }),
  ];

  // Load materials and model after textures are ready
  Promise.all(texturePromises).then((textures) => {
    new MTLLoader()
      .setPath('/model/')
      .load('texturedMesh.mtl', (materials) => {
        materials.preload();

        new OBJLoader()
          .setMaterials(materials)
          .setPath('/model/')
          .load(
            'texturedMesh.obj',
            (object) => {
              object.traverse((child) => {
                if (child.isMesh) {
                  console.log("Found mesh:", child.name);
                  
                  if (Array.isArray(child.material)) {
                    console.log("Material array length:", child.material.length);
                    
                    // Apply textures to the appropriate materials
                    if (child.material.length >= 1) {
                      child.material[0].map = textures[0];
                      child.material[0].needsUpdate = true;
                    }
                    
                    if (child.material.length >= 2) {
                      child.material[1].map = textures[1];
                      child.material[1].needsUpdate = true;
                    }
                    
                    // Log material properties for debugging
                    child.material.forEach((mat, index) => {
                      console.log(`Material ${index}:`, mat);
                    });
                  } else {
                    // Single material case
                    console.log("Single material:", child.material);
                    child.material.map = textures[0];
                    
                    // Try different approaches for the second texture
                    // Option 1: Use as emissive map
                    child.material.emissiveMap = textures[1];
                    child.material.emissive = new THREE.Color(1, 1, 1);
                    
                    // Option 2: Create a multi-material setup
                    // const materials = [
                    //   new THREE.MeshStandardMaterial({ map: textures[0] }),
                    //   new THREE.MeshStandardMaterial({ map: textures[1] })
                    // ];
                    // child.material = materials;
                    
                    child.material.needsUpdate = true;
                  }
                }
              });

              object.position.y = -0.95;
              object.rotation.set(Math.PI / 4, Math.PI - (25 * (Math.PI / 180)), 0);
              this.camera.position.set(0, 0, 50);
              object.scale.setScalar(0.01);
              this.scene.add(object);
              this.loadingContainer.style.display = 'none';
            },
            onProgress
          );
      });
  });
}

Additional Recommendations

1. Inspect the MTL file: Check if it correctly references both textures. The MTL file defines how materials should be applied.

2. Debug Material Structure: Add more console logs to understand the structure of your materials after loading:

   JAVASCRIPTCopied
   console.log("Material structure:", JSON.stringify(child.material, (key, value) => {
     if (key === 'map' || key === 'emissiveMap') return value ? 'texture present' : 'no texture';
     return value;
   }, 2));

3. Try Different Texture Types: If the second texture is meant for something other than color (like normal maps, roughness, etc.), try assigning it to the appropriate property:

   JAVASCRIPTCopied
   // Try these different options:
   child.material.normalMap = textures[1];
   // or
   child.material.roughnessMap = textures[1];
   // or
   child.material.metalnessMap = textures[1];

4. Check UV Mapping: The black spots might indicate issues with UV mapping. Ensure your model has proper UV coordinates for both texture maps.

5. Consider Using GLTFLoader: If possible, consider exporting your model as GLTF instead of OBJ/MTL, as it handles materials and textures more consistently.

Let me know if these suggestions help resolve your texture loading issues!