Kako objaviti 3D igru na Vercelu ovog vikenda (s AI vještinama)

Vibe Skills

Pregledajte stotine gotovih vještina za Claude, Cursor i više.

Istraži vještine

Započni besplatno odmah

Brod 3D igre na Vercelu do nedjelje navečer: Vodič za 48-satno postavljanje

Možete stići od praznog petka navečer do linka tvoja-igra.vercel.app do nedjeljnog ručka. Stog je Three.js, Cursor, AI vještina s Vibe Skills i besplatni Vercel paket. Ukupni trošak za vikend: 0 USD. Ukupna infrastruktura kojom morate upravljati: također nula.

Ovo nije "izradi prototip na svom laptopu i nazovi ga dovršenim". Ovo je javni URL koji svatko na svijetu može otvoriti u pregledniku, s HTTPS-om, edge predmemorijom i prilagođenom domenom ako je želite. AI vještina postavlja Three.js skelu i ispravan vercel.json. Cursor upravlja petljom iteracija. Vercel upravlja postavljanjem. Vi upravljate dizajnom.

Ovaj vodič je namijenjen nezavisnim programerima, "vibe" kodovima, sudionicima hackathona i svima koji su umorni od nedovršenih kartica localhost:5173. Pokrivamo zašto ovaj stog funkcionira, anatomiju postavljanja za 48 sati, pet AI vještina za 3D igre izgrađenih za radni proces i korak po korak od petka do nedjelje.

Vibe Skills

Pregledajte stotine gotovih vještina za Claude, Cursor i više.

Istraži vještine

Započni besplatno odmah

Zašto Vercel + Three.js + AI vještine je stog za samostalnog programera

Vercel je najljeniji mogući cilj postavljanja za Three.js igru. Pošaljite na GitHub, Vercel primijeti, izradi projekt i vrati vam URL u roku od 60 sekundi. Nema servera za osiguravanje, nema Docker datoteke, nema NGINX konfiguracije, nema SSL postavljanja. Three.js paket je samo statični HTML, JS i WebGL resursi, što je upravo ono za što je Vercelova edge mreža izgrađena.

Besplatni paket udobno pokriva lansiranje vikendom:

• 100 GB propusnosti mjesečno. Three.js paket od 5 MB pri 10 000 igranja je 50 GB. Ponestat će vam vikenda prije nego vam ponestane propusnosti.
• Neograničena statična postavljanja s HTTPS-om i poddomenom *.vercel.app.
• Podrška za prilagođene domene u besplatnom paketu - donesite vlastitu ime-igre.com ako je imate, inače je besplatni URL vercel.app moguće dijeliti na svakoj društvenoj platformi.
• Pregled postavljanja za svaki commit - svaka push dobiva vlastiti URL, tako da možete podijeliti izradu s prijateljem i nastaviti s iteracijom bez kvarenja.

Dodajte AI vještinu s Vibe Skills i bojler ploča također nestaje. Three.js postavljanje scene, kontroler igrača, sklop za izradu i Vercel-ready vercel.json generiraju se jednom naredbom. Zatim Cursor pretvara ostatak vikenda u chat gdje opisujete igrivost koju želite i prilagođavate izlaz. To je puni stog: vještina s tržišta za temelj, AI uređivač za iteraciju i Vercel za postavljanje. Samostalno, besplatno i brzo.

Vibe Skills

Pregledajte stotine gotovih vještina za Claude, Cursor i više.

Istraži vještine

Započni besplatno odmah

Anatomija 48 sati: Od petka koncept do nedjelje postavljanje

Svaki vikend brod koji zapravo krene uživo slijedi iste korake. Tri k je planirati postavljanje u petak, a ne u nedjelju popodne, tako da posljednjih šest sati ode na poliranje umjesto na borbu s pogreškom izrade.

Razlog zašto ovo funkcionira je petak push na Vercel. Jednom kada URL postoji, svaki commit subotom i nedjeljom se automatski postavlja. Nema "panike pri postavljanju u nedjelju navečer" jer je postavljanje već obavljeno u petak i radilo je na autopilotu cijeli vikend.

