Vibe Skills

Browse hundreds of ready-made skills for Claude, Cursor, and more.

Zverejnite 3D hru na Vercel do nedele vecer: 48-hodinový playbook nasadenia

Môžete sa dostať od piatkového veceru až k odkazu vaša-hra.vercel.app do nedelného obeda. Použitý stack je Three.js, Cursor, umelá inteligencia z Vibe Skills a bezplatná úroven Vercel. Celkové náklady na víkend: 0 $. Celková infraštruktúra, o ktorú sa musíte starat: tiež nula.

Toto nie je „postavte prototyp na svojom laptope a nazvite to hotovým“. Toto je verejný URL, ktorý môže ktokolvek na svete otvorit v prehliadaci, s HTTPS, hranicným ukladaním do medzipamäte a vlastnou doménou, ak ju chcete. Umelá inteligencia poskytuje základnú kostru Three.js a fungujúci súbor vercel.json. Cursor sa postará o cyklus iterácií. Vercel sa postará o nasadenie. Vy sa postaráte o dizajn.

Tento sprievodca je určený pre nezávislých vývojárov, vibe kodérov, účastníkov hackathonov a každého, koho unavujú nedokončené karty localhost:5173. Vysvetlíme, prečo tento stack funguje, ako vyzerá 48-hodinové nasadenie, pät umelých inteligencií pre 3D hry vytvorených pre tento pracovný postup a podrobný postup od piatka do nedele.

Vibe Skills

Browse hundreds of ready-made skills for Claude, Cursor, and more.

Explore Skills

Start Free Now

Prečo je Vercel + Three.js + Umelá inteligencia ideálny stack pre sólového vývojára

Vercel je najlenivejšia možná cielová platforma na nasadenie hry Three.js. Odošlite do GitHubu, Vercel si to všimne, zostaví projekt a do 60 sekúnd vám poskytne URL. Žiadny server na zabezpecenie, žiadny Docker súbor, žiadna konfigurácia NGINX, žiadne nastavenie SSL. Zostava Three.js je len statický HTML, JS a WebGL aktíva, co je presne to, na co bola hranicná siet Vercel navrhnutá.

Bezplatná úroven pohodlne pokryje víkendové spustenie:

100 GB prenosu mesačne. Zostava Three.js s velkostou 5 MB pri 10 000 prehraniach je 50 GB. Skôr vám dôjde víkend, ako dôjde prenos.
Neobmedzené statické nasadenia s HTTPS a poddoménou *.vercel.app.
Podpora vlastných domén na bezplatnej úrovni - príneste si svoje vlastné nazov-hry.com, ak nejaké máte, inak je bezplatný URL vercel.app zdielatelny na každej sociálnej platforme.
Náhlady nasadení pre každý commit - každý push dostane svoj vlastný URL, takže môžete zdielat zostavu s priatelom a dalej iterovat bez toho, aby ste ju pokazili.

Pridajte umelú inteligenciu z Vibe Skills a zdierané veci tiež zmiznú. Nastavenie scény Three.js, ovládaní hráca, zostavovací potrubie a súbor vercel.json pripravený pre Vercel sa vygenerujú jedným príkazom. Potom Cursor premení zvyšok víkendu na chat, kde opisujete hru, ktorú chcete, a ladíte výstup. Toto je celý stack: zručnost z trhoviska pre základ, editor AI pre iteráciu a Vercel pre nasadenie. Sám, zadarmo a rýchlo.

Vibe Skills

Browse hundreds of ready-made skills for Claude, Cursor, and more.

Explore Skills

Start Free Now

48-hodinová anatómia: Od piatkového konceptu po nedeľné nasadenie

Každé víkendové nasadenie, ktoré sa naozaj uskutoční, nasleduje rovnaké kroky. Trik spočíva v plánovaní nasadenia na piatok, nie na nedeľné popoludnie, takže posledných šesť hodín pôjde na doladenie namiesto boja s chybou zostavy.

Fáza	Blok casu	Co robíte	Co je nasadené do konca fázy
Fáza 1: Koncept	Piatok 18:00 - 22:00	Vyberte žáner, napíšte jednostránkový návrh dokumentu, nainštalujte umelú inteligenciu Vibe Skills pre 3D hry, odošlite štartér do GitHubu, pripojte k Vercel	Živý URL `nazov-hry.vercel.app` so základnou scénou
Fáza 2: Stavba	Sobota 9:00 - 20:00	Nahradte zástupné symboly svojou základnou mechanikou, pridajte 1 úroven, zabezpecte fungovanie stavu výhry/prehry	Hratelná zostava na rovnakom URL Vercel, automaticky nasadená pri každom push
Fáza 3: Doladenie	Nedeľa 10:00 - 16:00	Zvuk, šťava, vyskakovacie okno s návodom, kontrola chýb, kontrola výkonu na mobilných zariadeniach	Zostava, ktorá sa nerozbije prvých 60 sekúnd na žiadnom zariadení
Fáza 4: Spustenie	Nedeľa 16:00 - 20:00	Nastavte vlastnú doménu (volitelné), nahrajte GIF, napíšte stránku itch.io, zverejnite odkaz	Verejný URL + stránka itch.io + post o spustení na sociálnych sietach

