Jak nasadit 3D hru na Vercel tento víkend (s využitím dovedností umělé inteligence)

Vibe Skills

Prohlédněte si stovky připravených dovedností pro Claude, Cursor a další.

Prohlédnout dovednosti

Začít zdarma nyní

Spusťte 3D hru na Vercel do nedělního večera: 48hodinový návod k nasazení

Během pátku večer se můžete dostat z prázdného pátku večer na odkaz vaše-hra.vercel.app do nedělní večeře. Skládá se ze Three.js, Cursor, dovednosti AI z Vibe Skills a bezplatné úrovně Vercel. Celkové náklady na víkend: 0 $. Celková infrastruktura, kterou musíte hlídat: také nula.

Toto není „sestrojte prototyp na svém notebooku a nazvěte to hotovým“. Toto je veřejná URL, kterou může kdokoli na světě otevřít v prohlížeči, s HTTPS, edge cachováním a vlastním doménovým jménem, pokud chcete. Dovednost AI poskytuje kostru Three.js a funkční vercel.json. Cursor se stará o smyčku iterací. Vercel se stará o nasazení. Vy se staráte o design.

Tento průvodce je určen pro nezávislé vývojáře, kodéry pro atmosféru, účastníky hackathonů a kohokoli, koho unavují nedokončené karty localhost:5173. Vysvětlíme, proč tento stack funguje, anatomii 48hodinového nasazení, pět dovedností 3D her vytvořených pro pracovní postup a postup krok za krokem od pátku do neděle.

Vibe Skills

Prohlédněte si stovky připravených dovedností pro Claude, Cursor a další.

Prohlédnout dovednosti

Začít zdarma nyní

Proč je Vercel + Three.js + AI Skills Stack pro sólové vývojáře

Vercel je nejlenivější možný cíl pro nasazení hry Three.js. Odešlete do GitHubu, Vercel si toho všimne, sestaví projekt a do 60 sekund vám vrátí URL. Žádný server k provisioningu, žádný Docker soubor, žádná konfigurace NGINX, žádné nastavení SSL. Balíček Three.js je jen statický HTML, JS a WebGL obsah, což je přesně to, co je síť Vercel edge postavena tak, aby doručovala.

Bezplatná úroveň pohodlně pokryje víkendové spuštění:

• 100 GB pásma za měsíc. 5MB sestavení Three.js při 10 000 přehráních je 50 GB. Vyčerpáte víkend dříve, než vyčerpáte pásmo.
• Neomezené statické nasazení s HTTPS a poddomenou *.vercel.app.
• Podpora vlastních domén na bezplatné úrovni - přineste si vlastní název-hry.com, pokud ji máte, jinak je bezplatná URL vercel.app sdílitelná na všech sociálních platformách.
• Náhledy nasazení pro každý commit - každý push dostane svou vlastní URL, takže můžete sdílet sestavení s přítelem a pokračovat v iteraci, aniž byste ho rozbili.

Přidejte dovednost AI z Vibe Skills a boilerplate také zmizí. Nastavení scény Three.js, ovladač hráče, build pipeline a vercel.json připravený pro Vercel se generují jedním příkazem. Pak Cursor promění zbytek víkendu v konverzaci, kde popisujete hratelnost, kterou chcete, a ladíte výstup. Toto je plný stack: dovednost z tržiště pro základ, AI editor pro iteraci a Vercel pro nasazení. Sólové, zdarma a rychlé.

Vibe Skills

Prohlédněte si stovky připravených dovedností pro Claude, Cursor a další.

Prohlédnout dovednosti

Začít zdarma nyní

Anatomie 48 hodin: Páteční koncept k nedělnímu nasazení

Každý víkendové spuštění, které se skutečně dostane do provozu, sleduje stejné kroky. Trik spočívá v naplánování nasazení v pátek, nikoli v neděli odpoledne, takže posledních šest hodin jde na vyleštění, nikoli na boj s chybou sestavení.

Důvodem, proč to funguje, je páteční push do Vercel. Jakmile URL existuje, každý sobotní a nedělní commit se automaticky nasadí. Neexistuje žádná „panika z nedělního večerního nasazení“, protože nasazení již proběhlo v pátek a fungovalo na autopilota po celý víkend.

