Paano Mag-deploy ng 3D Game sa Vercel Ngayong Linggo (gamit ang Kakayahan sa AI)

Vibe Skills

Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.

Tuklasin ang mga Skill

Magsimula Ngayon Nang Libre

Magpadala ng 3D Game sa Vercel sa Linggo ng Gabi: Ang 48-Hour Deploy Playbook

Maaari kang pumunta mula sa walang laman na Biyernes ng gabi hanggang sa iyong-laro.vercel.app link sa hapunan ng Linggo. Ang stack ay Three.js, Cursor, isang kasanayan sa AI mula sa Vibe Skills, at ang libreng tier ng Vercel. Kabuuang gastos para sa weekend: $0. Kabuuang imprastraktura na kailangan mong bantayan: wala rin.

Hindi ito "bumuo ng prototype sa iyong laptop at tawagin itong tapos na". Ito ay isang pampublikong URL na maaaring buksan ng sinuman sa mundo sa isang browser, na may HTTPS, edge caching, at isang custom domain kung gusto mo. Ang kasanayan sa AI ay nagpapadala ng Three.js scaffolding at isang gumaganang vercel.json. Ang Cursor ay humahawak sa iteration loop. Ang Vercel ay humahawak sa deploy. Ikaw ang humahawak sa disenyo.

Ang gabay na ito ay para sa mga indie dev, vibe coder, kalahok sa hackathon, at sinumang pagod na sa kalahating tapos na mga localhost:5173 tab. Saklaw namin kung bakit gumagana ang stack na ito, ang 48-oras na anatomy ng deploy, limang kasanayan sa 3D game na ginawa para sa workflow, at ang Biyernes-hanggang-Linggo step-by-step.

Vibe Skills

Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.

Tuklasin ang mga Skill

Magsimula Ngayon Nang Libre

Bakit ang Vercel + Three.js + AI Skills Ang Solo Dev Stack

Ang Vercel ay ang pinakamadaling posibleng deploy target para sa isang Three.js game. Push sa GitHub, mapapansin ito ng Vercel, bubuuin ang proyekto, at ibabalik sa iyo ang isang URL sa loob ng 60 segundo. Walang server na kailangang i-provision, walang Docker file, walang NGINX config, walang SSL setup. Ang Three.js bundle ay static HTML, JS, at WebGL assets lamang, na eksaktong ginawa para sa edge network ng Vercel.

Ang libreng tier ay kumportable na sasakupin ang isang weekend launch:

• 100 GB bandwidth bawat buwan. Ang isang 5 MB Three.js build sa 10,000 plays ay 50 GB. Mauubusan ka ng weekend bago ka maubusan ng bandwidth.
• Walang limitasyong static deploys na may HTTPS at isang *.vercel.app subdomain.
• Suporta sa custom domain sa libreng tier - dalhin ang iyong sariling pangalan-laro.com kung mayroon ka, kung hindi, ang libreng vercel.app URL ay maaaring ibahagi sa bawat social platform.
• Mga preview deploy para sa bawat commit - bawat push ay may sariling URL, kaya maaari kang magbahagi ng build sa isang kaibigan at patuloy na mag-iterate nang hindi ito nasisira.

Magdagdag ng isang kasanayan sa AI mula sa Vibe Skills at mawawala rin ang boilerplate. Ang Three.js scene setup, player controller, build pipeline, at isang Vercel-ready vercel.json ay nabuo sa isang command. Pagkatapos ay ginagawang chat ng Cursor ang natitirang bahagi ng weekend kung saan inilalarawan mo ang gameplay na gusto mo at tinatama ang output. Iyon ang buong stack: isang marketplace skill para sa pundasyon, isang AI editor para sa iteration, at Vercel para sa deploy. Solo, libre, at mabilis.

Vibe Skills

Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.

Tuklasin ang mga Skill

Magsimula Ngayon Nang Libre

Ang 48-Hour Anatomy: Biyernes na Konsepto hanggang Linggo na Deploy

Ang bawat weekend ship na aktwal na nagiging live ay sumusunod sa parehong beats. Ang trick ay planuhin ang deploy sa Biyernes, hindi sa Linggo ng hapon, upang ang huling anim na oras ay mapunta sa polish sa halip na makipaglaban sa isang build error.

Ang dahilan kung bakit ito gumagana ay ang Biyernes na push sa Vercel. Kapag umiiral na ang URL, awtomatikong nagde-deploy ang bawat Sabado at Linggo na commit. Walang "Linggo ng gabi na deploy panic" dahil nangyari na ang deploy noong Biyernes at tumatakbo ito nang autopilot sa buong weekend.