Dôvodom, prečo to funguje, je piatkový push na Vercel. Len co URL existuje, každý sobotný a nedeľný commit sa automaticky nasadí. Neexistuje žiadna „panika pri nedeľnom nasadení“, pretože nasadenie sa už uskutočnilo v piatok a bežalo na autopilote celý víkend.

Ako vyzerá „vibe kódovanie“ 3D hry na Vercel

Vibe kódovanie znamená opísanie toho, co chcete, v bežnom anglickom jazyku a nechat AI editor písat kód, potom iterovat na výstupe. Pre hru Three.js na Vercel je cyklus neobvykle cistý: každá zmena v Cursor je vzdialená pnpm dev od lokálnej spätnej väzby, potom git push vzdialený od živého URL náhľadu a následne automaticky nasadený do produkcie na main.

Víkend vibe kódovania na Vercel vyzerá takto:

Otvorte štartovací adresár zručnosti v Cursor.
Opíšte funkciu v chate: „dvojitý skok, ak sa priestor stlačí dvakrát do 200 ms“.
Cursor upraví súbor ovládača. Uložit. pnpm dev sa obnoví. Cítite skok v prehliadaci.
Ak to cíti správne, git push. Vercel zostaví URL náhľadu. Pošlite ho priatelovi.
Zlúcte do main, ked je pocit uzamknutý. Produkčný URL sa aktualizuje do 60 sekúnd.

AI píše. Vercel nasadzuje. Vy sa staráte o pocit a dizajn.

5 umelých inteligencií pre 3D hry, ktoré to umožnujú na Vibe Skills

Tieto zručnosti sú navrhnuté pre pracovný postup víkendu Vercel + Three.js + Cursor. Každá z nich dodáva projekt Three.js založený na Vite, fungujúci súbor vercel.json, príkaz pnpm build, ktorý produkuje statickú zostavu, ktorú Vercel dokáže slúžit z hrany, a otestovanú cestu nasadenia. Všetky sú v kategórii 3D hry na Vibe Skills.

1. Štartér hry Three.js + Vercel

Predvolený výber. Vygeneruje scénu Three.js s ovládaním hráca, kamerou z tretej osoby, nastavením osvetlenia, oblohou a rovinnou zemou s kolíziami. Dodáva súbor vercel.json, ktorý nastavuje správne hlavičky ukladania do medzipamäte pre balíčky aktív Three.js. pnpm dev sa spúšta lokálne; jedným kliknutím v konzole Vercel pripojíte repozitár GitHub a získate živý URL.

Najlepšie pre: akýkolvek žáner okrem ciste 2D. Použite toto, ak ešte neviete, co staviate.

2. Chodítko prvej osoby pre Vercel

Vylepšený ovládač z prvej osoby (WASD + zámok kurzora myši + gravitácia + sprint + skok) s háčikmi na kroky, otrasmi hlavy a súborom vercel.json, ktorý správne spracuje hlavičky CSP pre zámok kurzora. Toto je vec, ktorá casto zamrzí sólových vývojárov v produkcii. Zručnost vám to vyrieši.

Najlepšie pre: simulačné hry, hororové prototypy, naratívne hry, múzejné výstavy.

3. Súprava prehliadacovej arénovej strelky

Aréna zhora nadol (ovládaní dvoma palicami, generátor vĺn, základná AI nepriatelov, systém projektilov, skóre HUD) s zostavou optimalizovanou pre Vercel, ktorá komprimuje aktíva, rozdeluje AI do kódových segmentov a nacitáva hudbu s odložením. Súcastou sú háčiky pre multiplayer; víkend sa zameriava na single-player.

Najlepšie pre: arkádové strelky, bullet hell, sútažné hry, ktoré sa musia rýchlo nacítavat na mobilných zariadeniach.

4. Logická plošinovka pre Vercel

