Kako da postavite 3D igru na Vercel ovog vikenda (sa veštinama veštačke inteligencije)

Vibe Skills

Pregledajte stotine gotovih veština za Claude, Cursor i još mnogo toga.

Istraži veštine

Započni besplatno sada

Isporučite 3D igru na Vercel do nedeljne večeri: Priručnik za raspoređivanje od 48 sati

Možete da pređete sa praznog petka uveče na link your-game.vercel.app do nedeljnog ručka. Stek je Three.js, Cursor, AI veština sa Vibe Skills i besplatni nivo Vercel-a. Ukupni troškovi za vikend: 0 dolara. Ukupna infrastruktura kojom morate da upravljate: takođe nula.

Ovo nije "napravite prototip na svom laptopu i nazovite ga gotovim". Ovo je javni URL koji svako na svetu može otvoriti u pretraživaču, sa HTTPS-om, keširanjem na ivici i prilagođenim domenom ako ga želite. AI veština isporučuje Three.js skelu i radni vercel.json. Cursor upravlja petljom iteracije. Vercel upravlja raspoređivanjem. Vi upravljate dizajnom.

Ovaj vodič je za nezavisne programere, kodere za atmosferu, učesnike hakatona i svakoga ko je umoran od nedovršenih localhost:5173 kartica. Pokrivamo zašto ovaj stek funkcioniše, anatomiju raspoređivanja od 48 sati, pet AI veština za 3D igre napravljenih za radni tok i korak po korak od petka do nedelje.

Vibe Skills

Pregledajte stotine gotovih veština za Claude, Cursor i još mnogo toga.

Istraži veštine

Započni besplatno sada

Zašto je Vercel + Three.js + AI veštine stek za samostalnog programera

Vercel je najlenji mogući cilj za raspoređivanje za Three.js igru. Gurnite na GitHub, Vercel primećuje, gradi projekat i vraća vam URL u roku od 60 sekundi. Nema servera za obezbeđivanje, nema Docker datoteke, nema NGINX konfiguracije, nema podešavanja SSL-a. Three.js paket je samo statički HTML, JS i WebGL sredstva, što je upravo ono za šta je Vercelova mreža na ivici napravljena da služi.

Besplatni nivo udobno pokriva lansiranje vikendom:

• 100 GB propusnog opsega mesečno. Three.js paket od 5 MB sa 10.000 igranja je 50 GB. Ponestaje vam vikend pre nego što vam ponestane propusnog opsega.
• Neograničena statička raspoređivanja sa HTTPS-om i poddomenom *.vercel.app.
• Podrška za prilagođene domene na besplatnom nivou - donesite svoj name-game.com ako ga imate, inače je besplatni vercel.app URL deljiv na svim platformama društvenih mreža.
• Pregled raspoređivanja za svaku reviziju - svako guranje dobija sopstveni URL, tako da možete da delite izgrađeni fajl sa prijateljem i nastavljate sa iteracijom bez njegovog kvarenja.

Dodajte AI veštinu sa Vibe Skills i osnovni kod takođe nestaje. Three.js podešavanje scene, kontroler igrača, gradbeni cevovod i Vercel-omogućeni vercel.json generišu se jednom komandom. Zatim Cursor pretvara ostatak vikenda u ćaskanje gde opisujete igru koju želite i podešavate izlaz. To je puni stek: veština sa tržišta za temelj, AI urednik za iteraciju i Vercel za raspoređivanje. Sam, besplatan i brz.

Vibe Skills

Pregledajte stotine gotovih veština za Claude, Cursor i još mnogo toga.

Istraži veštine

Započni besplatno sada

Anatomija od 48 sati: Koncept od petka do raspoređivanja u nedelju

Svako raspoređivanje vikendom koje se zaista pokrene prati iste korake. Trik je u tome da se planira raspoređivanje u petak, a ne u nedelju popodne, tako da poslednjih šest sati ide na poliranje umesto na borbu sa greškom pri građenju.

Razlog zašto ovo funkcioniše je petak guranje na Vercel. Kada URL postoji, svaka subota i nedelja promena automatski se raspoređuje. Nema "panike pri raspoređivanju u nedelju uveče" jer se raspoređivanje već dogodilo u petak i radilo je na autopilotu ceo vikend.

