Three.js 材质与光照

解决什么问题

three.js 场景里最常见的渲染翻车场景：模型全身纯黑或灰平平毫无立体感。典型原因是给网格用了 MeshStandardMaterial 却没有加任何光源，也没有设置 scene.environment；或者照着五年前的教程调光照强度，结果整个场景暗得像没开灯——r155 之后 three.js 默认使用物理光照模型，旧教程的强度值已经不适用。

另一个高频痛点是阴影不生效：明明加了光，影子死活不出来，或者影子被截断、呈块状、伴随 shadow acne。这些都不是 three.js 的 bug，而是配置开关没有全部打开。

核心能力与工作流

这个技能覆盖从材质选择到光照验证的完整链路：

• 按需求选材质：MeshStandardMaterial（PBR，受光照和环境反射影响）用于写实场景；MeshPhysicalMaterial 支持 clearcoat 和 transmission；MeshBasicMaterial 不发光不受光，适合 UI 或调试；MeshNormalMaterial/MeshDepthMaterial 用于排障。
• 光照搭建：受光材质必须有光源或环境贴图。推荐 AmbientLight/HemisphereLight 做柔和补光，配合 DirectionalLight 做主光（r155+ 强度建议 1–3）。
• 阴影三开关：renderer.shadowMap.enabled = true、光源 castShadow = true、网格的 castShadow/receiveShadow 缺一不可，之后还要调好光源的正交相机范围。
• 环境光照（IBL）：给 scene.environment 赋 equirectangular 或 PMREM 处理后的 HDR 贴图，PBR 材质自动拾取反射，无需额外代码。
• 真实光照验证：确认高光随主光移动、影子位置正确、反射合理。

适用边界

• 渲染器/相机/循环的搭建属于 threejs-scene-setup，加载 GLTF 模型属于 threejs-gltf-loading——这个技能专注材质与光照本身。
• 自定义 ShaderMaterial/GLSL 不在此范围内，可参考 shader-programming。
• 附件 references/materials-lights-table.md 提供材质速查表、光源参数/单位、透明度与 alphaTest 顺序，以及不用 HDR 文件通过 PMREMGenerator/RoomEnvironment 生成环境光的路线。