I am looking to create 100 identical cubes with a gradual decrease in opacity for each cube. This is my current loop implementation:
var geometry = new THREE.BoxGeometry(0.15,0.15,0.15);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
cube.material.transparent = true;
scene.add(cube);
for(let i = 0; i < 100; i++){
window['cube'+i] = cube.clone();
window['cube'+i].position.x = i;
window['cube'+i].material.opacity = 1 - (0.01*i);
scene.add(window['cube'+i]);
}
However, all the cubes end up having the same final opacity value. I'm puzzled as to why this is happening despite the x position increasing correctly.
If anyone has any suggestions on how to individualize the opacity property for each cube, I would greatly appreciate it. Thank you!