I got rid of all my fluff to make this example and hoping it makes it easier for you to help me.
https://decadent3d.s3.amazonaws.com/help1.html
https://decadent3d.s3.amazonaws.com/help2.html
The only difference between the two is, scene.add() is commented out.
I create arrays of geometry, materials, then meshes. Everything looks good, the mesh is mesh. but adding to scene is a no go. Hope someone can point me in the right direction.
best, newb
Thanks to a reply by -Sammy to this post... THREE.JS loading an array of STL Meshes
my solution is a much smaller code block, each mesh and material is added, assigned a name in sequence, and pushed to mesh and material arrays.
Thanks -Sammy
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) // put the next load in the callback
loader.load( fileList[i], callback ) ;
};
i = 0;
loader.load( fileList[i], callback );