技能说明
来自 Agentic Awesome Skills 的 3d-web-experience，覆盖 Three.js、React Three Fiber、Spline、WebGL、GLSL、模型准备、滚动驱动场景和性能优化。适合产品配置器、3D 作品集和沉浸式营销页；技能标记为高风险，可能引入外部模型/场景地址和较重的浏览器资源，安装前应审阅 SKILL.md，确认素材授权、网络访问、性能和无障碍边界。
关于此技能
把 Three.js、React Three Fiber、Spline 和 WebGL 的实践整理成可复用的 3D 网页设计与实现指南。
核心能力
按项目选 3D 技术
根据是否使用 React、控制粒度和原型速度，在 Spline、React Three Fiber、Three.js 与 Babylon.js 之间做选择。
覆盖模型到交互
包含 GLB/GLTF 模型准备、压缩、加载、滚动驱动场景、产品配置器和互动作品集等常见模式。
把性能放在前面
关注三角面数量、懒加载、实例化、灯光和移动端帧率，避免为了视觉效果牺牲可用性。
适用场景
3D 产品配置器
展示可旋转、可切换材质或配件的产品，让用户在网页中预览不同组合。
沉浸式作品集和营销页
用滚动动画、空间层次和交互场景增强品牌展示，但保留清晰内容和回退体验。
模型接入与优化
把 Blender 等工具导出的模型转成适合 Web 的格式，压缩资源并检查加载与设备性能。
使用步骤
- 01
明确 3D 是否真的必要
先判断 3D 是否能提升理解或转化，再确定用户设备、内容目标和无障碍回退方案。
- 02
选择技术与资产来源
根据项目栈选择 Spline、React Three Fiber 或 Three.js，并确认模型、纹理和外部场景地址获得授权。
- 03
搭建并控制资源
优先使用 GLB/GLTF、懒加载、压缩、实例化和合理灯光，避免首屏一次加载过多资源。
- 04
在真实设备上复核
检查桌面和移动端帧率、触控、键盘、加载失败回退、文本可读性和可访问性。
常见问题
所有网页都适合加入 3D 吗？+
不适合。只有当空间关系、产品预览或沉浸式叙事能带来明确价值时才建议使用，否则优先轻量的二维界面。
可以直接引用网上的模型或场景吗？+
不能默认可以。先确认素材和外部 URL 的授权、来源、稳定性与隐私影响，必要时改用本地托管或自有资产。
它会自动保证移动端流畅吗？+
不会。技能提供优化方法，但仍需在代表性设备上实际测帧率、内存、加载时间和降级效果。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/08
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills add https://github.com/sickn33/agentic-awesome-skills --skill 3d-web-experience