Three.js 光影设置指南：从基础光照到高级环境光 #

解决 3D 场景亮度不足、缺乏立体感或阴影粗糙的问题：通过合理组合不同类型的光源，配置阴影映射，并利用基于图像的光照（IBL），快速构建电影级或写实风格的 Web 3D 场景。

为什么需要这个技能 #

在 Three.js 中，没有光照的场景将只有纯色或简单的材质颜色，缺乏空间深度。而简单的环境光又会导致画面平淡，像是在“真空”中。

要实现真实感，需要掌握如何模拟自然光（如太阳光）、局部光（如灯泡）以及环境反射光。此外，阴影的性能开销极大，掌握如何权衡阴影质量（Map Size）与渲染性能（Frustum 范围），是避免 Web 页面掉帧的关键。

适用场景 #

• 构建 3D 产品展示页，需要高质量的材质反光与柔和阴影。
• 开发 3D 游戏场景，需根据昼夜交替动态调整光源位置和强度。
• 实现室内设计可视化，需要使用区域光（Area Light）模拟窗户或灯盘。
• 优化复杂场景的帧率，通过精简阴影图分辨率或使用接触阴影（Contact Shadows）替代。

核心工作流 #

1. 选择合适的光源类型 #

根据场景需求在以下光源中选择：

• AmbientLight: 基础环境光，无方向，消除全黑区域。
• DirectionalLight: 平行光（模拟太阳），支持阴影，适合户外。
• PointLight: 点光源（模拟灯泡），全方位发光，支持阴影。
• SpotLight: 聚光灯（模拟手电筒），锥形发光，支持阴影。
• RectAreaLight: 矩形区域光，最写实，适合室内大面积光源（需初始化 RectAreaLightUniformsLib）。

2. 配置阴影管线 #

阴影需在三个层面同时开启：

• 渲染器：renderer.shadowMap.enabled = true。
• 光源：light.castShadow = true。
• 物体：mesh.castShadow = true（投射阴影）和 mesh.receiveShadow = true（接收阴影）。

3. 提升真实感（IBL） #

使用 HDR 图像通过 RGBELoader 创建环境贴图。将贴图赋值给 scene.environment，所有 PBR 材质（如 MeshStandardMaterial）将自动获得基于真实世界的反射和环境光照。

4. 性能调优 #

• 收紧视锥体：通过 light.shadow.camera 限制阴影计算区域，避免浪费分辨率。
• 调整 Bias：设置 shadow.bias 解决“阴影痤疮”（Shadow Acne）条纹现象。
• 层级控制：使用 light.layers 让特定光源仅影响部分物体。

下载和安装 #

下载 threejs-lighting 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