CODEWITHSUNDEEP
javascriptthree.js
Michaël
Michaël

Reputation: 599

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

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

Upvotes: 3

Views: 742

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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.

Upvotes: 2

Related Questions