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

Questions
, , ,
1

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

2

/cc

1 Like
3

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