Kako izgleda "Vibe kodiranje" 3D igre na Vercelu

Vibe kodiranje znači opisivanje onoga što želite na običnom engleskom jeziku i dopuštanje AI uređivaču da napiše kod, a zatim iteriranje na izlazu. Za Three.js igru na Vercelu, petlja je neobično čista: svaka promjena u Cursoru je pnpm dev udaljena od lokalne povratne informacije, zatim git push udaljena od preglednog URL-a uživo, a zatim automatski postavljena u produkciju na main.

Vikend vibe kodiranja Vercel igre izgleda ovako:

1. Otvorite početnu mapu vještine u Cursoru.
2. Opisati značajku u chatu: "dvostruki skok ako se razmaknica pritisne dvaput unutar 200 ms".
3. Cursor uređuje datoteku kontrolera. Spremite. pnpm dev se ponovno učitava. Osjetite skok u pregledniku.
4. Ako se čini ispravno, git push. Vercel izrađuje pregledni URL. Pošaljite ga prijatelju.
5. Spojite u main kada je osjećaj zaključan. URL produkcije ažurira se unutar 60 sekundi.

AI radi tipkanje. Vercel radi postavljanje. Vi radite osjećaj i dizajn.

5 AI vještina za 3D igre koje to omogućuju na Vibe Skills

Ove vještine su izgrađene za Vercel + Three.js + Cursor radni proces za vikend. Svaka isporučuje Vite-temeljen Three.js projekt, ispravan vercel.json, pnpm build koji proizvodi statički paket koji Vercel može poslužiti s ruba, i testirani put postavljanja. Svi su u kategoriji 3D Games na Vibe Skills.

1. Three.js + Vercel Game Starter

Zadani odabir. Generira Three.js scenu s kontrolerom igrača, kamerom iz trećeg lica, rasvjetnom opremom, nebeskom kutijom i ravninom tla s sudarima. Isporučuje se s vercel.json koji postavlja ispravne HTTP zaglavlja za predmemoriju za Three.js pakete resursa. pnpm dev radi lokalno; jedan klik u Vercel nadzornu ploču povezuje GitHub repozitorij i imate aktivni URL.

Najbolje za: bilo koji žanr osim čistog 2D-a. Koristite ovo ako još ne znate što gradite.

2. First-Person Vercel Walker

Uglancani kontroler iz prvog lica (WASD + zaključavanje miša + gravitacija + trčanje + skok) s kukama za korake, glavom-pokretom i vercel.json koji ispravno obrađuje CSP zaglavlja za zaključavanje pokazivača. Ovo zbunjuje mnoge samostalne programere u produkciji. Vještina ga rješava za vas.

Najbolje za: simulatore hodanja, horor prototipove, narativne igre, muzejske izložbe.

3. Browser Arena Shooter Kit

Top-down arena (twin-stick kontroler, spawni valova, osnovna AI neprijatelja, sustav projektila, HUD za rezultat) s Vercel-podešenim izlazom koji komprimira resurse, dijeli AI kod i učitava glazbu na zahtjev. Uključeni su multiplayer hookovi; vikend isporučuje single-player.

Najbolje za: arkadne pucačine, bullet hell, jam unose koji moraju brzo učitavati na mobilnom uređaju.

4. Vercel Puzzle Platformer

Platformer iz trećeg lica (promjenjivi skok, coyote time, detekcija ruba), kontrolne točke, tri privremene razine koje možete uređivati u Blenderu ili u kodu, i petlja za ponovno pojavljivanje. vercel.json je konfiguriran za trenutno ponovno učitavanje razina u rubnoj predmemoriji, tako da igranje osjećaja brzim na telefonu.

Najbolje za: puzzle platformere, parkour prototipove, eksperimente dizajna razina.

5. Vercel Driving Sandbox

Arkada osjećaj vožnje (krivulja ubrzanja, drift fizika, kašnjenje kamere, osnovni teren) s low-poly automobilom, predloškom staze i postavljanjem podešenim za velike mase terena. Predpostavljeni HTTP zaglavlja čine WebGL kontekst bržim pokretanjem na Safariju, povijesno najsporijem pregledniku za Three.js.

