three.js使用HemisphereLight后模型投影颜色异常求助

现象原因 #

HemisphereLight是模拟天空与地面的环境光照，它包含两个核心颜色参数：天空色（skyColor） 和 地面色（groundColor），默认天空色为浅蓝色。Three.js中阴影的颜色会直接继承光源的颜色属性，当使用HemisphereLight时，其天空色会被应用到阴影计算中，导致投影呈现出天蓝色调。此外，HemisphereLight属于环境光范畴，光线来自四面八方，没有明确的主方向，这也会让阴影颜色更容易被环境色主导。

解决方法 #

1. 调整HemisphereLight参数 #

如果需要保留HemisphereLight的环境光效果，可以修改天空色为中性色调（如浅灰），同时降低光源强度，减少对阴影颜色的影响：

const hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x444444, 0.6);
scene.add(hemisphereLight);

2. 改用主光源+环境光组合 #

更推荐的方案是使用DirectionalLight（平行光） 生成正常阴影，搭配AmbientLight（环境光） 提供基础照明，HemisphereLight可作为辅助光低强度使用：

// 基础环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

// 平行光负责生成阴影
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
directionalLight.castShadow = true;
// 优化阴影清晰度
directionalLight.shadow.mapSize.set(2048, 2048);
scene.add(directionalLight);

3. 自定义阴影颜色 #

若必须使用HemisphereLight，可直接修改接收阴影物体的材质属性，强制阴影为深色：

const groundMaterial = new THREE.MeshStandardMaterial({
  color: 0x888888,
  shadowColor: 0x222222 // 自定义阴影颜色，削弱蓝色调
});

问题现象截图 #

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