Three.js: Clone Mesh & Material » Toggle opacity of clone

0
votes

With the command Mesh.clone(); you can clone the mesh. A search revealed that the geometry and material are retained. However, I would like to control the opacity of both meshes differently. Therefore I assume that I have to clone the material as well.

Is there a way to copy a mesh including material so that I can control opacity of the new mesh separately from the original mesh?

1
javascriptthree.jsclonemesh

1 Answers

2
votes

You are correct. The material is shared when making a clone. A solution is to create a new material for each mesh and copy over the values of the existing material. (Uses a bit more memory but should not affect the framerate?)

You could however do something like

let nMesh = new THREE.Mesh( 
    oldMesh.geometry.clone(), 
    new THREE.MeshPhongMaterial().copy( oldMesh.material )
);

Create a new Mesh made from a clone of the geometry and a new material of choice and copy the values of the old material. Or, clone the mesh and replace the material (and copy the original). You do have to update the material, since you changed it after initialization.

let nMesh = oldMesh.clone();
nMesh.material = new THREE.MeshPhongMaterial().copy( oldMesh.material );
nMesh.material.needsUpdate = true;

I'm not sure if you have to use the same type of material, or that it automatically converts to the right type.