Ano ang hitsura ng "Vibe Coding" ng isang 3D Game sa Vercel

Ang vibe coding ay nangangahulugang paglalarawan ng gusto mo sa plain English at pagpapagawa ng code sa isang AI editor, pagkatapos ay pag-iterate sa output. Para sa isang Three.js game sa Vercel, ang loop ay hindi pangkaraniwang malinis: bawat pagbabago sa Cursor ay isang pnpm dev lang ang layo mula sa lokal na feedback, pagkatapos ay isang git push lang ang layo mula sa isang live preview URL, pagkatapos ay awtomatikong na-deploy sa production sa main.

Ang isang vibe-coded na Vercel game weekend ay ganito:

1. Buksan ang starter folder ng skill sa Cursor.
2. Maglarawan ng isang feature sa chat: "double jump kung ang space ay pinindot ng dalawang beses sa loob ng 200ms".
3. I-edit ng Cursor ang controller file. Save. Nagre-reload ang pnpm dev. Nararamdaman mo ang jump sa browser.
4. Kung tama ang pakiramdam, git push. Bumubuo ang Vercel ng preview URL. Ipadala ito sa isang kaibigan.
5. Mag-merge sa main kapag na-lock na ang pakiramdam. Ang production URL ay nag-a-update sa loob ng 60 segundo.

Ang AI ang gumagawa ng pagta-type. Ang Vercel ang gumagawa ng deploy. Ikaw ang gumagawa ng pakiramdam at ng disenyo.

5 AI 3D Game Skills na Nagpapagana Nito sa Vibe Skills

Ang mga kasanayang ito ay ginawa para sa Vercel + Three.js + Cursor weekend workflow. Bawat isa ay nagpapadala na may Vite-based Three.js project, isang gumaganang vercel.json, isang pnpm build na gumagawa ng static bundle na kayang i-serve ng Vercel mula sa edge, at isang nasubok na deploy path. Lahat ay nasa 3D Games category sa Vibe Skills.

1. Three.js + Vercel Game Starter

Ang default na pagpipilian. Bumubuo ng isang Three.js scene na may player controller, third-person camera, lighting rig, skybox, at isang ground plane na may mga collision. Nagpapadala na may vercel.json na nagse-set ng tamang caching headers para sa Three.js asset bundles. Ang pnpm dev ay tumatakbo nang lokal; isang click sa Vercel dashboard ay kumokonekta sa GitHub repo at mayroon ka nang live na URL.

Pinakamahusay para sa: anumang genre maliban sa purong 2D. Gamitin ito kung hindi mo pa alam kung ano ang ginagawa mo.

2. First-Person Vercel Walker

Isang polished first-person controller (WASD + mouse pointer lock + gravity + sprint + jump) na may footstep hooks, head-bob, at isang vercel.json na tamang humahawak sa pointer-lock CSP headers. Ito ay madalas na nagiging sanhi ng problema sa maraming solo dev sa production. Ang skill ay nagso-solve nito para sa iyo.

Pinakamahusay para sa: walking sims, horror prototypes, narrative games, museum exhibits.

3. Browser Arena Shooter Kit

Isang top-down arena (twin-stick controller, wave spawner, basic enemy AI, projectile system, score HUD) na may Vercel-tuned build na nag-gzips ng assets, nag-cocode-splits ng AI, at nagla-lazy-load ng musika. Kasama ang multiplayer hooks; ang weekend ay nagpapadala ng single-player.

Pinakamahusay para sa: arcade shooters, bullet hell, jam entries na kailangang mabilis mag-load sa mobile.

4. Vercel Puzzle Platformer

Isang third-person platformer (variable jump, coyote time, ledge detection), checkpoints, tatlong stub levels na maaari mong i-edit sa Blender o sa code, at isang respawn loop. Ang vercel.json ay naka-configure para sa instant edge-cached level reloads, kaya mabilis ang pakiramdam ng playtesting sa telepono.

Pinakamahusay para sa: puzzle platformers, parkour prototypes, level-design experiments.

5. Vercel Driving Sandbox

Arcade driving feel (acceleration curve, drift physics, camera lag, basic terrain) na may low-poly car, isang track template, at isang deploy na naka-tune para sa malalaking terrain meshes. Ang mga preset na HTTP headers ay nagpapabilis sa pag-start ng WebGL context sa Safari, na sa kasaysayan ang pinakamabagal na browser para sa Three.js.

Pinakamahusay para sa: arcade racing, off-road driving, car-feel demos para sa isang portfolio.

Tingnan ang lahat ng 3D game skills sa Vibe Skills →

Biyernes-hanggang-Linggo Step-by-Step

