用途：在网页中构建或调试 3D 场景，包括产品配置器、3D 作品集与沉浸式网站，并帮助判断何时 3D 真正提升体验、何时只是炫技。
主要能力：覆盖 Three.js、React Three Fiber、Spline、WebGL、GLSL 着色器、3D 优化、模型准备与 WebGL 性能调优；提供 3D 技术栈选型对比（Spline、R3F、Three.js vanilla、Babylon.js）及决策树，并给出各栈的入门代码片段（如 Spline 组件、R3F 的 Canvas 与 useGLTF 加载）。
模型流程：建议在 Blender 等工具建模后烘焙贴图、导出 GLB，再用 gltf-transform 压缩，命令示例：./node_modules/.bin/gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp。文档强调先按目标设备建立三角形与绘制调用预算，再测量传输体积、解码时间、内存与帧时间，而非只看三角形数量。
滚动驱动：支持 R3F 的 ScrollControls 与 useScroll 按滚动偏移旋转模型，也提供 GSAP ScrollTrigger 与相机位置联动的集成片段（需在挂载时创建、卸载时清理补间与触发器）。
性能与可用性：给出示意性性能预算（桌面 60fps/约 50 万三角形，移动 30–60fps/约 10 万，低端 30fps/约 5 万），并列出复用实例、限制灯光、LOD、懒加载、保守 DPR（如 dpr={[1,1.5]}）等优化手段；强调尊重 reduced-motion，保留普通 DOM 控件，并设置 WebGL 不可用时的回退与错误边界。还列出常见校验项（缺少加载指示、无 WebGL 回退、模型未压缩、OrbitControls 拦截滚动、移动端 DPR 过高等）及修复方向。
适用场景与限制：适合产品配置器、沉浸式作品集等。技能本身不附带资产与依赖，示例 Spline 地址为占位符需替换为授权资产；压缩解码兼容性与画质需在真实目标设备上用已安装 CLI 版本验证；可访问性、加载失败与 reduced-motion 需单独测试，仅渲染出 Canvas 不能证明性能或可访问性达标。