如何在ThreeJS中动态为GLTF模型加载并切换材质？

要实现可切换的车漆效果，你可以用Three.js的MeshPhysicalMaterial（推荐，支持清漆效果更贴近真实车漆）或MeshStandardMaterial替换模型原有材质，下面是修改后的代码：

完整代码示例 #

let loader = new GLTFLoader();
// 初始化一个基础车漆材质
let carPaintMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000, // 初始红色车漆
  metalness: 0.9, // 车漆金属度接近1
  roughness: 0.1, // 低粗糙度提升光泽感
  clearcoat: 1.0, // 清漆层，增强表面反光
  clearcoatRoughness: 0.05 // 清漆层的粗糙度，控制高光锐利度
});

loader.load(BeetleGLTF, function (gltf) {
  const carScene = gltf.scene;
  carScene.scale.set(0.5, 0.5, 0.5);
  
  // 遍历所有网格，替换材质
  carScene.traverse((child) => {
    if (child.isMesh) {
      // 可选：如果模型有车窗等透明部件，可跳过替换
      // if (!child.material.transparent) {
        child.material = carPaintMaterial;
      // }
    }
  });
  
  scene.add(carScene);
  animate();
});

// UI切换材质颜色的函数
function changeCarPaintColor(colorHex) {
  carPaintMaterial.color.set(colorHex);
}

关键参数说明 #

• metalness：车漆属于高金属度材质，设置为0.8-1.0之间
• roughness：值越低，表面越光滑反光越强，车漆一般0.05-0.2
• clearcoat：模拟车漆表面的清漆层，设置为0.8-1.0可以增强高光和反光层次
• clearcoatRoughness：控制清漆层的高光锐利度，值越小高光越集中

注意事项 #

• 用traverse遍历所有子网格，避免遗漏模型的部件（比如车轮、车身分块）
• 如果模型包含透明部件（如车窗），可以通过判断child.material.transparent来保留原有材质，只替换车身部分
• 切换材质时直接修改现有材质的属性即可，无需重新创建材质，性能更优

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