Kā nedēļas nogalē palaist 3D spēli Vercel (ar AI prasmēm)

Vibe Skills

Pārlūkojiet simtiem gatavu prasmju Claude, Cursor un citām ierīcēm.

Izpētīt prasmes

Sākt tagad bez maksas

Uzmanojiet 3D spēli Vercel platformā līdz svētdienas vakaram: 48 stundu izvietošanas rokasgrāmata

Jūs varat pāriet no tukša piektdienas vakara līdz saitei jūsu-spēle.vercel.app līdz svētdienas vakariņām. Tehnoloģiju steks ietver Three.js, Cursor, mākslīgā intelekta prasmi no Vibe Skills un Vercel bezmaksas līmeni. Kopējās izmaksas nedēļas nogalei: 0 $. Kopējā infrastruktūra, kas jums jāuzrauga: arī nulle.

Šī nav "uzbūvēt prototipu savā klēpjdatorā un saukt to par gatavu". Šī ir publiska URL, kuru ikviens pasaulē var atvērt pārlūkprogrammā, ar HTTPS, malu kešatmiņu un, ja vēlaties, pielāgotu domēnu. Mākslīgā intelekta prasme nodrošina Three.js konstrukciju un darba vercel.json. Cursor apkalpo iterācijas cilpu. Vercel apkalpo izvietošanu. Jūs apkalpojat dizainu.

Šis ceļvedis ir paredzēts neatkarīgiem izstrādātājiem, "vibe" kodētājiem, hakatona dalībniekiem un ikvienam, kam ir apnikušas nepabeigtas localhost:5173 cilnes. Mēs aplūkojam, kāpēc šis tehnoloģiju steks darbojas, 48 stundu izvietošanas anatomiju, piecas 3D spēļu prasmes, kas izveidotas darba plūsmai, un detalizētu plānu no piektdienas līdz svētdienai.

Vibe Skills

Pārlūkojiet simtiem gatavu prasmju Claude, Cursor un citām ierīcēm.

Izpētīt prasmes

Sākt tagad bez maksas

Kāpēc Vercel + Three.js + AI prasmes ir Solo izstrādātāju steks

Vercel ir visvieglākais iespējamais izvietošanas mērķis Three.js spēlei. Nosūtiet uz GitHub, Vercel pamanīs, izveidos projektu un atdos jums URL 60 sekunžu laikā. Nav servera, ko nodrošināt, nav Docker faila, nav NGINX konfigurācijas, nav SSL iestatīšanas. Three.js pakete ir tikai statiski HTML, JS un WebGL līdzekļi, kas ir tieši tas, kam Vercel malu tīkls tika izveidots.

Bezmaksas līmenis ērti sedz nedēļas nogales palaišanu:

• 100 GB joslas platums mēnesī. 5 MB Three.js build ar 10 000 atskaņošanas reizēm ir 50 GB. Jums beigsies nedēļas nogale pirms beigsies joslas platums.
• Neierobežotas statiskās izvietošanas ar HTTPS un apakšdomēnu *.vercel.app.
• Pielāgota domēna atbalsts bezmaksas līmenī - ja jums ir sava vārds-spēle.com, pievienojiet to, pretējā gadījumā bezmaksas vercel.app URL ir koplietojams katrā sociālajā platformā.
• Priekšskatījuma izvietošanas katram commit'am - katrs push saņem savu URL, lai jūs varētu koplietot build ar draugu un turpināt iterēt, to nesabojājot.

Pievienojiet mākslīgā intelekta prasmi no Vibe Skills, un arī atlikušais boilerplate pazūd. Three.js ainas iestatīšana, spēlētāja kontrolieris, būvēšanas cauruļvads un Vercel gatavais vercel.json tiek ģenerēti ar vienu komandu. Tad Cursor pārvērš pārējo nedēļas nogali par tērzēšanu, kurā aprakstāt vēlamo spēles gaitu un pielāgojat rezultātu. Tas ir pilnais steks: tirgus prasme pamatiem, AI redaktors iterācijai un Vercel izvietošanai. Solo, bez maksas un ātri.

