Three.js添加灯光后平面颜色变暗问题求助

问题根源 #

• 环境光亮度不足：当前使用的0x222222是低亮度暗灰色光，无法让白色平面充分显色
• 方向光阴影相机参数不全：仅设置了bottom=-12，未调整其他边界参数，导致阴影范围不准确、显示模糊
• 旧版渲染器限制：WebGL1Renderer属于老版本渲染器，无法充分利用M1设备的GPU特性，影响光照和阴影的渲染效果

修复步骤 #

1. 增强环境光亮度 #

替换原环境光配置，用更高亮度的基础光保证场景整体照明，同时保留阴影的层次感：

// 替换原AmbientLight代码
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
scene.add(ambientLight);

2. 完善方向光阴影设置 #

补全阴影相机的所有边界参数，同时提升阴影贴图分辨率，让阴影显示更清晰：

// 替换原DirectionalLight代码
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
directionalLight.position.set(-30, 50, 0);
directionalLight.castShadow = true;
// 设置阴影相机覆盖整个平面区域
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -20;
// 提升阴影贴图分辨率（M1设备性能足够支撑）
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);

3. 更换为新版WebGLRenderer #

M1设备支持现代WebGL特性，使用新版渲染器能获得更优的渲染效果：

// 替换原Renderer初始化代码
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
// 开启软阴影，让阴影边缘更平滑自然
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. 可选：微调平面材质 #

如果仍觉得平面亮度不够，可添加轻微自发光（注意不要过高，避免削弱阴影效果）：

const planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xFFFFFF,
    side: THREE.DoubleSide,
    emissive: 0x111111 // 轻微自发光，提升整体亮度
});

关键修复后的完整代码片段 #

// 渲染器初始化
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 环境光
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
scene.add(ambientLight);

// 方向光
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
directionalLight.position.set(-30, 50, 0);
directionalLight.castShadow = true;
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -20;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);

// 平面材质
const planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xFFFFFF,
    side: THREE.DoubleSide
});

内容的提问来源于stack exchange，提问作者WHO AM I