Jak vypadá „Vibe Coding“ 3D hry na Vercel

Vibe coding znamená popsat, co chcete, v prosté angličtině a nechat AI editor napsat kód, pak iterovat na výstupu. Pro hru Three.js na Vercel je smyčka neobvykle čistá: každá změna v Cursoru je vzdálena pnpm dev od lokální zpětné vazby, pak git push od živé náhledové URL a poté automaticky nasazena do produkce na main.

Víkend hry Vercel s vibe codingem vypadá takto:

1. Otevřete startovací složku dovednosti v Cursoru.
2. Popište funkci v chatu: „dvojitý skok, pokud je mezerník stisknut dvakrát do 200 ms“.
3. Cursor upraví soubor ovladače. Uložte. pnpm dev se znovu načte. Cítíte skok v prohlížeči.
4. Pokud to pocítíte správně, git push. Vercel sestaví náhledovou URL. Pošlete ji příteli.
5. Sloučte do main, jakmile je pocit uzamčen. Produkční URL se aktualizuje do 60 sekund.

AI dělá psaní. Vercel dělá nasazení. Vy děláte pocit a design.

5 AI dovedností pro 3D hry, které to umožňují na Vibe Skills

Tyto dovednosti jsou vytvořeny pro pracovní postup Vercel + Three.js + Cursor pro víkendové použití. Každá z nich dodává projekt Three.js založený na Vite, funkční vercel.json, pnpm build který vytváří statický balíček, který Vercel může doručovat z edge, a otestovanou cestu nasazení. Všechny jsou v kategorii 3D Games na Vibe Skills.

1. Three.js + Vercel Game Starter

Výchozí volba. Generuje scénu Three.js s ovladačem hráče, kamerou třetí osoby, osvětlovacím rigem, nebeskou koulí a rovinným povrchem s kolizemi. Dodává se s vercel.json, který nastavuje správné hlavičky cachování pro balíčky assetů Three.js. pnpm dev běží lokálně; jedním kliknutím v ovládacím panelu Vercel propojíte GitHub repo a získáte živou URL.

Nejlepší pro: jakýkoli žánr kromě čistého 2D. Použijte toto, pokud ještě nevíte, co stavíte.

2. First-Person Vercel Walker

Vylepšený ovladač z pohledu první osoby (WASD + zámek ukazatele myši + gravitace + sprint + skok) s háčky pro kroky, pohybem hlavy a vercel.json, který správně zpracovává hlavičky CSP pro zámek ukazatele. Toto zasekává mnoho sólových vývojářů v produkci. Dovednost to za vás řeší.

Nejlepší pro: simulátory chůze, hororové prototypy, narativní hry, muzejní expozice.

3. Browser Arena Shooter Kit

Aréna shora dolů (ovládání twin-stick, generátor vln, základní AI nepřátel, systém střel, HUD skóre) s buildem vyladěným pro Vercel, který gzipuje assety, rozděluje AI a líně načítá hudbu. Zahrnuty jsou multiplayerové háčky; víkend dodává hru pro jednoho hráče.

Nejlepší pro: arkádové střílečky, bullet hell, jamové příspěvky, které musí na mobilu rychle načítat.

4. Vercel Puzzle Platformer

Platformovka z pohledu třetí osoby (proměnný skok, čas coyote, detekce říms), checkpointy, tři zástupné úrovně, které můžete upravit v Blenderu nebo v kódu, a smyčka respawnu. vercel.json je nakonfigurován pro okamžité načítání úrovní cachovaných na edge, takže testování je na telefonu svižné.

Nejlepší pro: puzzle platformovky, parkourové prototypy, experimenty s návrhem úrovní.

5. Vercel Driving Sandbox

Arkádový pocit z jízdy (křivka zrychlení, driftovací fyzika, zpoždění kamery, základní terén) s nízko-polygonovým autem, šablonou tratě a nasazením vyladěným pro velké síťoviny terénu. Přednastavené HTTP hlavičky způsobují, že kontext WebGL se v Safari, historicky nejpomalejším prohlížeči pro Three.js, spouští rychleji.