Vibe Skills

Pārlūkojiet simtiem gatavu prasmju Claude, Cursor un citām ierīcēm.

Izpētīt prasmes

Sākt tagad bez maksas

48 stundu anatomija: Piektdienas koncepcija līdz svētdienas izvietošanai

Katra nedēļas nogale, kas patiešām tiek palaista, seko tiem pašiem soļiem. Atslēga ir izvietošanas plānošana piektdienā, nevis svētdienas pēcpusdienā, lai pēdējās sešas stundas tiktu veltītas pošēšanai, nevis cīņai ar kļūdu būvē.

Iemesls, kāpēc tas darbojas, ir piektdienas nosūtīšana uz Vercel. Kad URL pastāv, katrs sestdienas un svētdienas commit tiek automātiski izvietots. Nav "svētdienas vakara izvietošanas panikas", jo izvietošana jau notika piektdienā un visu nedēļas nogali tika darbināta automātiskajā režīmā.

Kā izskatās "Vibe kodēt" 3D spēli Vercel platformā

"Vibe kodēšana" nozīmē aprakstīt vēlamo vienkāršā angļu valodā un ļaut AI redaktoram rakstīt kodu, pēc tam iterējot ar rezultātu. Three.js spēlei Vercel platformā cilpa ir neparasti gluda: katra izmaiņa Cursor ir pnpm dev attālumā no lokālās atsauksmes, pēc tam git push attālumā no aktīvas priekšskatījuma URL, pēc tam automātiski izvietota ražošanā uz main.

Vibe kodēta Vercel spēles nedēļas nogale izskatās šādi:

1. Atveriet prasmes sākuma mapi Cursor.
2. Aprakstiet funkciju tērzēšanā: "dubultā lēciens, ja atstarpe tiek nospiesta divreiz 200 ms laikā".
3. Cursor rediģē kontroliera failu. Saglabāt. pnpm dev atjaunojas. Jūs sajūtat lēcienu pārlūkprogrammā.
4. Ja tas šķiet pareizi, git push. Vercel izveido priekšskatījuma URL. Nosūtiet to draugam.
5. Apvienojiet ar main, kad sajūta ir fiksēta. Ražošanas URL tiek atjaunināts 60 sekunžu laikā.

AI veic rakstīšanu. Vercel veic izvietošanu. Jūs veicat sajūtu un dizainu.

5 AI 3D spēļu prasmes, kas padara to iespējamu Vibe Skills

Šīs prasmes ir izveidotas Vercel + Three.js + Cursor nedēļas nogales darba plūsmai. Katra no tām nodrošina Vite bāzētu Three.js projektu, darba vercel.json, pnpm build, kas rada statisku paketi, ko Vercel var piegādāt no malas, un pārbaudītu izvietošanas ceļu. Visas atrodas 3D spēļu kategorijā Vibe Skills.

1. Three.js + Vercel Game Starter

Noklusējuma izvēle. Izveido Three.js ainu ar spēlētāja kontrolieri, trešās personas kameru, apgaismojuma platformu, debess kasti un zemes plakni ar sadursmēm. Nāk kopā ar vercel.json, kas iestata pareizus kešatmiņas galvenes Three.js līdzekļu paketēm. pnpm dev darbojas lokāli; viens klikšķis Vercel informācijas panelī savieno GitHub repozitoriju, un jums ir aktīvs URL.

Labākais priekš: jebkurš žanrs, izņemot tīru 2D. Izmantojiet to, ja vēl nezināt, ko veidojat.

2. First-Person Vercel Walker

Pulēts pirmās personas kontrolieris (WASD + peles bloķēšana + gravitācija + sprints + lēciens) ar pēdu trokšņu āķiem, galvas šūpošanos un vercel.json, kas pareizi apkalpo peles bloķēšanas CSP galvenes. Tas bieži sagādā problēmas solo izstrādātājiem ražošanā. Šī prasme atrisina to jums.

Labākais priekš: pastaigu simulatoriem, šausmu prototipiem, stāstījuma spēlēm, muzeju izstādēm.

3. Browser Arena Shooter Kit

