Tengo una escena con varios objetos de grupo. Cada objeto de grupo tiene alrededor de 20 o menos objetos secundarios. Estuvo bien durante bastante tiempo. Luego moví los activos a un depósito de AWS S3, con acceso público y una buena política de CORS. Luego agregué alrededor de 10 nuevos activos al mundo. Ahora la mayoría de las imágenes no son cargadas por el cargador de texto. Sé que la política de CORS funciona porque, como dije, funcionó bien antes. Además, si la política de CORS fuera incorrecta, ninguno de los activos se cargaría y, como puede ver, un pequeño porcentaje se carga correctamente. Además, intenté borrar la memoria caché de mi navegador.

Revisé la consola de Chrome DevTools y no recibo ningún error de las funciones de error que tengo en mi llamada THREE.TextLoader().load(). ¿Qué puedo hacer para arreglar esto?

Aquí está mi código de cargador:

 function createMaterialFromImage(srcUrl, bIsRepeated=false) { const errPrefix = `(createMaterialFromImage) `; if (misc_shared_lib.isEmptySafeString(srcUrl)) throw new Error(errPrefix + `The srcUrl parameter is empty.`); // Make sure an attempt to load a GIF file is not made with // this function. if (srcUrl.toLowerCase().endsWith('.gif')) throw new Error(errPrefix + `The srcUrl parameter is a GIF file: ${srcUrl}.`); if (typeof bIsRepeated !== 'boolean') throw new Error(errPrefix + `The value in the bIsRepeated parameter is not boolean.`); const threeJsMaterial = new THREE.MeshBasicMaterial(); const loader = new THREE.TextureLoader().load( // resource URL srcUrl, // This function fires when the resource is loaded. function ( theTexture ) { // If the image is to be repeated, set the wrap // properties to THREE.RepeatWrapping, otherwise // use the default wrapping which is THREE.ClampToEdgeWrapping. theTexture.wrapS = bIsRepeated ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping; theTexture.wrapT = bIsRepeated ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping; // Assign the texture value to the material map when the texture is loaded. threeJsMaterial.map = theTexture; }, // This function will be called as the download of an // image progresses. function ( xhr ) { const pctLoaded = xhr.loaded / xhr.total * 100; console.info(`${errPrefix}${pctLoaded}}% loaded. Resource: ${srcUrl}.`); }, // This function will be called in the event of an error. function ( xhr ) { console.error( `${errPrefix} Download failed for resource: ${srcUrl}.`); } ); // Return the threeJsMaterial we created the desired image. return threeJsMaterial; }

Aquí hay una captura de pantalla anterior que muestra un objeto de grupo cargado correctamente:

Así es como se ve ahora con el problema de carga: