在Three.js/drei中加载模型时，如何为材质生成唯一UUID避免颜色联动？

你遇到的是材质实例共享的问题——A和B材质其实指向同一个Three.js材质对象，所以修改其中一个的color属性，另一个自然跟着变。UUID是Three.js自动分配的对象唯一标识，主要用于场景序列化、对象查找等场景，无法解决材质实例共享导致的联动修改问题，核心解决方案是让每个需要独立控制的网格拥有独立的材质实例。

具体解决步骤：

• 加载模型后，为需要单独控制的网格克隆材质：使用material.clone()方法生成新的材质实例，替换原材质。
• 单网格处理示例：

  const mesh = useLoader(GLTFLoader, modelUrl).scene.children[0];
  // 克隆材质，打破实例共享
  mesh.material = mesh.material.clone();
  // 此时修改该材质颜色不会影响其他网格
  mesh.material.color.set('#ff0000');
  

• 多网格批量处理：如果模型内多个网格共享同一材质，遍历所有网格逐个克隆：

  const model = useLoader(GLTFLoader, modelUrl);
  model.scene.traverse((child) => {
    if (child.isMesh) {
      child.material = child.material.clone();
    }
  });
  

内容的提问来源于stack exchange，提问作者LLS