该技能定位为 3D Web Experience Architect（3D 网页体验架构师），目标是把三维能力带入网页，在视觉冲击与性能之间取得平衡，并让从未接触过 3D 应用的用户也能顺畅使用。
一、主要能力 资料列出以下能力：Three.js 实现、React Three Fiber、WebGL 优化、3D 模型集成、Spline 工作流、3D 产品配置器、交互式 3D 场景、3D 性能优化。
二、使用方式：3D 技术栈选型 技能提供选型对比表与决策树。对比表按工具列出最佳用途、学习曲线与控制力：Spline 适合快速原型与设计师，学习曲线低、控制力中；React Three Fiber 适合 React 应用与复杂场景，学习曲线中、控制力高；Three.js vanilla 适合最大控制且非 React 场景，学习曲线高、控制力最大；Babylon.js 适合游戏与重度 3D，学习曲线高、控制力最大。 决策树逻辑为：需要快速 3D 元素则选 Spline；否则若使用 React，则选 React Three Fiber；否则若需要最大性能/控制，则选 Three.js vanilla；再否则选 Spline 或 R3F。 Spline 示例代码：import Spline from '@splinetool/react-spline'; 返回 <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />。 React Three Fiber 示例代码使用 @react-three/fiber 的 Canvas、@react-three/drei 的 OrbitControls 与 useGLTF，通过 useGLTF('/model.glb') 载入模型并以 <primitive object={scene} /> 渲染。
三、使用方式：3D 模型管线 格式选择表列出：GLB/GLTF 用于标准网页 3D，体积最小；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。 R3F 中加载可用 @react-three/drei 的 useGLTF、useProgress、Html 与 React 的 Suspense，Loader 组件以 progress.toFixed(0) 显示百分比。
四、使用方式：滚动驱动 3D R3F + ScrollControls 方案使用 @react-three/drei 的 ScrollControls、useScroll 与 @react-three/fiber 的 useFrame，通过 scroll.offset 控制模型旋转，ScrollControls 可设置 pages={3}。 GSAP + Three.js 方案使用 gsap 与 ScrollTrigger，通过 scrollTrigger 的 trigger、scrub 控制相机位置变化。 资料列出的常见滚动效果包括：相机在场景中移动、模型随滚动旋转、元素显现/隐藏、颜色/材质变化、爆炸视图动画。
五、限制：反模式 资料提出三类反模式：一是“为 3D 而 3D”，会拖慢站点、让用户困惑、消耗移动端电量且无助于转化，建议 3D 应有明确目的，产品可视化可行，随机漂浮形状则未必，需自问用图片是否也能实现；二是“仅桌面端 3D”，因为多数流量来自移动端，会耗电、在低端设备崩溃，建议在真实移动设备上测试、移动端降低质量、提供静态回退、考虑在低端设备禁用 3D；三是“没有加载状态”，用户会以为页面损坏、跳出率高，建议提供加载进度指示、骨架屏/占位符、在页面可交互后再加载 3D、优化模型体积。
六、相关技能 资料提及该技能可与 scroll-experience、interactive-portfolio、frontend、landing-page-design 配合使用。
关于收费、价格、平台支持范围、具体效果等事实，资料暂未提供。