Nejlepší pro: arkádové závodní hry, jízdu v terénu, dema pocitu z jízdy pro portfolio.

Prohlédněte si všechny dovednosti pro 3D hry na Vibe Skills →

Pátek až neděle krok za krokem

Toto je přesný rozpis. Upravte čas začátku, ale dodržujte pořadí. Klíčovým milníkem je páteční večerní nasazení do Vercel. Všechno potom je iterace.

Pátek 18:00 - 20:00: Vyberte dovednost, odešlete do GitHubu, připojte Vercel

Krok 1: Vyberte dovednost pro 3D hru na Vibe Skills. Prohlédněte si kategorii 3D Games, vyberte tu, která odpovídá vašemu žánru, a nainstalujte startovací balíček do nové složky. Otevřete ji v Cursoru. Do 19:00 byste měli vidět scénu Three.js s pohybujícím se hráčem.

Krok 2: Vytvořte GitHub repo a odešlete. git init, git remote add, git push. Použijte zkratku vaší hry jako název repa (crystal-runner, lunar-fishing, cokoli). Název repa se často stane vaším URL.

Krok 3: Připojte repo k Vercel. Přihlaste se do Vercel pomocí GitHubu (zdarma), klikněte na „Add New Project“, vyberte repo. Vercel automaticky detekuje Vite a nakonfiguruje sestavení. Klikněte na Deploy. Do 60 sekund získáte URL crystal-runner.vercel.app. Otevřete ji na svém telefonu. Sdílejte s jedním přítelem. Lišta nasazení je nyní pro zbytek víkendu nulová.

Pátek 20:00 - 22:00: Napište návrhový dokument

Krok 4: Odpovězte na pět otázek v prosté angličtině. Otevřete stránku Notion nebo markdown soubor v repu a odpovězte:

• Co hráč dělá každých 5 sekund? (základní smyčka)
• Jaká je podmínka výhry a podmínka prohry?
• Jak dlouho trvá jeden běh nebo jedna úroveň?
• Jaký je vizuální háček? (paleta, osvětlení, referenční styl)
• Jaká je jedna vlastnost, díky které je to zapamatovatelné za 30 sekund?

Krok 5: Odešlete návrhový dokument. Odešlete ho do repa. Vercel se znovu nasadí. Disciplína odesílání každé smysluplné změny udržuje živou URL poctivou.

Sobota 9:00 - 13:00: Sestavte základní mechaniku

Krok 6: Nahraďte zástupnou mechaniku svou jedinou vlastností. Toto je jediná vlastnost, na které záleží. Použijte chat v Cursoru k jejímu popsání („když hráč sebere krystal, zmrazí blízké nepřátele na 2 sekundy a přehraje cinknutí“). Iterujte lokálně pomocí pnpm dev. Když to pocítíte správně, odešlete.

Krok 7: Propojte stav výhry/prohry. 60sekundové sestavení se skutečným koncem působí jako hra. 60minutové sestavení bez konce působí jako technická demo. Vždy nejprve propojte obrazovku výhry, pak vše ostatní.

Sobota 13:00 - 20:00: Přidejte jednu úroveň

Krok 8: Sestavte jednu vylepšenou úroveň. Ne tři polovičaté. Použijte zástupné krychle pro geometrii. Použijte standardní postavu z dovednosti. Vylaďte pocit - výšku skoku, zpoždění kamery, intenzitu částic.

Krok 9: Přidejte překryvnou vrstvu s návodem. Dvě věty „WASD pro pohyb, klikněte pro střelbu“ vyskakovací okno při prvním spuštění zachrání vaše spuštění před zmatenými hráči, kteří to vzdají za 8 sekund. Cursor může vygenerovat překryvnou vrstvu Reactu (nebo vanilla DOM) za 30 sekund.

Krok 10: Odesílejte každou hodinu. Každý push získá náhledovou URL Vercel. Pošlete každý z nich příteli. Zpětnovazební smyčka je tajnou zbraní tohoto stacku.

Neděle 10:00 - 16:00: Vylepšení

Krok 11: Přidejte tři zvuky. Smyčka kroků, ambientní podklad, vítězný zvuk. I tři zvuky výrazně pozvednou víkendový prototyp. Bezplatné zdroje: freesound.org, opengameart.org.

