用途：该技能面向网页 3D 场景开发，技术栈为 Three.js，React 项目中使用 @react-three/fiber 和 @react-three/drei。适用于用户提出 3D、WebGL、Three.js、R3F、场景等需求的场景。
主要能力与规则：3D 场景采用懒加载，不让 WebGL 包阻塞 LCP；限制灯光数量、高开销材质与多边形数量，存在大量相同对象时优先使用实例化；通过 IntersectionObserver 或等效方式在离开视口时暂停并释放资源；WebGL 失败或用户启用 prefers-reduced-motion 时回退到 2D 静态图片或视频；提供可访问的控制方式，关键信息不能只依赖 3D 拖拽；保持应用原有架构，将场景隔离在客户端边界内以处理 SSR；组件卸载时释放几何体、材质与渲染器。
使用方式：先明确场景用途（氛围首屏、产品展示、探索型场景）与 2D 回退方案；根据仓库技术栈选择原生 Three.js 或 R3F；先实现最小场景并测量性能，再逐步添加效果；确保卸载时释放几何体、材质和渲染器；验证移动端、减少动态效果与 LCP 表现。
检查清单：懒加载且不阻塞 LCP；具备 2D 回退或减少动态效果支持；视口外暂停并释放资源；场景与其他应用部分隔离。
限制：资料未提供具体安装命令、代码示例、兼容浏览器版本、性能指标或价格信息。