在 three.js 中添加灯光后，原本纯白的平面（plane）变灰变暗是正常现象，根本原因在于光照模型计算——需合理调整环境光强度、方向光强度或改用更明亮的材质类型（如 meshstandardmaterial）。
在 three.js 中添加灯光后，原本纯白的平面（plane）变灰变暗是正常现象，根本原因在于光照模型计算——需合理调整环境光强度、方向光强度或改用更明亮的材质类型（如 meshstandardmaterial）。
当你使用 MeshLambertMaterial 或 MeshStandardMaterial 等受光照影响的材质时，物体表面颜色不再由 .color 单独决定，而是由光照（ambient + directional/point/etc.）、法线朝向、材质反射属性共同参与实时计算。你代码中设置的环境光为 0x222222（极暗灰），方向光强度为 0.8，且光源方向（position.set(-30,50,0)）与平面法线（plane.rotation.x = -Math.PI / 2 → 法线朝上）夹角较大，导致漫反射分量不足，最终呈现偏灰的视觉效果。
✅ 推荐解决方案（按优先级排序）：
-
提升环境光强度（最快见效）
将 AmbientLight 强度从 0x222222 提高至 0x444444～0x666666，可显著提亮无直射区域：const ambientLight = new THREE.AmbientLight(0x555555); // ← 建议值 scene.add(ambientLight);
-
增强方向光强度并优化位置
方向光 intensity 默认为 1.0，你设为 0.8 略偏低；同时确保其照射角度更垂直于平面：const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); // 强度↑ directionalLight.position.set(0, 50, 0); // 正上方照射，法线对齐最大化漫反射 directionalLight.castShadow = true; scene.add(directionalLight);
-
改用 MeshStandardMaterial 并启用粗糙度/金属度控制（专业推荐）
MeshLambertMaterial 仅支持漫反射，而 MeshStandardMaterial 支持 PBR 渲染，对白底表现更自然：
Json Schema Toolkit下载使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, // 避免过强高光，保持均匀亮度 metalness: 0.0, // 非金属表面（如纸、哑光漆） side: THREE.DoubleSide });
⚠️ 注意事项：
- 不要使用 MeshBasicMaterial 替代——它完全忽略光照，虽“永远纯白”，但失去阴影、明暗过渡，违背物理渲染初衷；
- 若开启阴影（receiveShadow = true），务必确认 renderer.shadowMap.enabled = true（你已正确设置）；
- MacBook M1 的 Metal 后端对光照精度无影响，问题纯属参数配置范畴，非硬件兼容性问题；
- 调试时可临时添加 PointLight 辅助照明（如 new THREE.PointLight(0xffffff, 0.5, 100)），快速验证光照是否生效。
? 总结： Three.js 的“变暗”不是 Bug，而是真实光照模拟的体现。关键在于理解 AmbientLight 提供基础亮度（全局底色），DirectionalLight 提供方向性明暗（塑造立体感）。通过组合调优二者强度与方向，并选用合适材质，即可在保留真实阴影的同时，让白色平面清晰明亮、对比分明。
