用途：为网页构建 3D 体验，兼顾视觉表现与性能，并让不熟悉 3D 应用的用户也能顺畅使用。适用方向包括产品配置器、交互式 3D 场景与 3D 模型集成。
主要能力：Three.js 实现、React Three Fiber、WebGL 优化、3D 模型集成、Spline 工作流、3D 产品配置器、交互式 3D 场景、3D 性能优化；并给出 3D 技术栈选型、3D 模型管线和滚动驱动 3D 三类模式。
技术栈选型：Spline 适合快速原型与设计人员，学习曲线低；React Three Fiber 适合 React 应用与复杂场景；Three.js 原生控制力最强；Babylon.js 适合游戏与重度 3D。决策路径为：需要快速 3D 元素用 Spline；使用 React 用 R3F；需要最大性能与控制用 Three.js 原生。
模型管线：格式方面 GLB/GLTF 为 Web 标准且体积最小，FBX 来自 3D 软件体积大，OBJ 适合简单网格，USDZ 用于 Apple AR。优化流程为在 Blender 等中建模、控制面数（Web 建议低于 10 万）、烘焙纹理合并材质、导出 GLB、用 gltf-transform 压缩、检查文件大小（理想低于 5MB）。安装与压缩命令：npm install -g @gltf-transform/cli；gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp。加载时可用 useProgress 展示进度。
滚动驱动：R3F 可用 ScrollControls 与 useScroll，按滚动偏移旋转模型；也可用 GSAP 的 ScrollTrigger 随滚动移动相机。常见效果包括相机穿行、滚动旋转、元素显隐、材质变化与爆炸视图动画。
反模式与限制：避免为 3D 而 3D，否则拖慢站点、干扰用户、耗电且无助于转化，应先问图片是否够用；避免仅面向桌面，需在真机测试、移动端降质、提供静态回退，低端设备可考虑禁用；必须提供加载状态，否则用户误以为故障。该技能需配合 scroll-experience、interactive-portfolio、frontend、landing-page-design 等使用。具体收费与平台支持情况暂未提供。