Augšējā arena (dubultā kursorsviras kontrolieris, viļņu izraisītājs, pamata ienaidnieka AI, projecēšanas sistēma, rezultātu HUD) ar Vercel optimizētu būvēšanu, kas saspiež līdzekļus, sadala AI pa kodiem un lēni ielādē mūziku. Iekļauti multiplayer āķi; nedēļas nogalē tiek piegādāts viena spēlētāja režīms.

Labākais priekš: arkādes šāvējiem, lodes ellēm, jam iesniegumiem, kam jāielādējas ātri mobilajā ierīcē.

4. Vercel Puzzle Platformer

Trešās personas platformeris (mainīgs lēciens, kovota laika noteikšana, atklāšanas atklāšana), kontrolpunkti, trīs tukši līmeņi, kurus varat rediģēt Blenderī vai kodā, un respawn cilpa. vercel.json ir konfigurēts tūlītējai malu kešatmiņas līmeņu pārlādei, tāpēc testēšana uz telefona šķiet ātra.

Labākais priekš: puzzle platformeriem, parkūra prototipiem, līmeņu dizaina eksperimentiem.

5. Vercel Driving Sandbox

Arkādes braukšanas sajūta (paātrinājuma līkne, drifta fizika, kameras aizkave, pamata reljefs) ar zema polikarbona automašīnu, trases veidni un izvietošanu, kas optimizēta lielām reljefa mesh. Iestatītās HTTP galvenes liek WebGL kontekstam sākties ātrāk Safari, kas vēsturiski ir bijusi lēnākā pārlūkprogramma Three.js.

Labākais priekš: arkādes sacīkstēm, bezceļu braukšanai, automašīnu sajūtas demonstrējumiem portfelim.

Skatīt visas 3D spēļu prasmes vietnē Vibe Skills →

No piektdienas līdz svētdienai: detalizēta plānošana

Šis ir precīzs grafiks. Pielāgojiet sākuma laiku, bet saglabājiet secību. Galvenais pavērsiens ir piektdienas vakara Vercel izvietošana. Viss pēc tam ir iterācija.

Piektdiena 18:00 - 20:00: Izvēlieties prasmi, nosūtiet uz GitHub, pievienojiet Vercel

1. solis: Izvēlieties 3D spēles prasmi vietnē Vibe Skills. Apskatiet 3D spēļu kategoriju, izvēlieties to, kas atbilst jūsu žanram, un instalējiet sākumu svaigā mapē. Atveriet to Cursor. Līdz 19:00 jums vajadzētu redzēt Three.js ainu ar kustīgu spēlētāju.

2. solis: Izveidojiet GitHub repozitoriju un nosūtiet. git init, git remote add, git push. Izmantojiet savas spēles slīpsvītu kā repozitorija nosaukumu (crystal-runner, lunar-fishing, jebko). Repozitorija nosaukums bieži kļūst par jūsu URL.

3. solis: Savienojiet repozitoriju ar Vercel. Pierakstieties Vercel ar GitHub (bez maksas), noklikšķiniet uz "Add New Project", izvēlieties repozitoriju. Vercel automātiski atklāj Vite un konfigurē būvēšanu. Noklikšķiniet uz Deploy. 60 sekunžu laikā jums būs URL crystal-runner.vercel.app. Atveriet to savā tālrunī. Kopīgojiet ar vienu draugu. Izvietošanas josla tagad ir nulle pārējai nedēļas nogalei.

Piektdiena 20:00 - 22:00: Uzrakstiet dizaina dokumentu

4. solis: Atbildiet uz pieciem jautājumiem vienkāršā angļu valodā. Atveriet Notion lapu vai markdown failu repozitorijā un atbildiet:

• Ko spēlētājs dara ik pēc 5 sekundēm? (galvenā cilpa)
• Kāds ir uzvaras nosacījums un zaudējuma nosacījums?
• Cik ilgs ir viens skrējiens vai viens līmenis?
• Kāds ir vizuālais āķis? (palete, apgaismojums, stila atsauce)
• Kāda ir viena funkcija, kas padara to neaizmirstamu 30 sekunžu laikā?