Ito ang eksaktong iskedyul. Ayusin ang oras ng pagsisimula, ngunit panatilihin ang pagkakasunud-sunod. Ang pangunahing milestone ay ang Biyernes ng gabi na Vercel deploy. Lahat ng pagkatapos nito ay iteration.

Biyernes 6pm - 8pm: Pumili ng Skill, Push sa GitHub, Ikonekta ang Vercel

Hakbang 1: Pumili ng isang 3D game skill sa Vibe Skills. Mag-browse sa 3D Games category, piliin ang tumutugma sa iyong genre, at i-install ang starter sa isang bagong folder. Buksan ito sa Cursor. Dapat kang makakita ng Three.js scene na may gumagalaw na manlalaro sa 7pm.

Hakbang 2: Lumikha ng isang GitHub repo at mag-push. git init, git remote add, git push. Gamitin ang slug ng iyong laro bilang pangalan ng repo (crystal-runner, lunar-fishing, kahit ano). Kadalasan ang pangalan ng repo ang nagiging URL mo.

Hakbang 3: Ikonekta ang repo sa Vercel. Mag-sign in sa Vercel gamit ang GitHub (libre), i-click ang "Add New Project", piliin ang repo. Awtomatikong na-detect ng Vercel ang Vite at kinokonfigure ang build. I-click ang Deploy. Sa loob ng 60 segundo mayroon kang crystal-runner.vercel.app URL. Buksan ito sa iyong telepono. Ibahagi sa isang kaibigan. Ang deploy bar ay zero na ngayon para sa natitirang bahagi ng weekend.

Biyernes 8pm - 10pm: Isulat ang Design Doc

Hakbang 4: Sagutin ang limang tanong sa plain English. Magbukas ng Notion page o isang markdown file sa loob ng repo at sagutin:

• Ano ang ginagawa ng player bawat 5 segundo? (ang core loop)
• Ano ang win condition at ang lose condition?
• Gaano katagal ang isang run o isang level?
• Ano ang visual hook? (palette, lighting, style reference)
• Ano ang isang feature na nagpapanatiling kakaiba nito sa loob ng 30 segundo?

Hakbang 5: I-commit ang design doc. Itulak ito sa repo. Magde-deploy muli ang Vercel. Ang disiplina ng pagtutulak ng bawat makabuluhang pagbabago ay nagpapanatiling tapat sa live URL.

Sabado 9am - 1pm: Buuin ang Core Mechanic

Hakbang 6: Palitan ang placeholder mechanic ng iyong isang feature. Ito ang tanging feature na mahalaga. Gamitin ang chat ng Cursor upang ilarawan ito ("kapag nakuha ng player ang isang kristal, i-freeze ang mga kalapit na kaaway sa loob ng 2 segundo at magpatugtog ng chime"). Mag-iterate nang lokal gamit ang pnpm dev. Kapag tama ang pakiramdam, mag-push.

Hakbang 7: I-wire ang win/lose state. Ang isang 60-segundong build na may totoong pagtatapos ay parang isang laro. Ang isang 60-minutong build na walang pagtatapos ay parang isang tech demo. Palaging i-wire muna ang win screen, pagkatapos ang lahat ng iba pa.

Sabado 1pm - 8pm: Magdagdag ng Isang Level

Hakbang 8: Bumuo ng isang polished level. Hindi tatlong kalahating lutong level. Gumamit ng mga placeholder cube para sa geometry. Gamitin ang stock character ng skill. Ayusin ang pakiramdam - jump height, camera lag, particle intensity.

Hakbang 9: Magdagdag ng tutorial overlay. Ang isang dalawang pangungusap na "WASD para gumalaw, click para bumaril" na popup sa unang pagbukas ay makakapagligtas sa iyong launch mula sa mga nalilitong manlalaro na sumusuko sa loob ng 8 segundo. Maaaring bumuo ng overlay ng React (o vanilla DOM) ang Cursor sa loob ng 30 segundo.

Hakbang 10: Mag-push bawat oras. Bawat push ay nakakakuha ng Vercel preview URL. Ipadala ang bawat isa sa isang kaibigan. Ang feedback loop ay ang lihim na sandata ng stack na ito.

Linggo 10am - 4pm: Polish

Hakbang 11: Magdagdag ng tatlong tunog. Footstep loop, ambient pad, win sting. Kahit tatlong tunog ay malaki ang maitataas sa isang weekend prototype. Libreng sources: freesound.org, opengameart.org.