Krok 12: Přidejte šťávu. Částice při zásahu, otřes obrazovky při dopadu, číselné vyskakující okna při skóre. Šťáva je to, co dělá 48hodinové sestavení v GIFu vypadat jako 6měsíční. Zeptejte se Cursoru, zda má přidat „otřes obrazovky o intenzitě 0,3 po dobu 150 ms, když hráč utrpí zranění“ - napíše háček pro otřes kamery za pět sekund.

Krok 13: Spusťte Lighthouse. Otevřete URL Vercel na telefonu a spusťte Chrome DevTools Lighthouse. Balíčky Three.js jsou obvykle kolem 400 KB až 1,5 MB. Pokud máte přes 3 MB, požádejte Cursor o povolení rozdělení kódu na náročné moduly. Vercelovy gzip a brotli se postarají o zbytek.

Krok 14: Kontrola chyb. Pětkrát za sebou si zahrajte svou živou URL. Opravte cokoli, co se rozbije dvakrát. Ignorujte cokoli, co se rozbije jednou.

Neděle 16:00 - 20:00: Spuštění

Krok 15: (Volitelné) Nastavte vlastní doménu. Pokud jste si koupili název-hry.com předem, přidejte ji v nastavení projektu Vercel. SSL je automatické. Jinak je URL *.vercel.app v pořádku - má HTTPS, je sdílitelná a načítá se všude.

Krok 16: Nahrajte 15sekundový GIF nejlepšího momentu. Použijte živou URL, ne localhost. GIF je to, na co se kliká na Twitteru, Bluesky a Redditu.

Krok 17: Vytvořte stránku itch.io (volitelné, ale s vysokou pákou). Název, jednovětý slogan, tři snímky obrazovky, GIF, ovládací prvky, kredity a vložený *.vercel.app iframe (itch.io podporuje vkládání iframe pro HTML5 hry). Nyní máte dvě URL - jednu pro neformální sdílení a jednu pro herní publikum.

Krok 18: Zveřejněte odkaz. Twitter, Bluesky, váš vývojářský komunitní Discord, r/IndieDev, r/threejs, r/WebGames. Vždy začněte GIFem. Vždy zahrňte URL. Pokud jste použili dovednost Vibe Skills, zmiňte to v příspěvku devlogu - ostatní vývojáři, kteří čtou, budou chtít stejný startovací balíček.

Jak se vyhnout třem nejčastějším selháním nasazení Vercel

Tři věci rozbijí téměř každý sólový víkend s Three.js + Vercel. Všechny tři jsou 5minutové opravy, pokud je zachytíte v pátek večer, a 5hodinové králičí nory, pokud je objevíte v neděli v 19:00.

• Nesprávný výstupní adresář sestavení. Vite výchozí dist/. Vercel automaticky detekuje Vite a používá dist/. Pokud jste upravili výstup, nastavte outputDirectory v vercel.json nebo v nastavení projektu, jinak bude vaše nasazení 404.
• Cesty k assetům, které fungují lokálně, ale v produkci 404. Používejte relativní cesty nebo pomocníka Vite import.meta.env.BASE_URL pro jakékoli dynamicky načítané soubory GLB, textury nebo zvuku. Pevně zakódované cesty /assets/... obvykle fungují, ale zkopírované absolutní cesty Windows rozhodně nebudou.
• Hlavičky CSP, které blokují zámek ukazatele nebo zvukový kontext. Hry z pohledu první osoby vyžadují zámek ukazatele. Zvuk vyžaduje aktivaci uživatelským gestem. Jakákoli dovednost z kategorie 3D Games dodává správný blok headers v vercel.json pro řešení této záležitosti. Pokud jste si napsali vlastní od nuly, zkopírujte konfiguraci z repa dovednosti.

Nasazení funguje v pátek, takže když se tyto věci rozbijí v neděli, je to vždy kvůli nedávné změně. git bisect je váš přítel. Ještě lépe: pushujte každých 30 minut, aby byl rozbitý commit malý.

Často kladené otázky

Opravdu bezplatná úroveň Vercel vydrží, pokud moje hra získá provoz?