Najbolje za: arkadne utrke, off-road vožnju, demo osjećaja automobila za portfelj.

Pregledaj sve 3D vještine za igre na Vibe Skills →

Petak do nedjelja korak po korak

Ovo je točan raspored. Prilagodite vrijeme početka, ali zadržite redoslijed. Ključna prekretnica je petak navečer Vercel postavljanje. Sve nakon toga je iteracija.

Petak 18:00 - 20:00: Odaberi vještinu, pošalji na GitHub, poveži Vercel

Korak 1: Odaberi 3D vještinu za igre na Vibe Skills. Pregledaj kategoriju 3D Games, odaberi onu koja odgovara tvom žanru i instaliraj početni paket u novu mapu. Otvori ga u Cursoru. Trebao bi vidjeti Three.js scenu s pokretnim igračem do 19:00.

Korak 2: Stvori GitHub repozitorij i pošalji. git init, git remote add, git push. Koristi slug svoje igre kao ime repozitorija (crystal-runner, lunar-fishing, što god). Ime repozitorija često postaje tvoj URL.

Korak 3: Poveži repozitorij s Vercelom. Prijavi se na Vercel s GitHubom (besplatno), klikni "Add New Project", odaberi repozitorij. Vercel automatski detektira Vite i konfigurira izradu. Klikni Deploy. Unutar 60 sekundi imat ćeš URL crystal-runner.vercel.app. Otvori ga na svom telefonu. Podijeli ga s jednim prijateljem. Traka postavljanja je sada nula za ostatak vikenda.

Petak 20:00 - 22:00: Napiši dizajn dokument

Korak 4: Odgovori na pet pitanja na običnom engleskom. Otvori Notion stranicu ili markdown datoteku unutar repozitorija i odgovori:

• Što igrač radi svakih 5 sekundi? (osnovna petlja)
• Koji je uvjet pobjede i uvjet poraza?
• Koliko traje jedan krug ili jedna razina?
• Koji je vizualni "hook"? (paleta, rasvjeta, referenca stila)
• Koja je to jedna značajka koja ovo čini nezaboravnim u 30 sekundi?

Korak 5: Commitaj dizajn dokument. Pošalji ga u repozitorij. Vercel će ponovno postaviti. Disciplina slanja svake značajne promjene održava URL uživo poštenim.

Subota 9:00 - 13:00: Izradi osnovnu mehaniku

Korak 6: Zamijeni privremenu mehaniku svojom jednom značajkom. Ovo je jedina značajka koja je važna. Koristi Cursor chat da je opišeš ("kad igrač pokupi kristal, zamrzni obližnje neprijatelje na 2 sekunde i odsviraj zvončić"). Iteriraj lokalno s pnpm dev. Kad se čini ispravno, pošalji.

Korak 7: Spoji stanje pobjede/poraza. Izrada od 60 sekundi s pravim krajem osjeća se kao igra. Izrada od 60 minuta bez kraja osjeća se kao tehnički demo. Uvijek prvo postavi zaslon pobjede, a zatim sve ostalo.

Subota 13:00 - 20:00: Dodaj jednu razinu

Korak 8: Izgradi jednu uglancanu razinu. Ne tri polupečene. Koristi privremene kocke za geometriju. Koristi standardni lik vještine. Podesi osjećaj - visinu skoka, kašnjenje kamere, intenzitet čestica.

Korak 9: Dodaj overlay s uputama. Dvoslojna "WASD za kretanje, klik za pucanje" skočna poruka pri prvom pokretanju spašava tvoje lansiranje od zbunjenih igrača koji odustaju za 8 sekundi. Cursor može generirati overlay u Reactu (ili vanilla DOM-u) za 30 sekundi.

Korak 10: Šalji svaki sat. Svaki push dobiva Vercel preview URL. Pošalji svaki prijatelju. Povratna petlja je tajno oružje ovog stoga.

Nedjelja 10:00 - 16:00: Poliranje

Korak 11: Dodaj tri zvuka. Petlja koraka, ambijentalni pad, zvonjava za pobjedu. Čak i tri zvuka značajno podižu prototip vikendom. Besplatni izvori: freesound.org, opengameart.org.

