在 three.js 中，为场景添加 directionallight 等真实光照后，meshlambertmaterial 或 meshstandardmaterial 渲染的平面会因光照模型计算而变暗——这是正常物理行为，并非错误；通过调整光源强度、增加环境光或更换材质可有效恢复亮度。
在 three.js 中，为场景添加 directionallight 等真实光照后，meshlambertmaterial 或 meshstandardmaterial 渲染的平面会因光照模型计算而变暗——这是正常物理行为，并非错误；通过调整光源强度、增加环境光或更换材质可有效恢复亮度。
当你从 MeshBasicMaterial（不受光照影响）切换到 MeshLambertMaterial 或 MeshStandardMaterial 时，材质开始响应光照计算：其最终颜色 = 环境光贡献 + 漫反射（Lambert）/ PBR（Standard）贡献。此时若光源强度不足或环境光过弱，原本“纯白”的平面就会呈现灰调——这并非渲染异常，而是符合真实光照规律（即 BRDF 行为）的正确结果。
✅ 核心解决策略
1. 提升环境光（Ambient Light）强度
当前 AmbientLight(0x222222) 强度极低（约 0.13），建议提升至 0x444444～0x666666（≈0.26–0.4）以提供基础照明：
const ambientLight = new THREE.AmbientLight(0x555555, 1.0); // 推荐：色值+强度双调优 scene.add(ambientLight);
2. 增强方向光（Directional Light）强度
原代码中 DirectionalLight(0xFFFFFF, 0.8) 的强度系数 0.8 偏低。将其提升至 1.2–2.0 可显著提亮受光面：
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1.5); // 强度↑ directionalLight.position.set(-30, 50, 0); directionalLight.castShadow = true; scene.add(directionalLight);
3. （进阶）使用 MeshStandardMaterial + 合理粗糙度/金属度
若需更精细控制，替换平面材质为 MeshStandardMaterial，并启用微弱自发光（emissive）补偿阴影区：
const planeMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
emissive: 0x111111, // 暗部补光，避免死黑
roughness: 0.8, // 增加漫反射占比，柔化高光
metalness: 0.0, // 非金属表面更自然
side: THREE.DoubleSide
});
4. 验证光照方向与法线对齐
确保平面法线朝向光源：你已设置 plane.rotation.x = -Math.PI / 2（使平面朝上），而 directionalLight.position 在 (-30,50,0)，方向向量为 (30,-50,0)，与平面法线 (0,1,0) 夹角合理，无需调整。
⚠️ 注意事项
- 勿滥用 MeshBasicMaterial：它完全忽略光照，无法产生阴影/明暗过渡，仅适用于 UI 覆盖层等特殊场景。
- 阴影质量依赖相机裁剪范围：你已配置 shadow.camera.bottom = -12，但建议同步调整 top/left/right 保证阴影贴图覆盖关键区域。
- MacBook M1 兼容性无影响：该现象与硬件无关，是 WebGL 光照管线的标准行为。
✅ 总结
Three.js 的“变暗”本质是光照模型从“无计算”迈向“物理近似”的必经过程。解决问题的关键不是“修复 Bug”，而是主动调控光照参数：提高 AmbientLight 强度奠定基础亮度，增强 DirectionalLight 强度强化主光源，必要时辅以 emissive 微调。掌握这一逻辑，你将真正理解 Three.js 渲染的真实感来源。
