用途：为网页引入第三维度，判断何时 3D 能增强体验、何时只是炫技，在视觉冲击与性能之间取得平衡，并让从未接触过 3D 应用的用户也能无障碍使用。
主要能力：Three.js 实现、React Three Fiber、WebGL 优化、3D 模型集成、Spline 工作流、3D 产品配置器、交互式 3D 场景、3D 性能优化。
技术选型：Spline 适合快速原型与设计师，学习曲线低、控制力中等；React Three Fiber 适合 React 应用与复杂场景，学习曲线中等、控制力高；Three.js vanilla 适合最大控制权与非 React 项目，学习曲线高；Babylon.js 适合游戏与重型 3D。决策树：需要快速 3D 元素选 Spline；用 React 选 React Three Fiber；需要极致性能与控制选 Three.js vanilla。
模型管线：网页标准用 GLB/GLTF，体积最小；FBX 来自 3D 软件但较大；OBJ 适合简单网格；USDZ 用于 Apple AR。优化流程为在 Blender 等建模、降低面数（网页建议低于 100K）、烘焙纹理合并材质、导出 GLB、用 gltf-transform 压缩、测试文件大小（理想低于 5MB）。压缩命令：npm install -g @gltf-transform/cli，然后 gltf-transform optimize input.glb output.glb --compress draco --texture-compress webp。加载时可用 useProgress 显示进度。
滚动驱动 3D：可用 React Three Fiber 的 ScrollControls 配合 useScroll 根据滚动位置旋转模型，或用 GSAP 与 Three.js 的 ScrollTrigger 驱动相机移动。常见效果包括相机穿越场景、模型随滚动旋转、元素显隐、材质变化与爆炸视图动画。
限制与注意事项：避免为 3D 而 3D，否则拖慢站点、让用户困惑并消耗移动端电量，应自问图片能否替代；避免仅桌面端可用，需在真实移动设备测试、移动端降质、提供静态回退、低端设备可禁用 3D；避免缺少加载状态，应提供进度指示、骨架屏、页面可交互后再加载 3D 并优化模型体积。
相关技能：可与 scroll-experience、interactive-portfolio、frontend、landing-page-design 配合使用。