I downloaded a .json file from an online 3D editor and now I'm facing an issue while trying to load and create 20 instances of it, similar to this example. Sadly, my code seems to be flawed as all 20 instances are behaving as if they are the same object. I'm puzzled as to why they're not appearing as separate objects in their designated x,z coordinates.
var serverObject;
var allBrains = []
var xCenter;
var zCenter;
var spacing = .2;
var newServ;
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("asset_src/model.json", function(obj) {
//assigning a global name for future access
serverObject = obj
//checking the contents of the object
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
console.log(child)
}
})
//was trying to add transparency this way, but ended up
//applying it through the online editor instead
// var cubeMaterial1 = new THREE.MeshBasicMaterial({
// color: 0xb7b7b7,
// refractionRatio: 0.98
// });
//Should I instantiate my mesh like this? If so, how do I ensure it receives the materials from the json file? The json includes 6 children each with a different material
// serverObject = new THREE.Mesh( obj, cubeMaterial1 );
//creating 20 instances of the object
for (var i = 0; i < 20; i++) {
xCenter = Math.cos(toRadians(i * spacing))
zCenter = Math.sin(toRadians(i * spacing))
serverObject.scale.set(.09, .09, .09)
//offset is appropriate for the scale of my world
//intended to use xCenter, zCenter but simplified for testing
serverObject.position.set((i * .1), controls.userHeight - 1, i * .1);
allBrains.push(serverObject)
//Tried various ways to add the object to the scene, this was one attempt
scene.add(allBrains[i]);
}
//confirming the existence of 20 meshes
console.log(allBrains)
});
The output of my last console log appears as shown in the following image: https://i.sstatic.net/zHAVJ.png