使用Three.js的Simplify Modifier加载.glb模型时遇问题

针对你遇到的Cannot read properties of undefined (reading 'clone')报错，结合使用场景，从以下几个方向排查：

1. 版本兼容性问题 #

Simplify Modifier（尤其是社区维护版本）对Three.js版本依赖极强。如果两者版本不匹配，极易因API差异导致材质克隆环节出错：

• 确认你使用的Simplify Modifier版本与当前Three.js主版本一致，比如用r158版Three.js，就找对应适配版本的Modifier代码，避免用旧版Modifier适配新版Three.js。
• 尝试将Three.js回退到Modifier官方示例使用的版本，测试模型是否能正常加载。

2. 模型几何体的材质引用异常 #

即使模型只有一种材质，也可能存在几何体的材质引用问题：

• 加载模型后，打印mesh.geometry和mesh.material的内容，确认mesh.material不是undefined或null。部分GLB导出时，可能出现几何体materials数组为空，但material属性未正确赋值的情况。
• 如果发现mesh.material是数组（哪怕仅有一个元素），Simplify Modifier可能未处理数组类型材质，需手动转为单个材质对象：

  if (Array.isArray(mesh.material)) {
    mesh.material = mesh.material[0];
  }
  

3. 修正Simplify Modifier的空值判断逻辑 #

报错指向clone方法，大概率是Modifier代码未处理材质为空的情况，直接调用了克隆方法。可直接修改Modifier核心逻辑：

• 找到Modifier中调用.clone()的代码段（通常在材质处理部分），先判断材质是否存在：

  // 原代码可能类似：const clonedMaterial = material.clone();
  // 修改为：
  if (!material) return; // 或根据业务逻辑处理空材质场景
  const clonedMaterial = material.clone();
  

• 如果不需要保留模型原有材质，也可在应用Modifier前给几何体临时赋值默认材质：

  mesh.material = new THREE.MeshBasicMaterial({ color: 0xffffff });
  

4. 确保加载时机正确 #

必须在模型完全加载完成后再应用Simplify Modifier，避免异步加载导致对象未初始化：

• 使用GLTFLoader的loadAsync方法配合await，确保模型加载完成后再处理：

  const gltf = await loader.loadAsync('your-model.glb');
  const mesh = gltf.scene.children[0];
  // 此处再应用Simplify Modifier
  

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