How to update texture of cloned mesh without updating the original mesh

Questions
, ,
1

I have a mesh1 and a mesh2 that’s cloned from mesh1.
I want to update the texture of mesh2 like the following code, but it updates the texture of mesh1 as well. How do I change the texture of only mesh2?

const textureLoader1 = new THREE.TextureLoader();
const texture1 = textureLoader1.load('path/to/image1.jpg');
const mesh = new THREE.Mesh(
	new THREE.PlaneGeometry(width, height),
	new THREE.MeshBasicMaterial({map: texture1, side: THREE.DoubleSide})
);

const clonedMesh = mesh.clone();
const textureLoader2 = new THREE.TextureLoader();
const texture2 = textureLoader2.load('path/to/image2.jpg');
clonedMesh.material.map = texture2;
clonedMesh.material.map.needsUpdate = true;

Thanks in advance.

2

Materials are reused when cloning a mesh. To modify a property of the material on only one mesh, you’ll need to clone the material as well.

1 Like
3

@donmccurdy
Thank you so much.

need to clone the material as well

I couldn’t figure out how exactly to do this.
(I thought it was some kinda option for object.clone(), but couldn’t find such option.)

I’d appreciate it a lot if you could provide an example short code.

4

Sure:

const mesh2 = mesh1.clone();
mesh2.material = mesh2.material.clone();
1 Like
5

@donmccurdy
It works! Thank you so much!!