我用 Spline V2 + Claude Code 做了高端 3D 网站|从 Prompt 到three js, WebGL 实战

我用 Spline V2 + Claude Code 做了高端 3D 网站|从 Prompt 到three js, WebGL 实战

By Yuya Mei 6090 位订阅者
1048 次观看 · 2026-09-05 UI 设计
一句 Prompt,真的可以完成一个高端 3D 网站吗?

这期视频,我会实际展示如何使用 Spline V2 生成一个模块化音乐控制器,再通过 Spline MCP、Claude Code 和我自己的两个 3D Website Skills,把它变成一个拥有滚动叙事、镜头动画和 WebGL 交互的完整网站。

这不是简单地把一个会旋转的 3D 模型放进网页。

我会展示如何让 AI 帮我完成:

◆ 使用 Prompt 生成可编辑的 3D 模型
◆ 调整产品结构、面板比例和键帽布局
◆ 建立 PBR 金属、塑料与玻璃材质
◆ 设置 HDRI、Reflection、Mirror、Fog 和灯光
◆ 使用 Spline MCP,让 Claude Code 直接修改场景
◆ 修复模型层级、语义命名和 Pivot
◆ 判断哪些动画留在 Spline,哪些交给 Three.js
◆ 将模型导入 React Three Fiber / Three.js
◆ 制作滚动动画、Hover、Click、Drag 和状态切换
◆ 优化模型加载、移动端性能与 WebGL 体验

我还会解释为什么这次选择 Spline,而不是只生成一段 3D 视频。

因为我要的不是一段“看起来像互动”的动画,而是一个用户真的可以操作、可以反复修改、也可以继续开发的 3D 世界。

我的完整工作流:

Prompt → Spline V2 → Spline MCP → 3D Asset Skill → Claude Code → Three.js / WebGL → 高端互动网站

如果你也在使用 AI 做网站、学习 Spline、Three.js、WebGL 或 Vibe Coding,希望这期实操可以给你一个更完整的创作思路。

喜欢这类 AI + Design + Code 的内容,记得订阅频道。接下来我还会继续分享如何用自己的 Skills,让 Claude Code 制作更独特、更有设计感的创意网站。

#SplineV2 #ClaudeCode #ThreeJS #WebGL #AIWebDesign #VibeCoding #3dwebsite

copyright free music
Neffex cold :https://www.youtube.com/watch?v=WzQBAc8i73E