three.js 中添加光源后平面变暗是正常物理渲染现象，根本原因在于光照模型对表面法线与光线夹角的响应；通过调整光源强度、增加环境光或改用更亮的材质类型可有效解决。
three.js 中添加光源后平面变暗是正常物理渲染现象，根本原因在于光照模型对表面法线与光线夹角的响应；通过调整光源强度、增加环境光或改用更亮的材质类型可有效解决。
在 Three.js 中，MeshLambertMaterial（以及 MeshStandardMaterial 等基于光照的材质）会根据真实光照模型计算颜色——它不直接显示设置的 color 值，而是将该颜色作为反照率（albedo），再与入射光能量相乘得出最终像素色。因此，即使你设置了 color: 0xFFFFFF（纯白），若光照不足或入射角度不佳，结果仍会呈现灰暗色调。
? 问题定位：当前光照配置分析
你的代码中使用了：
- AmbientLight(0x222222) → 强度仅约 0.13（十六进制 0x22 ≈ 34，归一化后 ≈ 34/255 ≈ 0.13）
- DirectionalLight(0xFFFFFF, 0.8) → 强度为 0.8，方向为 (-30,50,0)，对水平平面（法线朝上 +Y）的入射角较大，导致漫反射分量减弱
这导致平面接收的总光通量偏低，视觉上明显发灰。
✅ 推荐解决方案（按优先级排序）
1. 提升环境光强度（最简单有效）
// 替换原 ambientLight const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); // 强度提升至 0.4 scene.add(ambientLight);
✅ 优势：全局均匀提亮，无阴影失真，适合基础场景打底。
2. 增强平行光强度并优化方向
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); // 强度 ↑ 至 1.2 directionalLight.position.set(0, 50, 20); // 更接近垂直入射（Z 轴正向微调，提升 Y 法线接收效率） directionalLight.castShadow = true; scene.add(directionalLight);
3. 改用 MeshStandardMaterial + PBR 参数（专业级控制）
const planeMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 0.3, // 降低粗糙度增强镜面反射（提升高光区域亮度）
metalness: 0.1, // 微金属感增强整体明度
side: THREE.DoubleSide
});⚠️ 注意：MeshStandardMaterial 需配合 WebGLRenderer.shadowMap.enabled = true 及正确 shadow 设置才能发挥最佳效果。
4. 添加第二盏补光灯（解决局部阴影过重）
const fillLight = new THREE.DirectionalLight(0xffffff, 0.3); fillLight.position.set(30, 20, 10); // 从斜前方补充照明 scene.add(fillLight);
? 关键注意事项
- 避免过度提亮：AmbientLight 强度 > 0.5 或 DirectionalLight > 1.5 可能导致画面“褪色”或丢失细节对比；
- 材质选择原则：MeshBasicMaterial 忽略光照（始终显示纯色），仅用于调试；生产环境务必使用 Lambert/Standard 等光照感知材质；
-
MacBook M1 用户特别提示：Safari 对 WebGL 渲染精度略有差异，建议在 Chrome/Firefox 中测试；若仍有偏暗，可在 renderer 初始化时添加：
renderer.physicallyCorrectLights = true; // 启用物理正确光照衰减（Three.js r152+）
✅ 最终效果验证
应用上述任一改进后，平面将显著恢复接近纯白的视觉效果，同时保留自然阴影层次——这才是符合物理规律的“正确变亮”，而非绕过光照模型的硬编码提亮。
记住：Three.js 的目标不是“让物体看起来亮”，而是“让物体在光照下看起来真实”。理解光照与材质的交互逻辑，才是掌握 3D 渲染的核心。