Ano, pro víkendové spuštění a první týdny. Bezplatná úroveň vám poskytuje 100 GB pásma za měsíc, což je zhruba 20 000 přehrání 5MB sestavení Three.js. Pokud narazíte na tento limit, profesionální plán stojí 20 $ měsíčně a zvýší vás na 1 TB. Pro víkendové spuštění je zdarma více než dostatečné. Dovednosti na Vibe Skills dodávají konfigurační sestavení, které minimalizují velikost balíčku, což dále rozšiřuje bezplatnou úroveň.

Mohu na bezplatné úrovni Vercel použít vlastní doménu?

Ano. Bezplatná úroveň podporuje vlastní domény s automatickým HTTPS. Kupte si doménu (Namecheap, Cloudflare Registrar, Porkbun), nasměrujte ji na Vercel a Vercel se postará o certifikát SSL. Nastavení trvá asi 10 minut. Pokud nemáte doménu, URL název-hry.vercel.app je dostatečně krátká, aby se dala sdílet na jakékoli platformě.

Je tento stack v pořádku pro přihlášku do herní soutěže?

Ano, a je to jeden z nejlepších stacků pro přihlášky do herních soutěží. Většina herních soutěží (Ludum Dare, GMTK, js13k, GitHub Game Off) přijímá jakoukoli webově hratelnou URL. Odkaz *.vercel.app funguje pro porotce stejně jako URL itch.io. Mnoho vítězů soutěží se prodává na obou místech - itch.io pro herní publikum, Vercel jako rychlá kanonická URL.

Potřebuji znát Three.js před začátkem?

Potřebujete dostatek JavaScriptu k přečtení toho, co Cursor píše, a k úpravě hodnot. Nemusíte psát Three.js od začátku. Dovednosti na Vibe Skills generují nastavení engine, kameru, ovladač a konfigurační sestavení. Cursor se postará o kód hratelnosti z vašich popisů.

Co se stane, když se mé sestavení Vercel selže v neděli v 19:00?

Nejčastější příčinou je chyba TypeScriptu nebo chybějící proměnná prostředí. Vercel zobrazí protokol sestavení s označeným selhaným řádkem. Jedním kliknutím v ovládacím panelu se vrátíte k poslednímu funkčnímu nasazení a povýšíte ho do produkce. Protože každý push je náhledovým nasazením, jste vždy nejvýše jeden commit od funkčního sestavení. Proto je důležité pushovat každých 30 minut v sobotu a neděli.

Mohu prodávat nebo upravovat kód z dovednosti 3D hry Vibe Skills?

Ano. Dovednosti na Vibe Skills dodávají s komerčně přívětivou licencí, která vám umožňuje vydat kód ve vaší vlastní hře na Vercel, itch.io, Steam nebo kdekoli jinde. Tvůrci si ponechávají duševní vlastnictví dovednosti, vy si ponecháváte duševní vlastnictví hry postavené nad ní.

Co když nechci používat Cursor?

Funguje jakýkoli AI editor, který dokáže upravovat soubory projektu. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - jakýkoli z nich může iterovat na kostře Three.js z dovednosti Vibe Skills. Samotná dovednost je nezávislá na editoru.

Spusťte to tento víkend

Důvodem, proč většina sólových vývojářů nikdy nespustí 3D hru, není engine, žánr nebo strop dovedností. Je to páteční večer, kdy „ještě trochu prozkoumají“ a nikdy nezačnou. Příští volný víkend, dodržujte čtyřfázový plán: nainstalujte dovednost 3D hry Vibe Skills, odešlete do GitHubu, připojte Vercel, nasaďte do pátku 20:00, pak strávte sobotu a neděli iterováním na živé URL.

Vaše portfolio deseti víkendově dodaných her na Vercel je cennější než váš hypotetický šestiměsíční projekt snů engine. Dodaná hra vždy vyhrává. Bezplatná URL Vercel je důkazem.

Prohlédněte si dovednosti pro 3D hry na Vibe Skills →

Přeskočte maraton boilerplate Three.js. Nainstalujte dovednost 3D hry na Vibe Skills, odešlete do Vercel a mějte živou URL do nedělního večera.