One issue that I am encountering involves creating 100 meshes with a for loop, all of which have the same position coordinates of 0,0,0. I would like these meshes to move in different directions individually.
Below is my code for creating the 100 meshes:
for(var i = 0; i < 100; i++)
{
var geometry = new THREE.BoxGeometry(2, 2, 2);
var material = new THREE.MeshBasicMaterial( { color: 0x2194ce} );
mesh = new THREE.Mesh( geometry, material);
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
scene.add(mesh);
}
The following code was intended to move the 100 meshes separately, but it currently only moves one mesh:
function render(){
requestAnimationFrame( render );
mesh.position.x +=0.1;
renderer.render(scene, camera);
}