Korak 12: Dodaj "juice". Čestice pri udarcu, potres zaslona pri udaru, brojevi iskaču pri rezultatu. "Juice" je ono što čini da izrada od 48 sati izgleda kao izrada od 6 mjeseci na GIF-u. Pitaj Cursor da doda "potres zaslona intenziteta 0.3 na 150 ms kada igrač primi štetu" - on će napisati hook za potres zaslona za pet sekundi.

Korak 13: Pokreni Lighthouse prolaz. Otvori Vercel URL na telefonu i pokreni Chrome DevTools Lighthouse. Three.js paketi obično su oko 400 KB do 1,5 MB. Ako prijeđeš 3 MB, pitaj Cursor da omogući dijeljenje koda na teškim modulima. Vercelova gzip i brotli obrada ostat će.

Korak 14: Prolazak kroz greške. Igraj svoj live URL pet puta zaredom. Popravi sve što se pokvari dvaput. Zanemari sve što se pokvari jednom.

Nedjelja 16:00 - 20:00: Lansiranje

Korak 15: (Opcionalno) Postavi prilagođenu domenu. Ako si unaprijed kupio ime-igre.com, dodaj ga u postavkama projekta Vercela. SSL je automatski. Inače, URL *.vercel.app je u redu - ima HTTPS, može se dijeliti i učitava se svugdje.

Korak 16: Snimi 15-sekundni GIF najboljeg trenutka. Koristi live URL, ne localhost. GIF je ono što se klikne na Twitteru, Blueskyu i Redditu.

Korak 17: Stvori itch.io stranicu (opcionalno, ali visoko utjecajno). Naslov, kratki slogan, tri snimke zaslona, GIF, kontrole, zasluge i ugrađeni iframe tvojeg *.vercel.app (itch.io podržava iframe ugrađivanja za HTML5 igre). Sada imaš dva URL-a - jedan za ležerno dijeljenje i jedan za publiku igrača.

Korak 18: Objavite link. Twitter, Bluesky, tvoj Discord zajednice programera, r/IndieDev, r/threejs, r/WebGames. Uvijek počni s GIF-om. Uvijek uključi URL. Ako si koristio Vibe Skills vještinu, spomeni to u postu s dnevnikom razvoja - drugi programeri koji čitaju će željeti isti početni paket.

Kako izbjeći tri najčešća Vercel postavljanja kvarova

Tri stvari kvare gotovo svaki samostalni Three.js + Vercel vikend. Sve tri su popravci od 5 minuta ako ih uočiš u petak navečer, i 5-satne zečje rupe ako ih otkriješ u nedjelju u 19:00.

• Pogrešna izlazna mapa za izradu. Vite zadano koristi dist/. Vercel automatski detektira Vite i koristi dist/. Ako si prilagodio izlaz, postavi outputDirectory u vercel.json ili postavkama projekta ili će tvoje postavljanje biti 404.
• Putovi resursa koji rade lokalno, ali vraćaju 404 u produkciji. Koristi relativne putove ili pomoćnik Vite import.meta.env.BASE_URL za bilo koju GLB, teksturu ili audio datoteku učitanu u vrijeme izvođenja. Putovi kodirani kao /assets/... obično rade, ali kopirani apsolutni Windows putovi definitivno neće.
• CSP zaglavlja koja blokiraju zaključavanje pokazivača ili audio kontekst. First-person igre trebaju zaključavanje pokazivača. Audio zahtijeva aktivaciju korisničkog gesta. Svaka vještina iz kategorije 3D Games isporučuje se s ispravnim blokom headers u vercel.json za rukovanje time. Ako si sam napisao od nule, kopiraj konfiguraciju iz repozitorija vještine.

Postavljanje radi u petak, tako da kada se ove stvari pokvare u nedjelju, uvijek je to zbog nedavne promjene. git bisect ti je prijatelj. Još bolje: nastavi slati svako 30 minuta tako da je pokvareni commit mali.

Često postavljana pitanja

Hoće li Vercelov besplatni paket stvarno izdržati ako moja igra dobije promet?

