在数据可视化大屏项目开发中，我们可能需要在大屏中渲染3d模型，在使用threejs渲染模型出来后，发现模型是纯黑色的，这不是预期的效果，因为在blender中，模型是有纹理颜色的。

blender渲染效果

threejs渲染效果

增加灯光

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 增加环境光强度
      scene.add(ambientLight);

      // 添加点光源
      const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 创建点光源
      pointLight.position.set(10, 10, 10); // 设置光源位置
      scene.add(pointLight);

一开始以为是灯光不够造成，但是增强灯光后，模型还是黑色

修改模型材质

如果调整环境光后还是黑色或其他的纯色，那么将模型的材质里的emssive设置为material.color，如果材质里有纹理，再把emissiveMap设置为material.map。

      // 加载GLB模型
      const loader = new GLTFLoader();
      loader.load(link + 'model/fish.glb', (gltf) => {
        model = gltf.scene;

        // 遍历模型的所有材质，确保纹理正确加载
        model.traverse((child) => {
          if (child.isMesh) {
            if (child.material.map) {
              child.material.map.encoding = THREE.sRGBEncoding;
            }
            if (child.isMesh) {
              child.material.emissive = child.material.color;
              child.material.emissiveMap = child.material.map;
            }
          }
        });

        scene.add(model);
      }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, (error) => {
        console.error('加载模型时出错:', error);
      });

关键代码

if (child.isMesh) {
  child.material.emissive = child.material.color;
  child.material.emissiveMap = child.material.map;
}

模型不再是纯黑色了

按照上面的修改后模型不在是纯黑色的了。