【threejs】材质共享导致的典型问题

"Three.js 材质共享问题 " 是很多人加载 GLB / 复制模型时都会踩的坑之一。
通俗易懂 + 实战导向的方式，一步步讲清楚它的原理、坑点与解决方案。

---

🎯 一、问题核心：材质是「引用」而不是「拷贝」

在 Three.js 中，多个 Mesh 可能共享同一个材质实例，例如：

meshA.material === meshB.material; // ✅ true

这意味着：

当你修改 meshA.material.color，meshB 的颜色也会被同步改变。

---

🧠 二、为什么会出现材质共享？

常见于以下几种情况👇：

1️⃣ GLTF/GLB 导入

同一个材质在 Blender 中复用多处 → 导出时 Three.js 只创建一个材质实例。

2️⃣ 复制模型时（clone() / copy()）

Object3D.clone() 默认是浅拷贝，只复制引用：

const mesh2 = mesh1.clone();
mesh2.material.color.set('red'); // ❗ mesh1 也变红了

3️⃣ 实例化网格 (InstancedMesh)

本身就是共享材质和几何体，以节省显存。

---

⚠️ 三、共享导致的典型问题

场景	现象
修改透明度	一改全改
替换贴图	所有部件贴图都变
动态流光	整个模型的贴图一起流动
动画高亮	高亮一个部件，其他也亮了

---

🩹 四、解决方案全攻略

✅ 方案 1：为每个 Mesh 克隆材质（最通用）

gltf.scene.traverse((child) => {
  if (child.isMesh) {
    child.material = child.material.clone();
  }
});

这样每个 Mesh 都有独立的材质副本，互不影响。

⚡ 注意：clone() 只复制当前层级属性，如果材质里有贴图，也被多个材质共享（见方案 2）。

---

✅ 方案 2：深度克隆贴图（防止贴图偏移互相影响）

如果你在做流光、贴图滚动（texture.offset.x -= 0.01）时，

会发现多个管道贴图同时滚动 ，那是因为它们共享同一个 Texture。

解决办法：

child.material = child.material.clone();

if (child.material.map) {
  child.material.map = child.material.map.clone();
  child.material.map.needsUpdate = true;
}

🔁 或者封装一下方便使用：

function makeMaterialUnique(mesh) {
  if (!mesh.isMesh) return;
  const mat = mesh.material.clone();
  if (mat.map) mat.map = mat.map.clone();
  mesh.material = mat;
}

---

✅ 方案 3：加载时手动复制（性能优化版）

如果 GLB 很大，不希望所有 Mesh 都克隆，可以针对性复制：

gltf.scene.traverse((child) => {
  if (child.isMesh && child.name.includes('pipe')) {
    child.material = child.material.clone();
    if (child.material.map) {
      child.material.map = child.material.map.clone();
    }
  }
});

只克隆需要"动态变化"的对象（比如流光、变色、闪烁）。

---

✅ 方案 4：GLTF 导出时避免共享

如果你有源文件（如 Blender），可在导出前这样做：

• 不复用材质（给不同对象独立材质 slot）；
• 或者在 Three.js 中 gltf.materials 中手动复制材质引用。

---

✅ 方案 5：特殊情况（InstancedMesh）

如果用 InstancedMesh（同几何同材质多实例），那就无法独立修改 每个实例的材质。

解决方案：

• 改为普通 Mesh；
• 或用 shader uniform buffer / instance attribute 控制差异。

---

💡 五、验证材质是否共享

想快速判断某个场景中是否共享材质，可以这样打印：

const materials = new Set();

gltf.scene.traverse(o => {
  if (o.isMesh) materials.add(o.material);
});

console.log('共有材质数量:', materials.size);

如果数量远小于 Mesh 数量，说明材质被复用。

---

✨ 六、常见实战场景

场景	必须独立材质？	解决方式
普通静态模型	否	共享即可，节省性能
需要动态流动	✅	clone 材质 + 贴图
不同透明度	✅	clone 材质
颜色独立控制	✅	clone 材质
统一换贴图	否	共享即可

---

🚀 七、实战一：修复 GLB 材质共享导致的流光同步问题

const flowTextures = [];

gltf.scene.traverse((child) => {
  if (child.isMesh && child.name.includes('pipe')) {
    // 独立材质 & 贴图
    const mat = child.material.clone();
    if (mat.map) mat.map = mat.map.clone();
    mat.map.wrapS = mat.map.wrapT = THREE.RepeatWrapping;
    child.material = mat;
    flowTextures.push(mat.map);
  }
});

function animate() {
  flowTextures.forEach(tex => (tex.offset.x -= 0.01));
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

✅ 每根管道的流光独立流动，互不干扰。

---

🔍 八、性能权衡建议

模型规模	建议
< 100 个 Mesh	可放心克隆材质
> 1000 个 Mesh	仅克隆需要独立动画的
特别大场景	考虑分层加载或使用 Instancing

---

✅ 总结表

问题	原因	解决方案
改一个材质，全部变	材质引用共享	material.clone()
改贴图偏移，一起动	贴图引用共享	material.map.clone()
复制模型颜色同步	clone() 浅拷贝	mesh.material = mesh.material.clone()
流光全部一起滚动	同贴图引用	独立克隆贴图

---