如何提升 Three.js 中平面（Plane）在光照下的亮度表现-html教程-PHP中文网

如何提升 Three.js 中平面（Plane）在光照下的亮度表现

three.js 中添加灯光后平面颜色变暗是正常物理渲染现象，根本原因在于光照强度不足或材质类型不匹配；通过调整光源强度、改用 meshstandardmaterial 或增加环境光可有效恢复预期亮度。

three.js 中添加灯光后平面颜色变暗是正常物理渲染现象，根本原因在于光照强度不足或材质类型不匹配；通过调整光源强度、改用 meshstandardmaterial 或增加环境光可有效恢复预期亮度。

在 Three.js 中，MeshLambertMaterial 和 MeshStandardMaterial 等基于光照计算的材质会真实模拟光线与表面法向量的夹角关系（遵循 BRDF 原理），因此光照方向、强度与材质属性共同决定最终视觉亮度。你观察到的“白色平面变灰”并非 Bug，而是光照能量不足导致的合理衰减。

? 关键修复方案（按推荐顺序）

1. 提升光源强度（最直接有效）

当前方向光强度为 0.8，环境光仅为 0x222222（约 13% 白色亮度）。建议增强两者：

// ✅ 推荐调整：提高环境光基础亮度 + 方向光强度
const ambientLight = new THREE.AmbientLight(0x404040); // 从 0x222222 → 0x404040（约 25%）
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // 强度从 0.8 → 1.5
directionalLight.position.set(-30, 50, 0);
scene.add(directionalLight);

2. 升级材质以支持更精细光照响应

MeshLambertMaterial 仅支持漫反射，缺乏高光与金属度控制；改用 MeshStandardMaterial 可获得更自然、更明亮的白面表现：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

// ✅ 替换原 planeMaterial：
const planeMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  side: THREE.DoubleSide,
  roughness: 0.8,   // 控制漫反射柔和度（0=镜面，1=纯漫射）
  metalness: 0.0    // 避免金属感，保持哑光白
});

⚠️ 注意：使用 MeshStandardMaterial 时，必须确保光源启用 castShadow 且场景启用了 renderer.shadowMap.enabled = true（你已正确配置）。

3. 添加第二盏补光灯（增强均匀性）

单方向光易造成强阴影与明暗对比过大。加入一盏弱强度、大角度的辅助光可提亮暗部：

const helperLight = new THREE.DirectionalLight(0xffffff, 0.4);
helperLight.position.set(20, 30, 20); // 与主光形成夹角
scene.add(helperLight);

? 其他注意事项

避免滥用 MeshBasicMaterial 混搭：你的 Box 使用了 MeshBasicMaterial（无视光照），而 Plane 使用 MeshLambertMaterial（响应光照），这种混合易造成视觉不一致。如需统一风格，全场景建议统一使用 MeshStandardMaterial。
检查 gamma 输出（Mac M1 用户特别注意）：部分 macOS WebGL 渲染器对 sRGB 色彩空间处理较敏感。可在渲染器初始化后添加：
```
renderer.outputEncoding = THREE.sRGBEncoding; // 确保色彩正确映射
renderer.gammaFactor = 2.2;
```
禁用 CameraHelper 调试时的干扰：dLightShadowHelper 是调试用相机视锥可视化，若未关闭可能遮挡画面或引发误判——发布前请移除。