Plošinovka z tretej osoby (premenlivý skok, cýote časovanie, detekcia okrajov), kontrolné body, tri náhradné úrovne, ktoré môžete upravit v Blende or v kóde, a cyklus obnovenia. Súbor vercel.json je nakonfigurovaný pre okamžité obnovenie úrovne z hranicnej medzipamäte, takže testovanie pôsobí na telefóne svižne.

Najlepšie pre: logické plošinovky, parkour prototypy, experimenty s návrhom úrovní.

5. Sandoxová jazdná hra pre Vercel

Arkádový pocit z jazdy (krivka zrýchlenia, fyzika driftu, oneskorenie kamery, základný terén) s nízkopolygonovým autom, šablónou trate a nasadením optimalizovaným pre velké sieťové prvky terénu. Prednastavené hlavičky HTTP umožnujú rýchlejšie spustenie kontextu WebGL v Safari, historicky najpomalšom prehliadaci pre Three.js.

Najlepšie pre: arkádové preteky, off-road jazda, ukážky pocitu z auta pre portfólio.

Prehliadnite si všetky zručnosti pre 3D hry na Vibe Skills →

Postup od piatka do nedele

Toto je presný harmonogram. Upravte cas zaciatku, ale zachovajte poradí. Klúcový mílnik je piatkové vecerne nasadenie na Vercel. Všetko potom je iterácia.

Piatok 18:00 - 20:00: Vyberte zručnost, odošlite do GitHubu, pripojte Vercel

Krok 1: Vyberte si zručnost pre 3D hru na Vibe Skills. Prehliadnite si kategóriu 3D hry, vyberte tú, ktorá zodpovedá vášmu žánru, a nainštalujte štartér do novej zložky. Otvorte ju v Cursor. Do 19:00 by ste mali vidiet scénu Three.js s pohybujúcim sa hrácom.

Krok 2: Vytvorte repozitár GitHub a odošlite ho. git init, git remote add, git push. Použite „slug“ vašej hry ako názov repozitára (crystal-runner, lunar-fishing, cokolvek). Názov repozitára sa casto stáva vašim URL.

Krok 3: Pripojte repozitár k Vercel. Prihláste sa na Vercel pomocou GitHubu (zadarmo), kliknite na „Pridat nový projekt“, vyberte repozitár. Vercel automaticky rozpozná Vite a nakonfiguruje zostavu. Kliknite na Nasadit. Do 60 sekúnd získate URL crystal-runner.vercel.app. Otvorte ho na svojom telefóne. Zdieľajte s jedným priatelom. Spúsťacie lišta je teraz na zvyšok víkendu nulová.

Piatok 20:00 - 22:00: Napíšte návrhový dokument

Krok 4: Zodpovedzte pät otázok v bežnom anglickom jazyku. Otvorte stránku Notion alebo súbor markdown v repozitári a odpovedzte:

Co hráč robí každých 5 sekúnd? (základná slučka)
Aká je podmienka výhry a podmienka prehry?
Ako dlho trvá jeden beh alebo jedna úroven?
Aký je vizuálny háčik? (paleta, osvetlenie, referenčný štýl)
Aká je jedna funkcia, ktorá to robí zapamätatelným za 30 sekúnd?

Krok 5: Ulozte návrhový dokument. Odošlite ho do repozitára. Vercel sa znovu nasadí. Disciplína pushovania každej významnej zmeny udržuje živý URL poctivý.

Sobota 9:00 - 13:00: Zostavte základnú mechaniku

Krok 6: Nahraďte zástupný mechanizmus svojou jedinou funkciou. Toto je jediná funkcia, na ktorej záleží. Použite chat Cursor na opisanie: „ked hráč zdvihne kryštál, zmrazí nepriatelov v okolí na 2 sekundy a prehrá sa zvonenie“. Iterujte lokálne pomocou pnpm dev. Ked to bude pôsobit správne, odošlite.

Krok 7: Spojte stav výhry/prehry. 60-sekundová zostava so skutočným koncom pôsobí ako hra. 60-minútová zostava bez konca pôsobí ako technická ukážka. Vždy najprv spojte obrazovku výhry, potom všetko ostatné.

Sobota 13:00 - 20:00: Pridajte jednu úroven

Krok 8: Zostavte jednu vyladenú úroven. Nie tri nedokoncené. Použite zástupné kocky pre geometriu. Použite štandardnú postavu zručnosti. Ladenie pocitu - výška skoku, oneskorenie kamery, intenzita častíc.

Krok 9: Pridajte prekryvný návod. Dvojvetná výzva „WASD na pohyb, kliknutím strielat“ pri prvom spustení zachráni vaše spustenie pred zmätenými hrácami, ktorí to vzdajú za 8 sekúnd. Cursor dokáže vygenerovat prekryv React (alebo bežný DOM) za 30 sekúnd.

