周末部署指南：周日晚上在 Vercel 上发布 3D 游戏
你可以在周五晚上从零开始，到周日晚餐时拥有一个 your-game.vercel.app 链接。 技术栈是 Three.js、Cursor、Vibe Skills 的一项 AI 技能，以及 Vercel 的免费套餐。周末总成本：0 美元。需要你维护的基础设施：同样为零。
这不是“在笔记本上构建一个原型就算完成”。这是一个任何人都可以通过浏览器打开的公共 URL，具有 HTTPS、边缘缓存，如果你需要，还可以自定义域名。AI 技能将提供 Three.js 的脚手架代码和可用的 vercel.json。Cursor 负责迭代循环。Vercel 负责部署。你负责设计。
本指南适用于独立开发者、vibe 开发者、黑客马拉松参与者，以及任何厌倦了半成品 localhost:5173 标签页的人。我们将介绍为什么这种技术栈有效、48 小时部署的构成、为工作流程构建的五种 3D 游戏技能，以及从周五到周日的具体步骤。
为什么 Vercel + Three.js + AI 技能是独立的开发者技术栈
Vercel 是 Three.js 游戏最省事的部署目标。 推送到 GitHub，Vercel 会检测到，构建项目，并在 60 秒内给你一个 URL。无需配置服务器，无需 Docker 文件，无需 NGINX 配置，无需 SSL 设置。Three.js 包只是静态的 HTML、JS 和 WebGL 资源，这正是 Vercel 的边缘网络专为服务这些内容而构建的。
免费套餐足以轻松应对周末的发布：
- 每月 100 GB 带宽。 一款 5 MB 的 Three.js 构建，如果玩 10,000 次，就是 50 GB。你会在用完带宽之前用完周末。
- 无限次静态部署，提供 HTTPS 和
*.vercel.app子域名。 - 免费套餐支持自定义域名 - 如果你有自己的
name-game.com，请使用它，否则免费的vercel.appURL 可以在所有社交平台共享。 - 每次提交都有预览部署 - 每次推送都会获得自己的 URL，因此你可以与朋友共享一个构建版本，并在不破坏现有版本的情况下进行迭代。
从 Vibe Skills 添加一项 AI 技能，样板代码也会消失。Three.js 场景设置、玩家控制器、构建流程和适用于 Vercel 的 vercel.json 将在一个命令中生成。然后，Cursor 将本周末的剩余时间变成一个聊天过程，你在其中描述你想要的游戏玩法并调整输出。这就是完整技术栈：一个用于基础的市场技能，一个用于迭代的 AI 编辑器，以及 Vercel 用于部署。独立、免费且快速。
48 小时构成：周五概念到周日部署
每一次实际发布的周末项目都遵循相同的步骤。诀窍是在周五规划部署，而不是周日下午，这样最后的六个小时就可以用于打磨，而不是与构建错误作斗争。
| 阶段 | 时间段 | 你的工作 | 阶段结束时交付的内容 |
|---|---|---|---|
| 阶段 1：概念 | 周五 6pm - 10pm | 选择游戏类型，编写 1 页设计文档，安装 Vibe Skills 3D 游戏技能，将启动器推送到 GitHub，连接到 Vercel | 带有样板场景的可用 name-game.vercel.app URL |
| 阶段 2：构建 | 周六 9am - 8pm | 用核心机制替换占位符，添加 1 个关卡，实现胜利/失败状态 | 在同一个 Vercel URL 上可玩版本，每次推送自动部署 |
| 阶段 3：打磨 | 周日 10am - 4pm | 音效、细节、教程弹出窗口、错误修复、移动端性能检查 | 首局 60 秒内不会崩溃的版本 |
| 阶段 4：发布 | 周日 4pm - 8pm | 设置自定义域名（可选），录制 GIF，编写 itch.io 页面，发布链接 | 公共 URL + itch.io 页面 + 社交媒体发布帖 |
之所以能成功，是因为周五就推送到 Vercel 了。一旦 URL 存在，每周六和周日的所有提交都会自动部署。不会出现“周日晚上部署恐慌”，因为部署早在周五就已经完成，并且整个周末都在自动运行。
在 Vercel 上“vibe 编码”3D 游戏是怎样的
vibe 编码意味着用简单的英语描述你想要什么，然后让 AI 编辑器编写代码，接着迭代输出。 对于 Vercel 上的 Three.js 游戏，这个循环非常顺畅：Cursor 中的每一次更改都只需 pnpm dev 即可进行本地反馈，然后 git push 即可获得实时预览 URL，最后自动部署到生产环境。
一个 vibe 编码的 Vercel 游戏周末是这样的：
- 在 Cursor 中打开技能的启动器文件夹。
- 在聊天中描述一个功能：“如果用户在 200 毫秒内按两次空格键，则执行双跳。”
- Cursor 编辑控制器文件。保存。
pnpm dev重新加载。你在浏览器中感受到了跳跃。 - 如果感觉对了，
git push。Vercel 构建一个预览 URL。将其发送给朋友。 - 当感觉锁定后，合并到
main。生产 URL 将在 60 秒内更新。
AI 负责打字。Vercel 负责部署。你负责感觉和设计。
5 款 AI 3D 游戏技能，让 Vibe Skills 成为可能
这些技能是为 Vercel + Three.js + Cursor 的周末工作流程构建的。每一个都包含一个基于 Vite 的 Three.js 项目、一个可用的 vercel.json、一个 pnpm build 命令（生成 Vercel 可从边缘服务部署的静态包），以及一个经过测试的部署路径。所有这些都在 Vibe Skills 的 3D 游戏类别 中。
1. Three.js + Vercel 游戏启动器
默认选择。生成一个 Three.js 场景，包含玩家控制器、第三人称相机、灯光设置、天际盒和带有碰撞的地面。附带一个 vercel.json，为 Three.js 资源包设置正确的缓存头。pnpm dev 在本地运行；在 Vercel 仪表板上单击一次即可连接 GitHub 存储库，你就能获得一个实时 URL。
最适合：除纯 2D 之外的任何游戏类型。如果你还不知道要构建什么，请使用此项。
2. 第一人称 Vercel 漫步者
一个精致的第一人称控制器（WASD + 鼠标指针锁定 + 重力 + 冲刺 + 跳跃），带有脚步声钩子、头部晃动，以及一个正确处理指针锁定 CSP 头信息的 vercel.json。这一点经常让许多独立开发者在生产环境中犯难。此技能为您解决了这个问题。
最适合：步行模拟器、恐怖原型、叙事游戏、博物馆展览。
3. 浏览器竞技场射击游戏套件
一个俯视角竞技场（双摇杆控制器、波次生成器、基本敌人 AI、弹射系统、得分 HUD），并带有为 Vercel 优化的构建，该构建会对资源进行 gzip 压缩，对 AI 进行代码分割，并延迟加载音乐。包含多人游戏钩子；周末版本只发布单人游戏。
最适合：街机射击游戏、弹幕游戏、需要快速在移动设备上加载的短时开发比赛。
4. Vercel 益智平台游戏
一个第三人称平台游戏（可变跳跃、反弹时间、边缘检测），包含检查点、三个可以在 Blender 或代码中编辑的占位符关卡，以及一个重生循环。vercel.json 配置为即时边缘缓存的关卡重新加载，因此在手机上进行游戏测试感觉非常流畅。
最适合：益智平台游戏、跑酷原型、关卡设计实验。
5. Vercel 驾驶沙盒
街机驾驶体验（加速度曲线、漂移物理、相机延迟、基本地形），配有低多边形汽车、赛道模板，以及为大型地形网格优化的部署。预设的 HTTP 头使 WebGL 上下文在 Safari 浏览器（历史上 Three.js 最慢的浏览器）上启动更快。
最适合：街机赛车、越野驾驶、作品集中的汽车驾驶演示。
周五到周日步骤详解
这是确切的时间表。可以调整开始时间，但要保持顺序。关键的里程碑是周五晚上的 Vercel 部署。之后的所有内容都是迭代。
周五 6pm - 8pm：选择技能，推送到 GitHub，连接 Vercel
步骤 1：在 Vibe Skills 上选择一款 3D 游戏技能。 浏览 3D 游戏类别，选择与你的游戏类型相符的技能，并将启动器安装到新文件夹中。在 Cursor 中打开它。到晚上 7 点，你应该能看到一个带有移动玩家的 Three.js 场景。
步骤 2：创建 GitHub 存储库并推送。 git init、git remote add、git push。使用你游戏的 slug 作为存储库名称（例如 crystal-runner、lunar-fishing 等）。存储库名称通常会成为你的 URL。
步骤 3：将存储库连接到 Vercel。 使用 GitHub 登录 Vercel（免费），单击“添加新项目”，选择存储库。Vercel 会自动检测 Vite 并配置构建。单击部署。60 秒内，你将获得一个 crystal-runner.vercel.app URL。在手机上打开它。与一位朋友分享。部署进度条现在对本周末的剩余时间来说已经为零。
周五 8pm - 10pm：编写设计文档
步骤 4：用简单的英语回答五个问题。 在 Notion 页面或存储库内的 markdown 文件中回答：
- 玩家每 5 秒在做什么？（核心循环）
- 胜利条件和失败条件是什么？
- 一局或一个关卡有多长？
- 视觉上的吸引点是什么？（调色板、灯光、风格参考）
- 有什么一个特点能在 30 秒内让人印象深刻？
步骤 5：提交设计文档。 推送至存储库。Vercel 将重新部署。每一次有意义的更改都进行提交的纪律，可以让实时 URL 保持最新。
周六 9am - 1pm：构建核心机制
步骤 6：用你的一个特色功能替换占位符机制。 这是唯一重要的功能。使用 Cursor 聊天来描述它（“当玩家拾取水晶时，冻结附近的敌人 2 秒并播放提示音”）。使用 pnpm dev 在本地进行迭代。感觉合适时，进行推送。
步骤 7：连接胜利/失败状态。 一个持续 60 秒但有真实结局的构建会让你感觉像个游戏。一个持续 60 分钟但没有结局的构建则像一个技术演示。始终先实现胜利画面，然后是其他所有内容。
周六 1pm - 8pm：添加一个关卡
步骤 8：构建一个精心打磨的关卡。 不要三个半成品。使用占位符立方体作为几何体。使用技能自带的角色。调整感觉 - 跳跃高度、相机延迟、粒子强度。
步骤 9：添加教程叠加层。 首次启动时，一个简单的“WASD 移动，单击射击”弹出窗口可以防止玩家在 8 秒内放弃而导致游戏体验糟糕。Cursor 可以在 30 秒内生成 React（或原生 DOM）叠加层。
步骤 10：每小时提交一次。 每次提交都会获得一个 Vercel 预览 URL。将每个 URL 发送给朋友。反馈循环是这个技术栈的秘密武器。
周日 10am - 4pm：打磨
步骤 11：添加三种音效。 脚步声循环、环境音效、胜利音效。即使是三种音效也能极大地提升一个周末原型。免费资源：freesound.org、opengameart.org。
步骤 12：添加细节（Juice）。 命中时出现粒子效果，碰撞时屏幕震动，得分时出现数字弹出。细节能让一个 48 小时的构建在 GIF 中看起来像一个 6 个月的项目。让 Cursor 添加一个“玩家受伤时，强度为 0.3 的屏幕震动 150 毫秒” - - 它将在五秒内写出屏幕震动钩子。
步骤 13：运行 Lighthouse 测试。 在手机上打开 Vercel URL，运行 Chrome DevTools Lighthouse。Three.js 包的大小通常在 400 KB 到 1.5 MB 之间。如果超过 3 MB，让 Cursor 为大型模块启用代码分割。Vercel 的 gzip 和 brotli 将处理其余部分。
步骤 14：错误修复。 连续玩五次你的实时 URL。修复任何会重复出现的问题。忽略任何只出现一次的问题。
周日 4pm - 8pm：发布
步骤 15：（可选）设置自定义域名。 如果你提前购买了 name-game.com，请在 Vercel 的项目设置中添加。SSL 是自动的。否则，*.vercel.app URL 也可以 - - 它具有 HTTPS，可共享，并且在任何地方都能加载。
步骤 16：录制一个 15 秒的精彩瞬间 GIF。 使用实时 URL，而不是 localhost。GIF 是在 Twitter、Bluesky 和 Reddit 上获得点击的内容。
步骤 17：创建 itch.io 页面（可选但高收益）。 标题、一行标语、三张截图、GIF、控件、制作人员名单，以及嵌入你的 *.vercel.app iframe（itch.io 支持 HTML5 游戏的 iframe 嵌入）。现在你有了两个 URL - - 一个用于休闲分享，一个用于游戏玩家群体。
步骤 18：发布链接。 Twitter、Bluesky、你的开发社区 Discord、r/IndieDev、r/threejs、r/WebGames。始终以 GIF 开头。始终包含 URL。如果你使用了 Vibe Skills 技能，请在开发日志帖子中提及 - - 其他阅读的开发者会想要同样的启动器。
如何避免最常见的三个 Vercel 部署失败
几乎所有独立的 Three.js + Vercel 周末项目都会遇到这三个问题。如果能在周五晚上发现，这三个都是 5 分钟的修复，但如果到周日下午 7 点才发现，就会变成 5 小时的“兔子洞”。
- 错误的构建输出目录。 Vite 默认为
dist/。Vercel 会自动检测 Vite 并使用dist/。如果你自定义了输出目录，请在vercel.json、项目设置或你的部署中设置outputDirectory，否则将导致 404。 - 在本地工作但在生产环境中 404 的资源路径。 对于任何运行时加载的 GLB、纹理或音频文件，请使用相对路径或 Vite 的
import.meta.env.BASE_URL帮助程序。硬编码的/assets/...路径通常有效，但复制粘贴的绝对 Windows 路径绝对无效。 - 阻止指针锁定或音频上下文的 CSP 头信息。 第一人称游戏需要指针锁定。音频需要用户手势激活。来自 3D 游戏类别 的任何技能都附带
vercel.json中正确的headers块来处理此问题。如果你从头开始编写了自己的代码，请从技能的存储库中复制配置。
部署在周五就能工作，所以当周日出现问题时，通常是由于最近的更改。git bisect 是你的朋友。更好的方法是：每 30 分钟提交一次，这样有问题的提交就会很小。
常见问题解答
Vercel 免费套餐在我的游戏获得流量时真的能hold住吗？
是的，对于周末发布以及最初几周是足够的。免费套餐提供每月 100 GB 带宽，这大致相当于玩一个 5 MB 的 Three.js 构建 20,000 次。如果你达到上限，专业版套餐是每月 20 美元，将流量提高到 1 TB。对于周末发布，免费套餐绰绰有余。Vibe Skills 上的技能附带的构建配置可以最小化包大小，从而进一步延长免费套餐的使用时间。
我可以在免费的 Vercel 套餐上使用自定义域名吗？
是的。免费套餐支持自定义域名，并提供自动 HTTPS。购买一个域名（Namecheap、Cloudflare Registrar、Porkbun），将其指向 Vercel，Vercel 会处理 SSL 证书。设置大约需要 10 分钟。如果你没有域名，name-game.vercel.app URL 足够短，可以在任何平台上共享。
这个技术栈适合提交游戏比赛吗？
是的，它是游戏比赛提交的最佳技术栈之一。大多数比赛（Ludum Dare、GMTK、js13k、GitHub Game Off）都接受任何可在 Web 上玩的游戏 URL。*.vercel.app 链接对评委来说与 itch.io URL 的功能完全一样。许多比赛获胜者会同时发布到两者 - - itch.io 面向游戏玩家群体，Vercel 作为快速的标准化 URL。
开始之前我需要了解 Three.js 吗？
你需要足够的 JavaScript 知识来阅读 Cursor 编写的代码并调整数值。你不需要从头开始编写 Three.js。 Vibe Skills 上的技能会生成引擎设置、相机、控制器和构建配置。Cursor 会根据你的描述处理游戏玩法代码。
如果我的 Vercel 构建在周日下午 7 点失败了怎么办？
最常见的原因是 TypeScript 错误或缺少环境变量。Vercel 会显示构建日志，并高亮显示失败的行。在仪表板上单击一次即可回滚到上一个成功的部署，并将其提升为生产版本。因为每次推送都是一次预览部署，所以你永远不会比一个提交更远离一个可用的构建。这就是为什么在周六和周日每 30 分钟提交一次很重要。
我可以出售或修改 Vibe Skills 3D 游戏技能中的代码吗？
可以。Vibe Skills 上的技能提供商业友好型许可证，允许你在 Vercel、itch.io、Steam 或任何其他平台上发布你的游戏代码。创作者保留技能的知识产权，你保留在此基础上构建的游戏的知识产权。
如果我不想使用 Cursor 怎么办？
任何可以编辑项目文件的 AI 编辑器都可以。Claude Code、Cursor、Windsurf、GitHub Copilot Chat、Cline - - 任何一个都可以基于 Vibe Skills 技能迭代 Three.js 的脚手架。技能本身与编辑器无关。
这个周末就发货吧
大多数独立开发者从未发布 3D 游戏的真正原因不是引擎、游戏类型或技术难度。而是周五晚上他们“再研究一下”，然后从未开始。你接下来的一个空闲周末，请遵循四阶段计划：安装一个 Vibe Skills 3D 游戏技能，推送到 GitHub，连接 Vercel，在周五晚上 8 点前完成部署，然后花周六和周日在一个实时 URL 上进行迭代。
你那十个周末发货的 Vercel 游戏作品集，比你那个假设的、需要六个月的梦想引擎项目更有价值。已发货的项目永远是赢家。免费的 Vercel URL 就是证明。
跳过 Three.js 的样板代码马拉松。在 Vibe Skills 上安装一款 3D 游戏技能，推送到 Vercel，并在周日晚上之前获得一个实时 URL。