5. solis: Pievienojiet dizaina dokumentu. Nosūtiet to repozitorijā. Vercel atkārtoti izvietos. Disciplīna nosūtīt katru nozīmīgu izmaiņu uztur tiešsaistes URL godīgu.

Sestdiena 9:00 - 13:00: Uzbūvējiet galveno mehāniku

6. solis: Nomainiet pagaidu mehāniku ar savu vienu funkciju. Šī ir vienīgā svarīgā funkcija. Izmantojiet Cursor tērzēšanu, lai to aprakstītu ("kad spēlētājs paņem kristālu, iesaldē tuvumā esošos ienaidniekus uz 2 sekundēm un atskaņo zvaniņu"). Iterējiet lokāli ar pnpm dev. Kad tas šķiet pareizi, nosūtiet.

7. solis: Savienojiet uzvaras/zaudējuma stāvokli. 60 sekunžu build ar reālu beigu sajūtu kā spēlei. 60 minūšu build bez beigām šķiet kā tehnoloģiju demonstrējums. Vienmēr vispirms savienojiet uzvaras ekrānu, pēc tam visu pārējo.

Sestdiena 13:00 - 20:00: Pievienojiet vienu līmeni

8. solis: Uzbūvējiet vienu pulētu līmeni. Nevis trīs nepabeigtus. Izmantojiet pagaidu kubs formas ģeometriju. Izmantojiet prasmes standarta varoni. Pielāgojiet sajūtu - lēciena augstumu, kameras aizkavi, daļiņu intensitāti.

9. solis: Pievienojiet pamācības pārklājumu. Divu teikumu "WASD, lai kustētos, noklikšķiniet, lai šautu" uzvedne pirmajā palaišanā pasargā jūsu palaišanu no apmulsušiem spēlētājiem, kuri padodas pēc 8 sekundēm. Cursor var ģenerēt React (vai parasto DOM) pārklājumu 30 sekundēs.

10. solis: Sūtiet katru stundu. Katrs nosūtītais vienums saņem Vercel priekšskatījuma URL. Nosūtiet katru no tiem draugam. Atsauksmju cilpa ir šī tehnoloģiju steka slepenais ierocis.

Svētdiena 10:00 - 16:00: Pošēšana

11. solis: Pievienojiet trīs skaņas. Pēdu cilpa, apkārtējais pads, uzvaras signāls. Pat trīs skaņas ievērojami uzlabo nedēļas nogales prototipu. Bezmaksas avoti: freesound.org, opengameart.org.

12. solis: Pievienojiet sulīgumu. Daļiņas pie trāpījuma, ekrāna kratīšana pie trieciena, skaitļu uznirstošās logi pie rezultāta. "Sulīgums" ir tas, kas liek 48 stundu build izskatīties kā 6 mēnešu build GIF formātā. Lūdziet Cursor pievienot "ekrāna kratīšanu ar intensitāti 0.3 uz 150 ms, kad spēlētājs saņem bojājumus" - tas piecās sekundēs uzrakstīs kameras kratīšanas āķi.

13. solis: Palaidiet Lighthouse pārskati. Atveriet Vercel URL mobilajā ierīcē un palaidiet Chrome DevTools Lighthouse. Three.js pakas parasti ir apmēram 400 KB līdz 1,5 MB. Ja pārsniedzat 3 MB, lūdziet Cursor iespējot koda sadalīšanu smagajiem moduļiem. Vercel gzip un brotli parūpēsies par pārējo.

14. solis: Kļūdu pārskati. Spēlējiet savu tiešraides URL piecas reizes pēc kārtas. Labojiet visu, kas sabojājas divreiz. Ignorējiet visu, kas sabojājas vienreiz.

Svētdiena 16:00 - 20:00: Palaišana

15. solis: (Nav obligāti) Iestatiet pielāgoto domēnu. Ja iepriekš iegādājāties vārds-spēle.com, pievienojiet to Vercel projekta iestatījumos. SSL ir automātisks. Pretējā gadījumā URL *.vercel.app ir piemērots - tam ir HTTPS, tas ir koplietojams un tas ielādējas visur.

