你的网站还在用平面设计？3D 时代已经杀到门口了

你的网站还在用平面设计？3D 时代已经杀到门口了

说实话，现在做网站如果还只会 Flexbox + Grid 那套，真的有点跟不上节奏了。海外这波设计师已经开始玩 3D Web Experience——用 Three.js、React Three Fiber、WebGL 这些工具，把网站变成沉浸式空间。

最近挖到一个超赞的 Claude Code Skill，叫 3D Web Experience，专门教 AI 怎么帮你构建三维网站体验。它不是那种”生成一个旋转立方体”的 Demo 级技能，而是覆盖了：

• 产品 3D 配置器（颜色、材质、角度实时切换）
• 沉浸式作品集网站（滚动驱动 3D 场景）
• WebGL 性能优化（手机端 60fps 方案）
• Spline / R3F / Three.js 怎么选型

最实用的部分：选型决策树

这个 Skill 给了我一个超实用的决策树：

• 需要快速 3D 元素？→ 直接上 Spline，设计师也能玩
• 用 React？→ React Three Fiber，门槛中等控制力强
• 要极致性能？→ Three.js vanilla，学习曲线陡但最自由

还有一份完整的 3D 模型优化 Pipeline：从 Blender 导出 → 减面 → 烘焙纹理 → GLB 格式 → gltf-transform 压缩，一条龙搞定。文件大小能压到 5MB 以内。

移动端适配才是真考验

很多人做 3D 网站死在移动端——卡成 PPT。这个 Skill 给了一套 Mobile Detection 方案：

• DPR 限制在 1（而不是桌面端的 2）
• 移动端三角面数量控制在 100K 以内（桌面端可以到 500K）
• WebGL 不支持时自动降级成静态图片

配合这些技能一起用效果翻倍

官方推荐组合：3D Web Experience + Scroll Experience + Landing Page Design，这三个打配合可以做出来那种”滚动时相机穿过 3D 场景”的炫酷落地页。

现在 AIGC 工具已经能生成完整的 3D 代码了，与其自己硬啃 WebGL 文档，不如让 AI 帮你搭框架你来调优。这个 Skill 就是那个帮你和 AI 对话的”翻译器”。

GitHub：sickn33/agentic-awesome-skills – 3D Web Experience

GitHub: https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/3d-web-experience