Kako izgleda "Vibe kodiranje" 3D igre na Vercel-u

Vibe kodiranje znači opisivanje onoga što želite na običnom engleskom jeziku i dozvoljavanje AI uredniku da piše kod, a zatim iteriranje na izlaznom kodu. Za Three.js igru na Vercel-u, petlja je neobično čista: svaka promena u Cursor-u je pnpm dev daleko od lokalnog povratnog izveštaja, zatim git push daleko od aktivnog pregleda URL-a, a zatim automatski raspoređeno u produkciju na main.

Vikend vibe kodirane Vercel igre izgleda ovako:

1. Otvorite početni folder veštine u Cursor-u.
2. Opišite funkciju u ćaskanju: "dvostruki skok ako se pritisne razmaknica dva puta u roku od 200 ms".
3. Cursor uređuje datoteku kontrolera. Sačuvajte. pnpm dev se ponovo učitava. Osećate skok u pretraživaču.
4. Ako se čini ispravnim, git push. Vercel gradi URL za pregled. Pošaljite ga prijatelju.
5. Spojite u main kada se osećaj zaključa. Produkcijski URL se ažurira u roku od 60 sekundi.

AI radi kucanje. Vercel obavlja raspoređivanje. Vi obavljate osećaj i dizajn.

5 AI 3D igara koje ovo omogućavaju na Vibe Skills

Ove veštine su napravljene za radni tok vikenda Vercel + Three.js + Cursor. Svaka isporučuje Three.js projekat zasnovan na Vite-u, radni vercel.json, pnpm build koji proizvodi statički paket koji Vercel može da služi sa ivice, i testirani put raspoređivanja. Sve su u kategoriji 3D igre na Vibe Skills.

1. Three.js + Vercel Game Starter

Podrazumevani izbor. Generiše Three.js scenu sa kontrolerom igrača, kamerom iz trećeg lica, sistemom osvetljenja, nebeskom kockom i ravni tla sa sudarima. Isporučuje se sa vercel.json koji postavlja ispravne zaglavlja za keširanje za Three.js pakete sredstava. pnpm dev radi lokalno; jedan klik u Vercel kontrolnoj tabli povezuje GitHub repozitorijum i dobijate aktivni URL.

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

2. First-Person Vercel Walker

Polirani kontroler iz prvog lica (WASD + zaključavanje kursora mišem + gravitacija + trčanje + skok) sa kukama za korake, podrhtavanjem glave i vercel.json koji ispravno obrađuje CSP zaglavlja zaključavanja kursora. Ovo često zbuni samostalne programere u produkciji. Veština rešava to za vas.

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

3. Browser Arena Shooter Kit

Arena iz ptičje perspektive (kontrola dvostrukim štapom, generator talasa, osnovna AI neprijatelja, sistem projektila, HUD rezultata) sa Vercel-optimizovanom verzijom koja kompresuje resurse, deli AI kod i učitava muziku po potrebi. Uključene su multiplayer kuke; vikendom se isporučuje samostalni način rada.

Najbolje za: arkadne pucačine, paklene metke, unose za jam koji moraju brzo da se učitavaju na mobilnim uređajima.

4. Vercel Puzzle Platformer

Platformer iz trećeg lica (promenljivi skok, vreme odlaganja, detekcija ivice), kontrolne tačke, tri privremena nivoa koje možete da uredite u Blenderu ili kodom, i petlja za ponovno pojavljivanje. vercel.json je konfigurisan za trenutno ponovno učitavanje nivoa keširanog na ivici, tako da testiranje igre deluje oštro na telefonu.

Najbolje za: zagonetne platformere, parkour prototipove, eksperimente dizajna nivoa.

5. Vercel Driving Sandbox

Arkada osećaj vožnje (kriva ubrzanja, fizika drifta, kašnjenje kamere, osnovni teren) sa niskopoligonskim automobilom, predloškom staze i raspoređivanjem optimizovanim za velike terenske mreže. Predpodešena HTTP zaglavlja čine da WebGL kontekst počinje brže na Safariju, istorijski najsporijem pretraživaču za Three.js.

