用途：为网页构建 3D 体验，定位为 3D Web Experience Architect，强调在视觉表现与性能之间取得平衡，并让从未接触过 3D 应用的用户也能使用。
主要能力：Three.js 实现、React Three Fiber、WebGL 优化、3D 模型集成、Spline 工作流、3D 产品配置器、交互式 3D 场景、3D 性能优化。
技术选型：提供工具对比与决策树，Spline 适合快速原型与设计师，React Three Fiber 适合 React 应用与复杂场景，Three.js 原版适合最大控制，Babylon.js 适合游戏与重型 3D。示例用法包括使用 @splinetool/react-spline 渲染场景，以及在 R3F 中通过 Canvas、ambientLight、useGLTF 与 OrbitControls 加载模型。
模型管线：建议格式选用 GLB/GLTF，流程为在 Blender 等工具中建模、降低面数（Web 端尽量低于 100K）、烘焙贴图、导出 GLB、用 gltf-transform 压缩并测试文件大小（理想低于 5MB）。压缩命令为：npm install -g @gltf-transform/cli，随后执行 gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp。加载时可结合 useProgress 与 Suspense 显示进度。
滚动驱动 3D：可用 @react-three/drei 的 ScrollControls 与 useScroll，在 useFrame 中按 scroll.offset 旋转模型；也可用 GSAP ScrollTrigger 实现相机移动、旋转、显隐、材质变化与爆炸视图动画。
限制与反模式：反对为 3D 而 3D、仅适配桌面端、缺少加载状态；建议移动端降低画质、提供静态回退、在低端设备上考虑禁用 3D、先让页面可交互再加载 3D。该技能与 scroll-experience、interactive-portfolio、frontend、landing-page-design 配合使用。