Adding to scene from array of mesh - t is undefined in three.js - what am i missing?

I got rid of all my fluff to make this example and hoping it makes it easier for you to help me.

html page1

html page2

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.

screencap_of_inspect

best, newb

/cc

1 Like

my solution that works, except the color, i will fix that later…
each material, mesh, is named in sequence and also pushed to an array for accessing without getting any objects by id/name. its also a much smaller block of code now. thanks to this posts reply by 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 );