Da, za lansiranje vikendom i prvih nekoliko tjedana. Besplatni paket daje ti 100 GB propusnosti mjesečno, što je otprilike 20 000 igranja paketa Three.js od 5 MB. Ako dosegneš taj strop, Pro plan je 20 USD/mjesečno i povećava te na 1 TB. Za lansiranje vikendom, besplatno je više nego dovoljno. Vještine na Vibe Skills isporučuju se s konfiguracijama izrade koje minimiziraju veličinu paketa, što dodatno produžuje besplatni paket.

Mogu li koristiti prilagođenu domenu na besplatnom Vercel paketu?

Da. Besplatni paket podržava prilagođene domene s automatskim HTTPS-om. Kupite domenu (Namecheap, Cloudflare Registrar, Porkbun), usmjerite je na Vercel, a Vercel će se pobrinuti za SSL certifikat. Postavljanje traje oko 10 minuta. Ako nemate domenu, URL ime-igre.vercel.app je dovoljno kratak za dijeljenje na bilo kojoj platformi.

Je li ovaj stog u redu za predaju na game jam?

Da, i to je jedan od najboljih stogova za predaju na jamove. Većina jamova (Ludum Dare, GMTK, js13k, GitHub Game Off) prihvaća bilo koji web-igrivi URL. Link *.vercel.app funkcionira baš kao i itch.io URL za suce. Mnogi dobitnici jamova šalju na oba - itch.io za publiku igrača, Vercel kao brzi kanonski URL.

Trebam li znati Three.js prije početka?

Potrebno vam je dovoljno JavaScripta da pročitate ono što Cursor piše i prilagodite vrijednosti. Ne morate pisati Three.js od nule. Vještine na Vibe Skills generiraju postavljanje motora, kameru, kontroler i konfiguraciju izrade. Cursor obrađuje kod igrivosti iz vaših opisa.

Što se dogodi ako moja Vercel izrada ne uspije u nedjelju u 19:00?

Najčešći uzrok je TypeScript greška ili nedostajuća varijabla okoline. Vercel prikazuje zapisnik izrade s istaknutom linijom koja ne uspijeva. Jedan klik u nadzornoj ploči vraća se na posljednju ispravnu izradu i promovira je u produkciju. Budući da je svaka push pregledna izrada, nikada niste više od jednog commita udaljeni od ispravne izrade. Zato je slanje svako 30 minuta u subotu i nedjelju važno.

Mogu li prodati ili modificirati kod iz Vibe Skills 3D game vještine?

Da. Vještine na Vibe Skills isporučuju se s komercijalno prijateljskom licencom koja vam omogućuje objavljivanje koda u vlastitoj igri na Vercelu, itch.io, Steam, ili bilo gdje drugdje. Kreatori zadržavaju intelektualno vlasništvo vještine, vi zadržavate intelektualno vlasništvo igre izgrađene na vrhu.

Što ako ne želim koristiti Cursor?

Bilo koji AI uređivač koji može uređivati datoteke projekta radi. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bilo koji od njih može iterirati na Three.js skeli iz Vibe Skills vještine. Sama vještina je neovisna o uređivaču.

Brodite to ovog vikenda

Razlog zašto većina samostalnih programera nikada ne isporučuje 3D igru nije motor, žanr ili visina vještine. To je petak navečer kada "samo malo više istražuju" i nikada ne počnu. Sljedeći slobodni vikend koji imate, slijedite četverofazni plan: instalirajte Vibe Skills 3D game vještinu, pošaljite na GitHub, povežite Vercel, postavite do petka 20:00, a zatim provedite subotu i nedjelju iterirajući na aktivnom URL-u.

Tvoj portfelj od deset vikendom isporučenih igara na Vercelu vrijedi više od tvog hipotetskog šestomjesečnog projekta iz snova o motoru. Isporučena uvijek pobjeđuje. Besplatni Vercel URL je dokaz.

Pregledaj 3D vještine za igre na Vibe Skills →

Preskoči maraton bojler ploča Three.js. Instaliraj 3D vještinu za igre na Vibe Skills, pošalji na Vercel i imaj aktivni URL do nedjelje navečer.