Three.js中导入GLB模型实现低阴影效果的光照配置问题

解决思路 #

1. 校准渲染器基础配置

大部分GLB导入偏暗的问题都是渲染器颜色空间、色调映射配置缺失导致的，添加以下配置：

renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2; // 可根据实际显示效果微调
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 实现柔和的低阴影效果

2. 替换为适配低阴影效果的光照组合

点光源衰减快、光照范围不均匀，不适合作为场景主光源，改用「半球光+方向光+弱环境光」的组合，既能保证整体亮度均匀，也能实现你要的柔和低阴影效果：

// 半球光：模拟环境漫反射，弱化明暗交界的生硬感
const hemilight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
scene.add(hemilight);

// 方向光：主光源，产生清晰但柔和的低阴影
const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
dirLight.position.set(5, 10, 7.5);
// 阴影配置
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.camera.near = 0.5;
dirLight.shadow.camera.far = 50;
scene.add(dirLight);

// 弱环境光：填补暗部死角，避免局部死黑
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

如果需要保留相机跟随的补光，把原来的点光源强度降到1~2即可，过高的强度会导致局部过曝。

3. 调整GLB自带材质属性

GLB导出时自带的PBR材质参数（粗糙度、金属度）也可能导致整体偏暗，导入模型后遍历调整材质：

gltf.scene.traverse((child) => {
  if (child.isMesh) {
    child.castShadow = true;
    child.receiveShadow = true;
    // 可根据实际效果微调以下两个参数
    child.material.roughness = 0.5; 
    child.material.metalness = 0.1;
    // 校准材质贴图的颜色空间
    child.material.map && (child.material.map.encoding = THREE.sRGBEncoding);
  }
});

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