16. solis: Ierakstiet 15 sekunžu GIF ar labāko momentu. Izmantojiet tiešraides URL, nevis localhost. GIF ir tas, kas tiek klikšķināts Twitter, Bluesky un Reddit.

17. solis: Izveidojiet itch.io lapu (nav obligāti, bet ļoti noderīgi). Nosaukums, vienas rindas sauklis, trīs ekrānuzņēmumi, GIF, vadīklas, kredīti un jūsu *.vercel.app iframe ietvars (itch.io atbalsta iframe ietvarus HTML5 spēlēm). Tagad jums ir divi URL - viens ikdienas kopīgošanai un viens spēlētāju auditorijai.

18. solis: Publicējiet saiti. Twitter, Bluesky, jūsu izstrādātāju kopienas Discord, r/IndieDev, r/threejs, r/WebGames. Vienmēr sāciet ar GIF. Vienmēr iekļaujiet URL. Ja izmantojāt Vibe Skills prasmi, pieminiet to izstrādes žurnāla ziņojumā - citi izstrādātāji, kas lasa, vēlēsies to pašu sākumu.

Kā izvairīties no trim visbiežākajām Vercel izvietošanas kļūmēm

Trīs lietas gandrīz katru nedēļu sabojā solo Three.js + Vercel nedēļas nogali. Visas trīs ir 5 minūšu labojamas, ja tās pamanāt piektdienas vakarā, un 5 stundu zaķu alas, ja tās atklājat svētdienas vakarā plkst. 19:00.

• Nepareizs būvēšanas izvades direktorijs. Vite noklusēti ir dist/. Vercel automātiski atklāj Vite un izmanto dist/. Ja esat pielāgojis izvadi, iestatiet outputDirectory failā vercel.json vai projekta iestatījumos, pretējā gadījumā jūsu izvietojums būs 404.
• Līdzekļu ceļi, kas darbojas lokāli, bet ražošanā dod 404. Izmantojiet relatīvos ceļus vai Vite import.meta.env.BASE_URL palīgu jebkuram izpildlaikā ielādētam GLB, tekstūras vai audio failam. Cieti kodēti /assets/... ceļi parasti darbojas, bet nokopētie absolūtie Windows ceļi noteikti nedarbosies.
• CSP galvenes, kas bloķē peles bloķēšanu vai audio kontekstu. Pirmās personas spēlēm nepieciešama peles bloķēšana. Audio nepieciešama lietotāja žesta aktivizēšana. Jebkura prasme no 3D spēļu kategorijas nāk kopā ar pareizo headers bloku failā vercel.json, lai to apkalpotu. Ja rakstījāt savu no nulles, kopējiet konfigurāciju no prasmes repozitorija.

Izvietošana darbojas piektdienā, tāpēc, kad svētdienā tās sabojājas, tas vienmēr notiek nesenās izmaiņas dēļ. git bisect ir jūsu draugs. Vēl labāk: turpiniet sūtīt ik pēc 30 minūtēm, lai sabojātais commits būtu mazs.

Bieži uzdotie jautājumi

Vai Vercel bezmaksas līmenis patiešām izturēs, ja manai spēlei būs apmeklētība?

Jā, nedēļas nogales palaišanai un pirmajām dažām nedēļām. Bezmaksas līmenis nodrošina 100 GB joslas platumu mēnesī, kas ir aptuveni 20 000 atskaņojumu 5 MB Three.js build. Ja sasniegsiet šo griestu, Pro plāns ir 20 $ mēnesī un palielina līdz 1 TB. Nedēļas nogales palaišanai bezmaksas ir vairāk nekā pietiekami. Vibe Skills esošās prasmes nodrošina būvēšanas konfigurācijas, kas samazina paketes izmēru, tādējādi palielinot bezmaksas līmeņa izmantošanas laiku.

Vai es varu izmantot pielāgoto domēnu Vercel bezmaksas līmenī?

