R3F Scene Polish 是面向 three.js / React Three Fiber 场景的“观感打磨(look-dev)”技能,作用于已经渲染正确的场景,专门负责美学层:后处理、基于物理的光照、阴影、材质、色调映射和镜头编排。
用途:把可用场景美化成高级、电影级效果,输出完整代码改动或完整打磨方案。它不处理场景搭建与正确性问题:Canvas/createRoot 生命周期、加载器、GLTF、资源释放、SSR/客户端边界、DPR、空白画布与 resize 等 bug 属于 web-three-r3f;原生(Expo / React Native)动效属于 expo-motion;跨栈动效系统与全仓升级属于 design-motion-audit。场景尚不能渲染时,应先在 web-three-r3f 处理再回到本技能。
主要能力与规则:用 HDRI(Environment)做基于图像的照明,有意添加主光/补光/轮廓光,用 ContactShadows 或 AccumulativeShadows 落地主体,或刻意让主体悬浮;有意做色调映射,注意 three-core 默认 NoToneMapping 而 R3F 的 <Canvas> 默认 ACESFilmicToneMapping,优先 AgX / Neutral 获得准确高光滚降,且不要双重色调映射(渲染器与后处理 ToneMapping 效果二者只选其一);构建后处理“质量阶梯”而非堆叠,按设备/DPR 质量档位限制昂贵效果(N8AO、DoF),为 reduced-motion / 低功耗提供轻量分支;优先使用 PBR 材质参数、HDRI 和物理合理光照,玻璃用 MeshTransmissionMaterial,多个透射物体共享一个 FBO;镜头编排要有意图(推轨/横移/环绕加缓动),避免基础反馈用大幅旋转,并保持文字在运动中可读;热路径动画用 ref 和 useFrame 的 delta-time 实现,需遵循 web-three-r3f 的正确性规则(帧循环内不 setState、复用数学对象、释放资源);对镜头移动、视差、重后处理和空闲循环始终提供 reduced-motion / 低功耗替代方案。
使用方式:实现前阅读 references/art-direction.md(2026 现行 API 的 look-dev 配方:@react-three/postprocessing 质量阶梯、drei 的 Environment / ContactShadows / AccumulativeShadows / MeshTransmissionMaterial、色调映射 AgX 与 ACES 对比、选择性 bloom,以及 WebGPU/TSL 注意事项),并在改动前对照仓库已安装版本核对每个 API;阅读 references/motion-vocabulary.md 获取命名化的镜头/灯光决策;最终 QA 前阅读 references/performance-accessibility.md。
可选工具:附带 scripts/audit.mjs,对 R3F/three.js 观感质量做静态审计,覆盖色调映射(双重色调映射、旧版 API)、色彩管理(弃用的 outputEncoding/sRGBEncoding)、光照(无光照场景)、后处理质量(缺少质量阶梯、旧版 SSAO、WebGPU 不匹配)和材质色彩空间,属于 web-three-r3f 生命周期审计未覆盖的视觉层,建议两者都跑。命令示例:node scripts/audit.mjs doctor;node scripts/audit.mjs scan --root . --format json。审计发现只是线索,改动行为前需对照仓库已安装包版本逐条核实。
限制:不负责场景搭建正确性,不涵盖原生动效和跨栈动效系统;具体支持版本、是否收费等未在资料中提供,暂未提供。