Najbolje za: arkadne trke, terensku vožnju, demo osećaj automobila za portfolio.

Pregledajte sve 3D veštine za igre na Vibe Skills →

Korak po korak od petka do nedelje

Ovo je tačan raspored. Prilagodite vreme početka, ali zadržite redosled. Ključna prekretnica je Vercel raspoređivanje u petak uveče. Sve posle toga je iteracija.

Petak 18:00 - 20:00: Odaberite veštinu, gurnite na GitHub, povežite Vercel

Korak 1: Odaberite 3D veštinu za igru na Vibe Skills. Pregledajte kategoriju 3D igre, odaberite onu koja odgovara vašem žanru i instalirajte početni kod u novu fasciklu. Otvorite je u Cursor-u. Do 19:00 bi trebalo da vidite Three.js scenu sa pokretnim igračem.

Korak 2: Kreirajte GitHub repozitorijum i gurnite. git init, git remote add, git push. Koristite slug vaše igre kao ime repozitorijuma (crystal-runner, lunar-fishing, šta god). Ime repozitorijuma često postaje vaš URL.

Korak 3: Povežite repozitorijum sa Vercel-om. Prijavite se na Vercel sa GitHub-om (besplatno), kliknite na "Dodaj novi projekat", odaberite repozitorijum. Vercel automatski prepoznaje Vite i konfiguriše izgradnju. Kliknite na Rasporedi. U roku od 60 sekundi dobijate URL crystal-runner.vercel.app. Otvorite ga na svom telefonu. Podelite sa jednim prijateljem. Traka raspoređivanja je sada nula do kraja vikenda.

Petak 20:00 - 22:00: Napišite dokument o dizajnu

Korak 4: Odgovorite na pet pitanja na običnom engleskom jeziku. Otvorite Notion stranicu ili markdown datoteku unutar repozitorijuma i odgovorite:

• Šta igrač radi svakih 5 sekundi? (osnovna petlja)
• Kakav je uslov za pobedu i uslov za poraz?
• Koliko traje jedan prolaz ili jedan nivo?
• Koji je vizuelni kuka? (paleta, osvetljenje, referenca stila)
• Koja je jedna funkcija koja ovo čini nezaboravnim za 30 sekundi?

Korak 5: Snimite dokument o dizajnu. Gurnite ga u repozitorijum. Vercel će ponovo rasporediti. Disciplina guranja svake značajne promene održava aktuelni URL iskrenim.

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

Korak 6: Zamenite privremenu mehaniku svojom jednom funkcijom. Ovo je jedina važna funkcija. Koristite Cursor ćaskanje da biste je opisali ("kada igrač pokupi kristal, zamrznite obližnje neprijatelje na 2 sekunde i pustite zvonjenje"). Iterirajte lokalno sa pnpm dev. Kada se čini ispravnim, gurnite.

Korak 7: Povežite stanje pobede/poraza. Izgradnja od 60 sekundi sa stvarnim krajem deluje kao igra. Izgradnja od 60 minuta bez kraja deluje kao tehnički demo. Uvek prvo povežite ekran pobede, a zatim sve ostalo.

Subota 13:00 - 20:00: Dodajte jedan nivo

Korak 8: Izgradite jedan polirani nivo. Ne tri polovična. Koristite privremene kocke za geometruju. Koristite osnovni lik veštine. Podesite osećaj - visinu skoka, kašnjenje kamere, intenzitet čestica.

Korak 9: Dodajte overlay za tutorijal. Popup od dve rečenice "WASD za kretanje, klik za pucanje" pri prvom pokretanju spasava vaše lansiranje od zbunjenih igrača koji odustaju za 8 sekundi. Cursor može da generiše overlay za React (ili osnovni DOM) za 30 sekundi.

Korak 10: Gurnite svakih sat vremena. Svako guranje dobija Vercel URL za pregled. Pošaljite svaki prijatelju. Petlja povratnih informacija je tajno oružje ovog steka.

Nedelja 10:00 - 16:00: Poliranje

Korak 11: Dodajte tri zvuka. Petlja koraka, ambijentalni pad, pobednički zvuk. Čak i tri zvuka značajno unapređuju prototip vikenda. Besplatni izvori: freesound.org, opengameart.org.

