After -Sammy shared their response on this thread...
Exploring THREE.JS With Multiple STL Meshes
I was able to streamline my code significantly by adding each mesh and material in sequence, assigning them names, and pushing them into arrays for easy reference.
Many thanks to -Sammy for the insight!
const loader = new THREE.STLLoader();
const meshArray = [];
const matArray = [];
const fileList = ["https://decadentlab.s3.amazonaws.com/cases/001/Upper.stl", "https://decadentlab.s3.amazonaws.com/cases/001/Lower.stl", "https://decadentlab.s3.amazonaws.com/cases/001/Mockup.stl", "https://decadentlab.s3.amazonaws.com/cases/001/Ideal.stl" ];
var callback = function ( geometry ) {
const matColors = ["0xE2D4B7", "0xAF9164", "0x437C90", "0x9EBC9E", "0xFCAB64", "0xAE8799", "0x496DDB", "0x717EC3", "0xC95D63", "0xF2AF29"];
var mats = new THREE.MeshPhongMaterial({
color: matColors[i],
specular: 0x555555,
shininess: 10
});
mats.side = THREE.DoubleSide;
mats.transparent = true;
mats.opacity = 1;
mats.name = "material" + i;
matArray.push( mats );
console.log( mats );
var mesh = new THREE.Mesh( geometry, mats );
mesh.position.set(0, 0, 0);
mesh.rotation.set(5.5, 0, 0);
mesh.name = "mesh" + i;
meshArray.push(mesh);
console.log( mesh );
scene.add( mesh );
i++;
if (i < fileList.length) // initiate the next load process within the callback
loader.load( fileList[i], callback ) ;
};
i = 0;
loader.load( fileList[i], callback );