ThreeJS only loading a small number of images queued for loading with TextureLoader?

Questions
,
1

I have a scene with several group objects. Each group object has about 20 or less child objects. It rendered fine for quite a while. Then I moved the assets to an AWS S3 bucket, with public access and a good CORS policy. I then added about 10 new assets to the world. Now most of the images are not loaded by the text loader. I know the CORS policy works because as I said, it worked fine before. Also, if the CORS policy was incorrect, none of the assets would load and as you can see, a small percentage do load properly. Also, I did try clearing my browser cache.

I checked the Chrome DevTools console and I am not getting any errors from the error functions I have in my THREE.TextLoader().load() call. What can I do to fix this?

Here is my loader code:

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;
}

Here is an older screenshot that shows a group object properly loaded:

image
image1632×620 124 KB

Here is what it looks like now with the loading problem:

image
image1632×656 110 KB