Krok 10: Pushujte každú hodinu. Každý push dostane URL náhľadu Vercel. Pošlite každý z nich priatelovi. Spätná väzba je tajnou zbranou tohto stacku.

Nedeľa 10:00 - 16:00: Doladenie

Krok 11: Pridajte tri zvuky. Slučka krokov, ambientná atmosféra, záverečný akord. Dokonca aj tri zvuky dramaticky pozdvihnú víkendový prototyp. Bezplatné zdroje: freesound.org, opengameart.org.

Krok 12: Pridajte šťavu. Častice pri zásahu, otrasenie obrazovky pri náraze, vyskakovacie čísla pri skóre. Šťava je to, co robí 48-hodinovú zostavu v GIFe ako šesťmesačnú. Požiadajte Cursor o pridanie „otrasenie obrazovky s intenzitou 0,3 po dobu 150 ms, ked hráč utrpí poškodenie“ - napíše háčik na otrasenie kamery za päť sekúnd.

Krok 13: Spustite kontrolu Lighthouse. Otvorte URL Vercel na telefóne a spustite Chrome DevTools Lighthouse. Balíčky Three.js majú zvyčajne velkost od 400 KB do 1,5 MB. Ak máte viac ako 3 MB, požiadajte Cursor o povolenie delenia kódu na velké moduly. Gzip a brotli Vercel sa postarajú o zvyšok.

Krok 14: Kontrola chýb. Prehrajte svoj živý URL pätkrát za sebou. Opravte všetko, co sa pokazí dvakrát. Ignorujte všetko, co sa pokazí raz.

Nedeľa 16:00 - 20:00: Spustenie

Krok 15: (Volitelné) Nastavte vlastnú doménu. Ak ste si vopred kúpili nazov-hry.com, pridajte ju v nastaveniach projektu Vercel. SSL je automatický. Inak je URL *.vercel.app v poriadku - má HTTPS, je zdielatelné a načíta sa všade.

Krok 16: Nahrajte 15-sekundový GIF najlepšieho momentu. Použite živý URL, nie localhost. GIF je to, na co sa kliká na Twitteri, Bluesky a Reddite.

Krok 17: (Volitelné, ale velmi výhodné) Vytvorte stránku itch.io. Názov, jednovetný slogan, tri snímky obrazovky, GIF, ovládanie, kredity a vložené iframe vašej adresy *.vercel.app (itch.io podporuje vkladanie iframe pre HTML5 hry). Teraz máte dva URL - jeden na bežné zdielanie a jeden pre herné publikum.

Krok 18: Zverejnite odkaz. Twitter, Bluesky, váš Discord komunity vývojárov, r/IndieDev, r/threejs, r/WebGames. Vždy zacnite GIFom. Vždy zahrnte URL. Ak ste použili zručnost Vibe Skills, spomeňte to v príspevku o vývojovej denníku - ostatní vývojári, ktorí sledujú, budú chciet rovnaký štartér.

Ako sa vyhnút trom najbežnejším zlyhaniam nasadenia Vercel

Tri veci takmer vždy pokazia víkend so solo Three.js + Vercel. Všetky tri sú 5-minútové opravy, ak ich zachytíte v piatok vecer, a 5-hodinové králičie nory, ak ich objavíte v nedeľu o 19:00.

Nesprávny adresár výstupu zostavy. Vite predvolene používa dist/. Vercel automaticky rozpozná Vite a používa dist/. Ak ste prispôsobili výstup, nastavte outputDirectory v vercel.json alebo v nastaveniach projektu, inak bude vaše nasadenie 404.
Cesty k aktívam, ktoré fungujú lokálne, ale v produkcii hlásia 404. Používajte relatívne cesty alebo pomocnú funkciu Vite import.meta.env.BASE_URL pre akékolvek GLB, textúry alebo zvukové súbory nacítané za behu. Pevne zadané cesty /assets/... obvykle fungujú, ale skopírované absolútne cesty systému Windows určite nie.
Hlavičky CSP, ktoré blokujú zámok kurzora alebo zvukový kontext. Hry z prvej osoby potrebujú zámok kurzora. Zvuk vyžaduje aktiváciu gestom používatelov. Akákolvek zručnost z kategórie 3D hry dodáva správny blok headers v súbore vercel.json na spracovanie týchto vecí. Ak ste si vytvorili vlastný od nuly, skopírujte konfiguráciu z repozitára zručnosti.

Nasadenie funguje v piatok, takže ked sa v nedeľu pokazí, je to vždy kvôli nedávnej zmene. git bisect je váš priatel. Ešte lepšie: pushujte každých 30 minút, aby bol chybný commit malý.

