Three.js加载Collada模型显示黑色，如何正确加载材质颜色？

• 确保场景存在有效光源
  ColladaLoader生成的材质大多依赖光照计算，若场景无光源，模型会因无法反射光线显示黑色。添加基础光源即可解决：

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  
  // 添加方向光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 10, 7.5);
  scene.add(directionalLight);
  

• 强制修改或替换材质
  部分Collada模型的材质可能存在属性异常（如colorWrite关闭、颜色未正确赋值），可遍历模型节点手动修正：

  collada.scene.traverse((child) => {
    if (child.isMesh) {
      // 修改现有材质颜色
      child.material.color.set(0x0000ff);
      child.material.colorWrite = true;
      child.material.needsUpdate = true;
  
      // 若上述无效，直接替换为不受光照影响的基础材质
      // child.material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    }
  });
  

• 检查Collada文件的材质定义
  打开.dae文件，确认<diffuse>标签下存在<color>属性值。若缺失，需重新导出模型并勾选“导出材质颜色”选项，避免导出时丢失材质信息。

• 升级Three.js版本
  旧版ColladaLoader存在材质解析缺陷，升级至最新版Three.js可修复部分兼容性问题，提升Collada模型的材质解析准确性。

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