Three.js: Clone mesh doesn't clone its material and geometry objects

[marcobraghim]

Description of the problem

When I try to clone a mesh object I expect it will be full cloned, with "new" material and geometry objects. Is this behavior on purpose?

Three.js version

• [ ] Dev
• [x] r93
• [ ] ...

Browser

• [ ] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer
• [x] chromium (nw js actually)

OS

• [ ] All of them
• [ ] Windows
• [ ] macOS
• [x] Linux
• [ ] Android
• [ ] iOS
  

[donmccurdy]

Hi @marcobraghim, this is as intended. There is a high performance cost to deeply cloning materials, textures, and geometry — not just while duplicating them, but higher cost to render after that. Because you generally want to have as few materials and geometries as possible, it's better to clone only what you need:

mesh2 = mesh1.clone();
mesh2.traverse((node) => {
  if (node.isMesh) {
    node.material = node.material.clone();
  }
});

[marcobraghim]

It's really interesting and make me think if I need to change my strategy related to the materials and whole performance stuff at all... Thank you.