Casto kladené otázky

Vydrží bezplatná úroven Vercel naozaj, ak moja hra získa návštevnost?

Áno, na víkendové spustenie a prvé týždne. Bezplatná úroven vám poskytuje 100 GB prenosu mesačne, co je približne 20 000 prehratí zostavy Three.js s velkostou 5 MB. Ak narazíte na tento limit, plán Pro stojí 20 $/mesiac a zvýši vám ho na 1 TB. Na víkendové nasadenie je zadarmo viac než dostatocné. Zručnosti na Vibe Skills dodávajú konfigurácie zostáv, ktoré minimalizujú velkost zostavy, co dále rozširuje bezplatnú úroven.

Môžem na bezplatnej úrovni Vercel použiť vlastnú doménu?

Áno. Bezplatná úroven podporuje vlastné domény s automatickým HTTPS. Kúpte si doménu (Namecheap, Cloudflare Registrar, Porkbun), nasmerujte ju na Vercel a Vercel sa postará o certifikát SSL. Nastavenie trvá približne 10 minút. Ak nemáte doménu, URL nazov-hry.vercel.app je dostatocne krátky na zdielanie na akejkolvek platforme.

Je tento stack v poriadku na odovzdanie do sútaže hier?

Áno, a je to jeden z najlepších stackov pre odovzdania do sútaží hier. Väcšina sútaží (Ludum Dare, GMTK, js13k, GitHub Game Off) prijíma akýkolvek hratelný URL v prehliadaci. Odkaz *.vercel.app funguje pre sudcov presne ako URL itch.io. Mnoho víťazov súťaží publikuje na oboch - itch.io pre herné publikum, Vercel ako rýchly kanonický URL.

Potrebujem poznat Three.js pred zaciatkom?

Potrebujete dostatok JavaScriptu na citanie toho, co Cursor píše, a na ladenie hodnôt. Nemusíte písat Three.js od nuly. Zručnosti na Vibe Skills generujú nastavenie motora, kameru, ovládač a konfiguračný súbor zostavy. Cursor sa postará o kód hry z vašich opisov.

Co sa stane, ak moja zostava Vercel zlyhá v nedeľu o 19:00?

Najčastejšou príčinou je chyba TypeScript alebo chýbajúca premenná prostredia. Vercel zobrazí protokol zostavy s označeným chybným riadkom. Jedno kliknutie v konzole vráti späť poslednú fungujúcu zostavu a povýši ju do produkcie. Pretože každý push je ukážkové nasadenie, ste vždy najviac jedno nasadenie od fungujúcej zostavy. Preto je dôležité pushovat každých 30 minút v sobotu a nedelu.

Môžem predávat alebo upravovat kód zo zručnosti pre 3D hru na Vibe Skills?

Áno. Zručnosti na Vibe Skills dodávajú licenciu priatelkú k komerčnému použitiu, ktorá vám umožnuje zverejnit kód vo vašej vlastnej hre na Vercel, itch.io, Steam alebo kdekolvek inde. Tvorcovia si ponechajú duševné vlastníctvo zručnosti, vy si ponecháte duševné vlastníctvo hry postavenej na nej.

Co ak nechcem používat Cursor?

Funguje akýkolvek editor AI, ktorý dokáže upravovat súbory projektu. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - ktorýkolvek z nich dokáže iterovat na kostre Three.js zo zručnosti Vibe Skills. Samotná zručnost je nezávislá od editora.

Zverejnite to tento víkend

Dôvodom, prečo väcšina sólových vývojárov nikdy nezverejní 3D hru, nie je engine, žáner ani nárocnost. Je to piatkový vecer, ked „ešte trochu viac preskúmajú“ a nikdy nezačnú. Další víkend, ked budete mat volno, postupujte podla štvrofázového plánu: nainštalujte si zručnost pre 3D hru Vibe Skills, odošlite do GitHubu, pripojte Vercel, nasadte do piatka 20:00 a potom v sobotu a nedelu iterujte na živom URL.

Vaše portfólio desiatich víkendovo zverejnených hier na Vercel má väcšiu hodnotu ako váš hypotetický projekt snovým engine na šesť mesiacov. Zverejnená hra vždy vyhráva. Bezplatný URL Vercel je dôkazom.

Prehliadnite si zručnosti pre 3D hry na Vibe Skills →

Preskočte maratón základného kódu Three.js. Nainštalujte si zručnost pre 3D hru na Vibe Skills, odošlite do Vercel a do nedele vecer majte živý URL.