Hakbang 12: Magdagdag ng juice. Mga particle sa pagtama, screen shake sa impact, mga numero na lumalabas sa score. Ang juice ang gumagawa na ang isang 48-oras na build ay mukhang isang 6-buwang build sa isang GIF. Magtanong sa Cursor na magdagdag ng "screen shake na may intensity na 0.3 sa loob ng 150ms kapag nasaktan ang player" - isusulat nito ang camera-shake hook sa limang segundo.

Hakbang 13: Magpatakbo ng Lighthouse pass. Buksan ang Vercel URL sa isang telepono at patakbuhin ang Chrome DevTools Lighthouse. Ang Three.js bundles ay karaniwang nasa 400 KB hanggang 1.5 MB. Kung higit ka sa 3 MB, magtanong sa Cursor na i-enable ang code splitting sa mabibigat na modules. Ang gzip at brotli ng Vercel ang bahala sa iba pa.

Hakbang 14: Bug pass. Patakbuhin ang iyong live URL ng limang beses nang sunud-sunod. Ayusin ang anumang masisira ng dalawang beses. Balewalain ang anumang masisira ng isang beses.

Linggo 4pm - 8pm: Launch

Hakbang 15: (Opsyonal) Mag-set ng custom domain. Kung bumili ka ng pangalan-laro.com nang maaga, idagdag ito sa mga setting ng proyekto ng Vercel. Awtomatiko ang SSL. Kung hindi, ang *.vercel.app URL ay maayos - mayroon itong HTTPS, ito ay maibabahagi, at naglo-load ito kahit saan.

Hakbang 16: Mag-record ng 15-segundong GIF ng pinakamagandang sandali. Gamitin ang live URL, hindi localhost. Ang GIF ang makaka-click sa Twitter, Bluesky, at Reddit.

Hakbang 17: Lumikha ng isang itch.io page (opsyonal ngunit may mataas na leverage). Pamagat, isang-linyang tagline, tatlong screenshot, ang GIF, mga kontrol, mga kredito, at isang embed ng iyong *.vercel.app iframe (sinusuportahan ng itch.io ang iframe embeds para sa mga HTML5 game). Ngayon mayroon kang dalawang URL - isa para sa kaswal na pagbabahagi at isa para sa audience ng mga gamer.

Hakbang 18: I-post ang link. Twitter, Bluesky, ang iyong dev community Discord, r/IndieDev, r/threejs, r/WebGames. Palaging unahin ang GIF. Palaging isama ang URL. Kung gumamit ka ng Vibe Skills skill, banggitin ito sa devlog post - ang ibang mga dev na nagbabasa ay gugustuhin ang parehong starter.

Paano Iwasan ang Tatlong Pinakakaraniwang Vercel Deploy Failures

Tatlong bagay ang sumisira sa halos bawat solo Three.js + Vercel weekend. Lahat ng tatlo ay 5-minutong pag-aayos kung mahuhuli mo sila sa Biyernes ng gabi, at 5-oras na rabbit hole kung matuklasan mo sila sa Linggo ng 7pm.

• Maling build output directory. Ang default ng Vite ay dist/. Awtomatikong na-detect ng Vercel ang Vite at ginagamit ang dist/. Kung binago mo ang output, itakda ang outputDirectory sa vercel.json o sa mga setting ng proyekto o ang iyong deploy ay magiging isang 404.
• Mga path ng asset na gumagana nang lokal ngunit nagiging 404 sa production. Gumamit ng relative paths o ang Vite import.meta.env.BASE_URL helper para sa anumang runtime-loaded na GLB, texture, o audio file. Ang mga hardcoded na path na /assets/... ay karaniwang gumagana, ngunit ang mga kinopya-at-pinaste na absolute Windows path ay tiyak na hindi.
• CSP headers na humaharang sa pointer lock o audio context. Ang mga first-person game ay nangangailangan ng pointer lock. Ang audio ay nangangailangan ng user-gesture activation. Ang anumang skill mula sa 3D Games category ay nagpapadala na may tamang headers block sa vercel.json upang mahawakan ito. Kung nagsulat ka ng sarili mo mula sa simula, kopyahin ang config mula sa repo ng skill.

Gumagana ang deploy sa Biyernes, kaya kapag nasira ang mga ito sa Linggo, ito ay palaging dahil sa isang kamakailang pagbabago. Ang git bisect ay kaibigan mo. Mas maganda pa: patuloy na mag-push bawat 30 minuto upang maliit ang broken commit.

Madalas Itanong

Talaga bang tatagal ang Vercel free tier kung makakuha ng traffic ang laro ko?