Korak 12: Dodajte efekte. Čestice pri udarcu, podrhtavanje ekrana pri udaru, brojčani iskakanja na rezultatu. Efekti su ono što čini da izgradnja od 48 sati izgleda kao izgradnja od 6 meseci na GIF-u. Pitajte Cursor da doda "podrhtavanje ekrana intenziteta 0.3 na 150 ms kada igrač pretrpi štetu" - on će napisati kuku za podrhtavanje kamere za pet sekundi.

Korak 13: Pokrenite Lighthouse prolaz. Otvorite Vercel URL na telefonu i pokrenite Chrome DevTools Lighthouse. Three.js paketi su obično oko 400 KB do 1.5 MB. Ako ste preko 3 MB, pitajte Cursor da omogući deljenje koda na teškim modulima. Vercel-ov gzip i brotli će se pobrinuti za ostalo.

Korak 14: Prolazak kroz greške. Igrajte svoj aktivni URL pet puta zaredom. Ispravite sve što se pokvari dvaput. Zanemarite sve što se pokvari jednom.

Nedelja 16:00 - 20:00: Lansiranje

Korak 15: (Opciono) Postavite prilagođeni domen. Ako ste kupili name-game.com unapred, dodajte ga u Vercel podešavanja projekta. SSL je automatski. Inače je URL *.vercel.app u redu - ima HTTPS, može se deliti i učitava se svuda.

Korak 16: Snimite 15-sekundni GIF najboljeg trenutka. Koristite aktivni URL, ne localhost. GIF je ono što se klika na Twitter-u, Bluesky-u i Redditu.

Korak 17: Kreirajte itch.io stranicu (opciono, ali visoko korisno). Naslov, natpis u jednoj rečenici, tri snimka ekrana, GIF, kontrole, zasluge i ugrađeni *.vercel.app iframe (itch.io podržava ugrađivanje iframa za HTML5 igre). Sada imate dva URL-a - jedan za neobavezno deljenje i jedan za publiku gejmera.

Korak 18: Postavite link. Twitter, Bluesky, vaš Discord zajednica programera, r/IndieDev, r/threejs, r/WebGames. Uvek počnite sa GIF-om. Uvek uključite URL. Ako ste koristili Vibe Skills veštinu, pomenite je u postu dnevnika razvoja - drugi programeri koji čitaju želeće isti početni kod.

Kako izbeći tri najčešća Vercel kvara pri raspoređivanju

Tri stvari kvare skoro svaki solo Three.js + Vercel vikend. Sve tri su brze popravke od 5 minuta ako ih uhvatite u petak uveče, i rupe od 5 sati ako ih otkrijete u nedelju u 19:00.

• Pogrešan izlazni direktorijum za izradu. Vite podrazumevano koristi dist/. Vercel automatski prepoznaje Vite i koristi dist/. Ako ste prilagodili izlaz, postavite outputDirectory u vercel.json ili podešavanja projekta ili će vaše raspoređivanje biti 404.
• Putanja sredstava koje rade lokalno, ali daju 404 u produkciji. Koristite relativne putanje ili Vite import.meta.env.BASE_URL pomoćnika za bilo koji GLB, teksturu ili audio datoteku učitanu u vreme rada. Hardkodirane putanje /assets/... obično rade, ali kopirane apsolutne Windows putanje definitivno neće.
• CSP zaglavlja koja blokiraju zaključavanje kursora ili audio kontekst. Igre iz prvog lica zahtevaju zaključavanje kursora. Audio zahteva aktiviranje korisničkog gesta. Svaka veština iz kategorije 3D igre isporučuje se sa pravim headers blokom u vercel.json za rukovanje ovim. Ako ste sami napisali svoj od nule, kopirajte konfiguraciju iz repozitorijuma veštine.

Raspoređivanje radi u petak, tako da kada se ovo pokvari u nedelju, uvek je to zbog nedavne promene. git bisect vam je prijatelj. Još bolje: nastavljajte da gurate svakih 30 minuta tako da pokvarena revizija bude mala.

Često postavljana pitanja

