用途:为 React Three Fiber 场景搭建灯光与阴影,覆盖直接光摆放、基于图像的环境照明、阴影伪影处理。
主要能力:区分环境光与直接光职责——环境照明负责 PBR 反射与补光,直接光负责方向与实时阴影;说明 scene.background 与 scene.environment 用途不同,Drei Environment 负责照明,background 才让环境可见。生产环境建议使用自有 HDR/EXR 资源,Drei 预设适合原型但依赖外部托管。Sky 只是可见天空几何,不会自动生成匹配的太阳光或环境,需要手动对齐。
用法:阴影场景需在 <Canvas shadows="percentage"> 内挂载,并同时具备渲染器阴影开关、投影光源、castShadow 网格与 receiveShadow 材质。示例使用 ambientLight 与 directionalLight,配合 shadow-mapSize、shadow-camera 各边界、shadow-normalBias 等参数;这些偏置与视锥值针对小场景,需按实际尺寸重调。优先收紧阴影相机范围再提高贴图分辨率,可用 CameraHelper 检查视锥。
限制:环境光与半球光不投影;点光源阴影渲染六个方向,应限制投影光源数量与贴图尺寸。移动方向光/聚光灯目标需使用世界矩阵会更新的 target Object3D。WebGL 下 RectAreaLight 只影响 Standard/Physical 材质且不产生内置阴影,必要时初始化 RectAreaLightUniformsLib;对象/相机图层不是通用的逐光源材质遮罩。Drei Lightformer 是被捕获进 Environment 的自发光几何,不是实时灯。静态捕获或 ContactShadows 设 frames={1},动画场景需重新捕获。SoftShadows 会修改着色器代码,升级 Three.js 后需重新验证。调光时保持色调映射与曝光一致,勿混用旧版光照强度教程。验证时检查阴影接触、痤疮、裁切、模型投影/接收标志与运动物体,并测量目标设备的总渲染通道数。