Oo, para sa isang weekend launch at sa unang ilang linggo. Ang libreng tier ay nagbibigay sa iyo ng 100 GB bandwidth bawat buwan, na humigit-kumulang 20,000 plays ng isang 5 MB Three.js build. Kung maabot mo ang limitasyong iyon, ang Pro plan ay $20/buwan at dinadagdagan ka ng hanggang 1 TB. Para sa isang weekend ship, ang libre ay higit pa sa sapat. Ang mga skill sa Vibe Skills ay nagpapadala na may mga build config na nagpapaliit ng bundle size, na mas nagpapahaba sa libreng tier.

Maaari ba akong gumamit ng custom domain sa libreng Vercel tier?

Oo. Sinusuportahan ng libreng tier ang custom domains na may awtomatikong HTTPS. Bumili ng domain (Namecheap, Cloudflare Registrar, Porkbun), ituro ito sa Vercel, at ang Vercel ang bahala sa SSL certificate. Ang setup ay tumatagal ng humigit-kumulang 10 minuto. Kung wala kang domain, ang pangalan-laro.vercel.app URL ay sapat na maikli upang maibahagi sa anumang platform.

OK ba ang stack na ito para sa isang game jam submission?

Oo, at ito ay isa sa pinakamahusay na stacks para sa mga jam submission. Karamihan sa mga jam (Ludum Dare, GMTK, js13k, GitHub Game Off) ay tumatanggap ng anumang web-playable URL. Ang isang *.vercel.app link ay gumagana tulad ng isang itch.io URL para sa mga hurado. Maraming jam winners ang nagpapadala sa pareho - itch.io para sa audience ng mga gamer, Vercel bilang mabilis na canonical URL.

Kailangan ko bang malaman ang Three.js bago magsimula?

Kailangan mo ng sapat na JavaScript upang mabasa kung ano ang sinusulat ng Cursor at baguhin ang mga value. Hindi mo kailangang magsulat ng Three.js mula sa simula. Ang mga skill sa Vibe Skills ay bumubuo ng engine setup, camera, controller, at build config. Ang Cursor ang bahala sa gameplay code mula sa iyong mga paglalarawan.

Ano ang mangyayari kung mabigo ang aking Vercel build sa Linggo ng 7pm?

Ang pinakakaraniwang sanhi ay isang TypeScript error o isang nawawalang env var. Ipinapakita ng Vercel ang build log na may naitatangi ng linya na nagkakamali. Isang click sa dashboard ang nagre-roll back sa huling gumaganang deploy at isinusulong ito sa production. Dahil ang bawat push ay isang preview deploy, hindi ka kailanman higit sa isang commit mula sa isang gumaganang build. Ito ang dahilan kung bakit mahalaga ang pagtutulak bawat 30 minuto sa Sabado at Linggo.

Maaari ko bang ibenta o baguhin ang code mula sa isang Vibe Skills 3D game skill?

Oo. Ang mga skill sa Vibe Skills ay nagpapadala na may komersyal na-friendly na lisensya na nagpapahintulot sa iyo na ilabas ang code sa iyong sariling laro sa Vercel, itch.io, Steam, o saanman. Pinapanatili ng mga creator ang IP ng skill, pinapanatili mo ang IP ng larong binuo sa ibabaw nito.

Paano kung ayaw kong gamitin ang Cursor?

Anumang AI editor na kayang mag-edit ng mga project file ay gagana. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - alinman sa mga ito ay kayang mag-iterate sa Three.js scaffolding mula sa isang Vibe Skills skill. Ang skill mismo ay editor-agnostic.

Ipadala Ito sa Weekend na Ito

Ang dahilan kung bakit karamihan sa mga solo dev ay hindi kailanman nagpapadala ng isang 3D game ay hindi ang engine, ang genre, o ang skill ceiling. Ito ay ang Biyernes ng gabi kung saan sila ay "mag-research pa ng kaunti" at hindi kailanman magsisimula. Sa susunod na libreng weekend mo, sundin ang four-phase plan: i-install ang isang Vibe Skills 3D game skill, mag-push sa GitHub, ikonekta ang Vercel, mag-deploy bago ang Biyernes 8pm, pagkatapos ay gugulin ang Sabado at Linggo sa pag-iterate sa isang live na URL.

Ang iyong portfolio ng sampung weekend-shipped na laro sa Vercel ay mas mahalaga kaysa sa iyong hypothetical na anim na buwang pangarap na engine project. Ang naipadala ay palaging nananalo. Ang libreng Vercel URL ang patunay.

Tingnan ang 3D game skills sa Vibe Skills →

Laktawan ang Three.js boilerplate marathon. Mag-install ng 3D game skill sa Vibe Skills, mag-push sa Vercel, at magkaroon ng live URL sa Linggo ng gabi.