Da li će besplatni Vercel nivo zaista izdržati ako moja igra dobije saobraćaj?

Da, za lansiranje vikendom i prve nedelje. Besplatni nivo vam daje 100 GB propusnog opsega mesečno, što je otprilike 20.000 igranja Three.js paketa od 5 MB. Ako dostignete taj plafon, Pro plan košta 20 dolara mesečno i povećava vas na 1 TB. Za lansiranje vikendom, besplatno je više nego dovoljno. Veštine na Vibe Skills isporučuju se sa konfiguracijama izrade koje minimiziraju veličinu paketa, što dodatno produžava besplatni nivo.

Mogu li da koristim prilagođeni domen na besplatnom Vercel nivou?

Da. Besplatni nivo podržava prilagođene domene sa automatskim HTTPS-om. Kupite domen (Namecheap, Cloudflare Registrar, Porkbun), usmerite ga na Vercel, a Vercel se brine za SSL sertifikat. Podešavanje traje oko 10 minuta. Ako nemate domen, name-game.vercel.app URL je dovoljno kratak za deljenje na bilo kojoj platformi.

Da li je ovaj stek pogodan za prijavu na jam za igre?

Da, i to je jedan od najboljih stekova za prijave na jam. Većina jamova (Ludum Dare, GMTK, js13k, GitHub Game Off) prihvata bilo koji web-igrivi URL. *.vercel.app link funkcioniše baš kao itch.io URL za sudije. Mnogi pobednici jamova isporučuju se na oba - itch.io za publiku gejmera, Vercel kao brzi kanonski URL.

Da li moram da znam Three.js pre početka?

Potrebno vam je dovoljno JavaScript-a da pročitate ono što Cursor piše i podesite vrednosti. Ne morate da pišete Three.js od nule. Veštine na Vibe Skills generišu podešavanje motora, kameru, kontroler i konfiguraciju izrade. Cursor upravlja kodom igranja iz vaših opisa.

Šta se događa ako moja Vercel izrada ne uspe u nedelju u 19:00?

Najčešći uzrok je greška TypeScript-a ili nedostajući env promenljiva. Vercel prikazuje dnevnik izrade sa istaknutom linijom greške. Jedan klik u kontrolnoj tabli vraća poslednju radnu izradu i promoviše je u produkciju. Budući da je svako guranje pregled raspoređivanja, nikada niste više od jedne revizije udaljeni od radne izrade. Zato guranje svakih 30 minuta u subotu i nedelju ima smisla.

Mogu li da prodam ili modifikujem kod iz Vibe Skills 3D game veštine?

Da. Veštine na Vibe Skills isporučuju se sa komercijalno prijateljskom licencom koja vam omogućava da objavite kod u svojoj igri na Vercel-u, itch.io, Steam-u ili bilo gde drugde. Kreatori zadržavaju IP veštine, vi zadržavate IP igre izgrađene na vrhu.

Šta ako ne želim da koristim Cursor?

Bilo koji AI urednik koji može da uređuje projektne datoteke funkcioniše. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bilo koji od njih može da iterira na Three.js skelu iz Vibe Skills veštine. Sama veština je nezavisna od urednika.

Isporučite ga ovog vikenda

Razlog zašto većina nezavisnih programera nikada ne isporučuje 3D igru nije motor, žanr ili nivo veština. To je petak uveče kada "samo malo više istražuju" i nikada ne počnu. Sledeći slobodan vikend, pratite plan od četiri faze: instalirajte Vibe Skills 3D game veštinu, gurnite na GitHub, povežite Vercel, rasporedite do petka uveče, a zatim provedite subotu i nedelju iterirajući na aktivnom URL-u.

Vaš portfolio od deset igara isporučenih vikendom na Vercel-u vredi više od vašeg hipotetičkog projekta od šest meseci iz snova. Isporučena igra uvek pobeđuje. Besplatni Vercel URL je dokaz.

Pregledajte 3D veštine za igre na Vibe Skills →

Preskočite maraton osnovnog Three.js koda. Instalirajte 3D veštinu za igre na Vibe Skills, gurnite na Vercel i imajte aktivni URL do nedeljne večeri.