Jā. Bezmaksas līmenis atbalsta pielāgotos domēnus ar automātisku HTTPS. Iegādājieties domēnu (Namecheap, Cloudflare Registrar, Porkbun), norādiet to uz Vercel, un Vercel apkalpos SSL sertifikātu. Iestatīšana aizņem apmēram 10 minūtes. Ja jums nav domēna, URL vārds-spēle.vercel.app ir pietiekami īss, lai to koplietotu jebkurā platformā.

Vai šis tehnoloģiju steks ir piemērots spēļu jam iesniegšanai?

Jā, un tas ir viens no labākajiem stekiem jam iesniegšanai. Lielākā daļa jam (Ludum Dare, GMTK, js13k, GitHub Game Off) pieņem jebkuru tīmeklī spēlējamu URL. *.vercel.app saite darbojas tāpat kā itch.io URL tiesnešiem. Daudzi jam uzvarētāji izvieto abās platformās - itch.io spēlētāju auditorijai, Vercel kā ātrs kanoniskais URL.

Vai man ir jāzina Three.js pirms sākšanas?

Jums ir nepieciešams pietiekami daudz JavaScript, lai lasītu to, ko raksta Cursor, un pielāgotu vērtības. Jums nav nepieciešams rakstīt Three.js no nulles. Vibe Skills esošās prasmes ģenerē dzinēja iestatīšanu, kameru, kontrolieri un būvēšanas konfigurāciju. Cursor apkalpo spēles gaitu no jūsu aprakstiem.

Ko darīt, ja mana Vercel būvēšana neizdodas svētdienā plkst. 19:00?

Visbiežākais cēlonis ir TypeScript kļūda vai trūkstošs vides mainīgais. Vercel parāda būvēšanas žurnālu ar kļūdaino rindiņu izceltu. Viens klikšķis informācijas panelī atgriež iepriekšējo darba izvietojumu un paaugstina to līdz ražošanai. Tā kā katrs nosūtītais ir priekšskatījuma izvietojums, jūs nekad neesat tālāk par vienu commit no darba būvējuma. Tāpēc ir svarīgi sūtīt ik pēc 30 minūtēm sestdienā un svētdienā.

Vai es varu pārdot vai modificēt kodu no Vibe Skills 3D spēles prasmes?

Jā. Vibe Skills esošās prasmes tiek piegādātas ar komerciāli draudzīgu licenci, kas ļauj jums izlaist kodu savā spēlē Vercel, itch.io, Steam vai jebkurā citā vietā. Radītāji patur prasmes IP, jūs paturat spēles IP, kas ir uzbūvēta virs tās.

Ko darīt, ja es nevēlos izmantot Cursor?

Jebkurš AI redaktors, kas var rediģēt projekta failus, darbojas. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - jebkurš no tiem var iterēt Three.js konstrukciju no Vibe Skills prasmes. Pati prasme ir neatkarīga no redaktora.

Uzmanojiet to šajā nedēļas nogalē

Iemesls, kāpēc lielākā daļa solo izstrādātāju nekad nepabeidz 3D spēli, nav dzinējs, žanrs vai prasmes līmenis. Tā ir piektdienas vakara pētīšana "vēl mazliet", un nekad netiek sākts. Nākamajā brīvajā nedēļas nogalē sekojiet četru fāžu plānam: instalējiet Vibe Skills 3D spēles prasmi, nosūtiet uz GitHub, pievienojiet Vercel, izvietojiet līdz piektdienas 20:00, tad pavadiet sestdien un svētdien iterējot pie tiešraides URL.

Jūsu portfelis ar desmit nedēļas nogalēs pabeigtām spēlēm Vercel platformā ir vērtīgāks nekā jūsu hipotētiskais sešu mēnešu sapņu dzinēja projekts. Pabeigtā vienmēr uzvar. Bezmaksas Vercel URL ir pierādījums.

Skatīt 3D spēļu prasmes vietnē Vibe Skills →

Izlaidiet Three.js boilerplate maratonu. Instalējiet 3D spēles prasmi vietnē Vibe Skills, nosūtiet uz Vercel un jums būs aktīvs URL līdz svētdienas vakaram.