如何让 Three.js 中的平面在添加光照后保持明亮白色-html教程-PHP中文网

如何让 Three.js 中的平面在添加光照后保持明亮白色

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);

✅ 优势：全局均匀提亮，无阴影失真，适合基础场景打底。

Wjs Uploading Video
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

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+）
```