I'm attempting to create multiple copies of a mesh randomly positioned throughout my THREE.Js scene. To achieve this, I have utilized the clone() method within a for loop. The console displays an array showcasing the clones I generated, however, when trying to access individual elements within the array, the console returns undefined to me. Here is the code snippet I implemented:
let ball = new THREE.Mesh();
loader.load('./ball.gltf', function ( gltf ) {
gltf.scene.traverse(function(model) { //for gltf shadows!
if (model.isMesh) {
model.castShadow = true;
model.material = sphereMaterial;
}
});
ball = gltf.scene
scene.add(ball);
for (let i = 1; i <= 9; i++) {
let newBall = ball.clone()
scene.add(newBall)
newBall.position.set(Math.floor(Math.random() * 20) * 2 - 10, Math.floor(Math.random() * 20) * 3 - 10, Math.floor(Math.random() * 20) * 2 - 10)
pos_arr.push(newBall)
}
}, undefined, function ( error ) {
console.error( error );
} );When I call console.log(pos_arr), this is what I see:
https://i.sstatic.net/Uc5bx.png
Subsequently, upon calling something like console.log(pos_arr[2]), all that's returned is undefined.
Is there anyone who might have insight into what could be causing this issue?