three.js clone() property changes for all my meshes

user_5069236 0
Viewed 253

I would like to create 100 clones of a simple cube and decrease gradually the opacity of each cube. Here's the loop I have :

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

Unfortunately, all my meshes end with the last opacity established. I don't understand why all my meshes have the same opacity while the x position increase normally.

Does anyone have an idea on how to separate each opacity property ? Thank you

three.js javascript
1 Answers

Cloning a mesh does not clone its geometry and material by default for performance reasons. If you want to control the opacity per mesh, it's best to clone the material for each instance.

user_52508470
Related