Vibe Skills

Shfletoni qindra aftësi të gatshme për Claude, Cursor dhe më shumë.

Dërgoni një Lojë 3D në Vercel Deri të Dielën në Mbrëmje: Playbook për Vendosje 48-Orëshe

Mund të kaloni nga një mbrëmje e Premte e zbrazët në linkun tuaja-lojë.vercel.app deri në darkën e së Dielës. Staku përbëhet nga Three.js, Cursor, një aftësi AI nga Vibe Skills, dhe niveli falas i Vercel. Kosto totale për fundjavën: 0$. Total infra që duhet të mbikëqyrni: gjithashtu zero.

Kjo nuk është "ndërtoni një prototip në laptopin tuaj dhe quajeni të mbaruar". Ky është një URL publik që kushdo në botë mund ta hapë në një shfletues, me HTTPS, caching në edge dhe një domen të zakonshëm nëse dëshironi. Aftësia AI dërgon strukturën bazë të Three.js dhe një vercel.json funksional. Cursor menaxhon ciklin e iteracionit. Vercel menaxhon vendosjen. Ju menaxhoni dizajnin.

Ky udhëzues është për zhvilluesit indie, programuesit vibezues, pjesëmarrësit e hackathon-eve dhe këdo që është i lodhur nga tabet gjysmë të mbaruar localhost:5173. Ne mbulojmë pse ky stak funksionon, anatomia e vendosjes 48-orëshe, pesë aftësi për lojëra 3D të ndërtuara për fluksin e punës, dhe hapat nga e Premtja në të Dielën.

Vibe Skills

Shfletoni qindra aftësi të gatshme për Claude, Cursor dhe më shumë.

Eksploroni Aftësitë

Filloni Tani Falas

Pse Vercel + Three.js + Aftësi AI Është Staku për Zhvillues të Vetëm

Vercel është objektivi më dembel i mundshëm për vendosje për një lojë Three.js. Dërgoni në GitHub, Vercel e vëren, ndërton projektin dhe ju kthen një URL brenda 60 sekondave. Asnjë server për të furnizuar, asnjë skedar Docker, asnjë konfigurim NGINX, asnjë konfigurim SSL. Paketimi Three.js është thjesht HTML statik, JS dhe asete WebGL, gjë që është pikërisht ajo për të cilën rrjeti i edge i Vercel u ndërtua për të shërbyer.

Niveli falas mbulon një lançim fundjavorë komod:

100 GB bandwidth në muaj. Një ndërtim Three.js 5 MB me 10,000 lojëra është 50 GB. Do të mbaroni fundjavën para se t'ju mbarojë bandwidth.
Vendosje statike të pakufizuara me HTTPS dhe një nëndomen *.vercel.app.
Mbështetje për domen të zakonshëm në nivelin falas - sillni tuajin emri-lojës.com nëse keni, përndryshe URL falas vercel.app është e ndashme në çdo platformë sociale.
Vendosje paraprake për çdo commit - çdo push merr URL-në e vet, kështu që mund të ndani një ndërtim me një mik dhe të vazhdoni të përtëritni pa e prishur atë.

Shtoni një aftësi AI nga Vibe Skills dhe materiali bazë gjithashtu zhduket. Konfigurimi i skenës Three.js, kontrolluesi i lojtarit, linja e ndërtimit dhe një vercel.json i gatshëm për Vercel gjenerohen me një komandë. Pastaj Cursor kthen pjesën tjetër të fundjavës në një bisedë ku ju përshkruani lojën që dëshironi dhe rregulloni rezultatin. Ky është staku i plotë: një aftësi tregu për themelin, një redaktor AI për iteracion dhe Vercel për vendosjen. Vetëm, falas dhe i shpejtë.

Vibe Skills

Shfletoni qindra aftësi të gatshme për Claude, Cursor dhe më shumë.

Eksploroni Aftësitë

Filloni Tani Falas

Anatomia 48-Orëshe: Koncepti i së Premtes Deri te Vendosja e së Dielës

Çdo dërgesë fundjave që del në fakt në jetë ndjek të njëjtat ritme. Truku është të planifikoni vendosjen të Premten, jo të Dielën pasdite, kështu që gjashtë orët e fundit të shkojnë në përfundim në vend që të luftoni një gabim ndërtimi.

Fazë	Bllok kohe	Çfarë bëni	Çfarë dërgohet në fund të fazës
Faza 1: Koncepti	E Premte 6pasdite - 10pasdite	Zgjidhni zhanrin, shkruani një dokument dizajni 1-faqësh, instaloni aftësinë e lojës 3D Vibe Skills, dërgoni starterin në GitHub, lidheni me Vercel	URL `emri-lojës.vercel.app` me skenën bazë
Faza 2: Ndërtimi	E Shtunë 9paradite - 8pasdite	Zëvendësoni vendin e mbushësit me mekanikën tuaj kryesore, shtoni 1 nivel, bëni që gjendja fituese/humbëse të funksionojë	Ndërtim i luajtshëm në të njëjtin URL Vercel, i vendosur automatikisht në çdo dërgim
Faza 3: Përfundimi	E Dielë 10paradite - 4pasdite	Zëri, lëngu, dritarja shfaqëse e mësimit, kalimi i gabimeve, kontrolli i performancës në celular	Një ndërtim që nuk prishet në 60 sekondat e para në asnjë pajisje
Faza 4: Lançimi	E Dielë 4pasdite - 8pasdite	Vendosni domen të zakonshëm (opsional), regjistroni GIF, shkruani faqen itch.io, postoni linkun	URL publik + faqe itch.io + postim lançimi në rrjetet sociale

Arsyeja pse kjo funksionon është dërgimi i së Premtes në Vercel. Sapo të ekzistojë URL-ja, çdo commit të Shtunës dhe të Dielës vendoset automatikisht. Nuk ka "panik të vendosjes të Dielën në mbrëmje" sepse vendosja tashmë ka ndodhur të Premten dhe ka funksionuar në autopilot gjatë gjithë fundjavës.

Si Duket "Programimi Vibezues" i një Lojë 3D në Vercel

Programimi vibezues do të thotë të përshkruash atë që dëshiron në anglisht të thjeshtë dhe të lësh një redaktor AI të shkruajë kodin, pastaj të përtërish rezultatin. Për një lojë Three.js në Vercel, cikli është jashtëzakonisht i pastër: çdo ndryshim në Cursor është një pnpm dev larg feedback-ut lokal, pastaj një git push larg një URL-je paraprake live, pastaj i vendosur automatikisht në prodhim në main.

Një fundjavë lojë Vercel e programuar vibezues duket kështu:

Hapni dosjen startuese të aftësisë në Cursor.
Përshkruani një veçori në bisedë: "kërcim të dyfishtë nëse hapësira shtypet dy herë brenda 200ms".
Cursor redakton skedarin e kontrolluesit. Ruani. pnpm dev rindryshon. Ju ndjeni kërcimin në shfletues.
Nëse duket mirë, git push. Vercel ndërton një URL paraprake. Dërgojeni atë te një mik.
Bashkoni në main kur ndjesia është e fiksuar. URL-ja e prodhimit përditësohet brenda 60 sekondave.

AI bën shkruarjen. Vercel bën vendosjen. Ju bëni ndjesinë dhe dizajnin.

5 Aftësi AI për Lojëra 3D Që E Bëjnë Të Mundur Këtë në Vibe Skills

Këto aftësi janë ndërtuar për fluksin e punës Vercel + Three.js + Cursor fundjavore. Secila prej tyre dërgon një projekt Three.js të bazuar në Vite, një vercel.json funksional, një pnpm build që prodhon një paketë statike që Vercel mund ta shërbejë nga edge, dhe një rrugë vendosjeje të testuar. Të gjitha janë në kategorinë Lojëra 3D në Vibe Skills.

1. Starter Lojë Three.js + Vercel

Zgjedhja standarde. Gjeneron një skenë Three.js me një kontrollues lojtari, kamera nga pas, konfigurim ndriçimi, skybox, dhe një plan tokësor me përplasje. Dërgon me një vercel.json që vendos titujt e duhur të caching-ut për paketimet e aseteve Three.js. pnpm dev funksionon lokalisht; një klikim në panelin e kontrollit të Vercel lidh repozitorin GitHub dhe ju keni një URL live.

Më e mira për: çdo zhanër përveç 2D të pastër. Përdoreni këtë nëse nuk e dini ende se çfarë po ndërtoni.

2. Walker Vercel me Vizore të Parë

Një kontrollues i rafinuar me vizore të parë (WASD + kyçja e miut + graviteti + vrapim + kërcim) me grepa këmbësh, lëvizje koke, dhe një vercel.json që trajton siç duhet titujt CSP të kyçjes së treguesit. Kjo gjë i ngatërron shumë zhvilluesit e vetëm në prodhim. Aftësia e zgjidh atë për ju.

Më e mira për: simuj të ecjes, prototipë horror, lojëra narrative, ekspozita muzeore.

3. Kit Arena Luftarak për Shfletues

Një arenë nga lart (kontrollues binjak me shigjeta, spawner valësh, AI bazë armiku, sistem predhash, HUD pikësh) me një ndërtim të rregulluar për Vercel që komprimon asetet, ndan kodin AI, dhe ngarkon muzikën me vonesë. Përfshin grepa multiplayer; fundjava dërgon një lojë për një lojtar.

Më e mira për: luftarakë arcade, ferr plumbash, hyrje jam që duhet të ngarkohen shpejt në celular.

4. Platformer Puzzle Vercel

Një platformer me vizore të tretë (kërcim i ndryshueshëm, kohë miu, zbulim skaje), pikë kontrolli, tre nivele stufë që mund t'i modifikoni në Blender ose me kod, dhe një cikël rigjenerimi. vercel.json është konfiguruar për rifurnizime të niveleve të ruajtura në cache në edge, kështu që testimi duket i shpejtë në një telefon.

Më e mira për: platformerë puzzle, prototipë parkour, eksperimente dizajni nivelesh.

5. Sandbox Drejtimi Vercel

Ndjesi drejtimi arcade (kurbë akcelerimi, fizikë drifti, vonesë kamera, terren bazë) me një makinë me pak poligonë, një shabllon piste, dhe një vendosje të rregulluar për rrjete tereni të mëdha. Titujt HTTP të paravendosur bëjnë që konteksti WebGL të fillojë më shpejt në Safari, historikisht shfletuesi më i ngadaltë për Three.js.

Më e mira për: gara arcade, drejtim jashtë rrugës, demo ndjesie makine për një portofol.

Shfletoni të gjitha aftësitë e lojërave 3D në Vibe Skills →

Hapat nga e Premtja në të Dielën

Ky është programi ekzakt. Rregulloni orën e fillimit, por mbajeni rendin. Pika kryesore e arritur është vendosja e Vercel të Premten në mbrëmje. Gjithçka pas kësaj është iteracion.

E Premte 6pasdite - 8pasdite: Zgjidhni Aftësinë, Dërgoni në GitHub, Lidhni Vercel

Hapi 1: Zgjidhni një aftësi loje 3D në Vibe Skills. Shfletoni kategorinë Lojëra 3D, zgjidhni atë që i përshtatet zhanrit tuaj, dhe instaloni starterin në një dosje të re. Hapeni atë në Cursor. Duhet të shihni një skenë Three.js me një lojtar që lëviz deri në orën 7 pasdite.

Hapi 2: Krijoni një repozitor GitHub dhe dërgoni. git init, git remote add, git push. Përdorni slug-un e lojës suaj si emrin e repozitorit (crystal-runner, lunar-fishing, çfarëdo). Emri i repozitorit shpesh bëhet URL-ja juaj.

Hapi 3: Lidhni repozitorin me Vercel. Identifikohuni në Vercel me GitHub (falas), klikoni "Add New Project", zgjidhni repozitorin. Vercel zbulon automatikisht Vite dhe konfiguron ndërtimin. Klikoni Deploy. Brenda 60 sekondave ju keni një URL crystal-runner.vercel.app. Hapeni në telefonin tuaj. Ndajeni me një mik. Shiriti i vendosjes tani është zero për pjesën tjetër të fundjavës.

E Premte 8pasdite - 10pasdite: Shkruani Dokumentin e Dizajnit

Hapi 4: Përgjigjjuni pesë pyetjeve në anglisht të thjeshtë. Hapni një faqe Notion ose një skedar markdown brenda repozitorit dhe përgjigjjuni:

Çfarë po bën lojtari çdo 5 sekonda? (cikli kryesor)
Cila është kushti i fitores dhe kushti i humbjes?
Sa kohë zgjat një lojë ose një nivel?
Cila është veçoria vizuale? (paleta, ndriçimi, referenca stili)
Cila është ajo veçori që e bën këtë të paharrueshme në 30 sekonda?

Hapi 5: Dërgoni dokumentin e dizajnit. Dërgoni atë në repozitor. Vercel do të vendosë përsëri. Disiplina e dërgimit të çdo ndryshimi domethënës mban URL-në live të ndershme.

E Shtunë 9paradite - 1paradite: Ndërtoni Mekanikën Kryesore

Hapi 6: Zëvendësoni mekanikën e vendit të mbushësit me veçorinë tuaj të vetme. Kjo është e vetmja veçori që ka rëndësi. Përdorni bisedën e Cursor për ta përshkruar ("kur lojtari merr një kristal, ngrini armiqtë aty pranë për 2 sekonda dhe luani një zile"). Përtërini lokalisht me pnpm dev. Kur të duket mirë, dërgoni.

Hapi 7: Lidhni gjendjen fituese/humbëse. Një ndërtim 60-sekondësh me një fund të vërtetë ndjehet si një lojë. Një ndërtim 60-minutësh pa fund ndjehet si një demo teknologjike. Gjithmonë lidhni ekranin e fitores së pari, pastaj gjithçka tjetër.

E Shtunë 1paradite - 8pasdite: Shtoni Një Nivel

Hapi 8: Ndërtoni një nivel të përfunduar. Jo tre të papërfunduar. Përdorni kube vendmbushëse për gjeometrinë. Përdorni personazhin standard të aftësisë. Rregulloni ndjesinë - lartësia e kërcimit, vonesa e kamerës, intensiteti i grimcave.

Hapi 9: Shtoni një shtresë mësimore. Një dritare shfaqëse dy-fjalëshe "WASD për të lëvizur, klikoni për të gjuajtur" në fillimin e parë kursen lançimin tuaj nga lojtarët e hutuar që dorëzohen pas 8 sekondash. Cursor mund të gjenerojë shtresën React (ose vanilla DOM) në 30 sekonda.

Hapi 10: Dërgoni çdo orë. Çdo dërgon merr një URL paraprake Vercel. Dërgojeni secilën te një mik. Cikli feedback është arma sekrete e këtij staku.

E Dielë 10paradite - 4pasdite: Përfundimi

Hapi 11: Shtoni tre zëra. Lëvizje këmbësh, ambient mbështetës, tingull fitoreje. Edhe tre zëra e ngrenë një prototip fundjavor dramatikisht. Burime falas: freesound.org, opengameart.org.

Hapi 12: Shtoni lëng. Grimca në goditje, dridhje ekrani në impakt, shifra që shfaqen në pikë. Lëngu është ai që e bën një ndërtim 48-orësh të duket si një 6-mujore në një GIF. Kërkojuni Cursor-it të shtojë "një dridhje ekrani me intensitet 0.3 për 150ms kur lojtari merr dëm" - ajo do të shkruajë grepin e dridhjes së kamerës në pesë sekonda.

Hapi 13: Bëni një kalim Lighthouse. Hapni URL-në Vercel në një telefon dhe hapni Chrome DevTools Lighthouse. Paketimet Three.js zakonisht janë rreth 400 KB deri në 1.5 MB. Nëse jeni mbi 3 MB, kërkojuni Cursor-it të aktivizojë ndarjen e kodit në modulet e rënda. Kompresimi gzip dhe brotli i Vercel do të kujdeset për pjesën tjetër.

Hapi 14: Kalim gabimesh. Luani URL-në tuaj live pesë herë radhazi. Rregulloni çdo gjë që prishet dy herë. Ignoroni çdo gjë që prishet një herë.

E Dielë 4pasdite - 8pasdite: Lançimi

Hapi 15: (Opsional) Vendosni një domen të zakonshëm. Nëse keni blerë një emri-lojës.com paraprakisht, shtojeni atë në cilësimet e projektit të Vercel. SSL është automatik. Përndryshe, URL *.vercel.app është në rregull - ka HTTPS, është e ndashme dhe ngarkohet kudo.

Hapi 16: Regjistroni një GIF 15-sekondësh të momentit më të mirë. Përdorni URL-në live, jo localhost. GIF-i është ai që klikohet në Twitter, Bluesky dhe Reddit.

Hapi 17: Krijoni një faqe itch.io (opsionale por me leverdi të lartë). Titull, slogan një-fjalësh, tre pamje ekrani, GIF-i, kontrollet, kreditë, dhe një embed të *.vercel.app tuajin në iframe (itch.io mbështet embeds iframe për lojëra HTML5). Tani keni dy URL-ë - një për ndarje rastësore dhe një për audiencën e lojtarëve.

Hapi 18: Postoni linkun. Twitter, Bluesky, Discordi juaj i komunitetit të zhvilluesve, r/IndieDev, r/threejs, r/WebGames. Gjithmonë filloni me GIF-in. Gjithmonë përfshini URL-në. Nëse keni përdorur një aftësi Vibe Skills, përmendeni atë në postimin e ditarit të zhvillimit - zhvilluesit e tjerë që lexojnë do të dëshirojnë të njëjtin starter.

Si Të Shmangni Tre Dështimet Më Të Shpeshta të Vendosjes në Vercel

Tre gjëra prishin pothuajse çdo fundjavë Three.js + Vercel të vetme. Të tre janë rregullime 5-minutëshe nëse i kapni të Premten në mbrëmje, dhe vrima gjigante 5-orëshe nëse i zbuloni të Dielën në orën 7 pasdite.

Drejtorija e gabuar e daljes së ndërtimit. Vite ka si parazgjedhje dist/. Vercel zbulon automatikisht Vite dhe përdor dist/. Nëse keni rregulluar daljen, vendosni outputDirectory në vercel.json ose cilësimet e projektit ose vendosja juaj do të jetë një 404.
Shtigjet e aseteve që funksionojnë lokalisht por 404 në prodhim. Përdorni shtigje relative ose ndihmësin Vite import.meta.env.BASE_URL për çdo skedar GLB, teksturë ose audio të ngarkuar në kohë ekzekutimi. Shtigjet e koduara fort /assets/... zakonisht funksionojnë, por shtigjet absolute të Windows të kopjuara e ngjitura absolutisht nuk do të funksionojnë.
Titujt CSP që bllokojnë kyçjen e treguesit ose kontekstin audio. Lojërat me vizore të parë kërkojnë kyçjen e treguesit. Audio kërkon aktivizim me gjest të përdoruesit. Çdo aftësi nga kategoria Lojëra 3D dërgon me bllokun e duhur headers në vercel.json për ta trajtuar këtë. Nëse keni shkruar tuajën nga e para, kopjoni konfigurimin nga repozitori i aftësisë.

Vendosja funksionon të Premten, kështu që kur këto prishen të Dielën, zakonisht është për shkak të një ndryshimi të fundit. git bisect është miku juaj. Edhe më mirë: vazhdoni të dërgoni çdo 30 minuta në mënyrë që commit-i i prishur të jetë i vogël.

Pyetje Të Shpeshta

A do të funksionojë me të vërtetë niveli falas i Vercel nëse loja ime merr trafik?

Po, për një lançim fundjavor dhe javët e para. Niveli falas ju jep 100 GB bandwidth në muaj, që është afërsisht 20,000 lojëra të një ndërtimi Three.js 5 MB. Nëse arrini atë kufi, plani Pro kushton 20$/muaj dhe ju shtyn në 1 TB. Për një dërgesë fundjave, falas është më se e mjaftueshme. Aftësitë në Vibe Skills dërgojnë me konfigurime ndërtimi që minimizojnë madhësinë e paketimit, gjë që e shtrin nivelin falas më tej.

A mund të përdor një domen të zakonshëm në nivelin falas të Vercel?

Po. Niveli falas mbështet domene të zakonshme me HTTPS automatik. Blini një domen (Namecheap, Cloudflare Registrar, Porkbun), drejtojeni drejt Vercel, dhe Vercel kujdeset për certifikatën SSL. Konfigurimi merr rreth 10 minuta. Nëse nuk keni një domen, URL emri-lojës.vercel.app është e mjaftueshme e shkurtër për t'u ndarë në çdo platformë.

A është ky stak i mirë për një dorëzim loje?

Po, dhe është një nga staket më të mira për dorëzime lojesh. Shumica e lojërave (Ludum Dare, GMTK, js13k, GitHub Game Off) pranojnë çdo URL të luajtshme në internet. Një link *.vercel.app funksionon ekzaktësisht si një URL itch.io për gjyqtarët. Shumë fitues të lojërave dërgojnë në të dyja - itch.io për audiencën e lojtarëve, Vercel si URL kanonike e shpejtë.

A kam nevojë të di Three.js para se të filloj?

Keni nevojë për aq JavaScript sa për të lexuar atë që shkruan Cursor dhe për të rregulluar vlerat. Nuk keni nevojë të shkruani Three.js nga e para. Aftësitë në Vibe Skills gjenerojnë konfigurimin e motorit, kamerën, kontrolluesin dhe konfigurimin e ndërtimit. Cursor kujdeset për kodin e lojës nga përshkrimet tuaja.

Çfarë ndodh nëse vendosja ime në Vercel dështon të Dielën në orën 7 pasdite?

Shkaku më i zakonshëm është një gabim TypeScript ose një variabël mjedisi i munguar. Vercel tregon logun e ndërtimit me vijën e dështuar të theksuar. Një klikim në panelin e kontrollit kthehet te vendosja e fundit funksionale dhe e promovon atë në prodhim. Duke qenë se çdo dërgim është një vendosje paraprake, ju jeni gjithmonë brenda një commit nga një ndërtim funksional. Kjo është arsyeja pse dërgimi çdo 30 minuta të Shtunën dhe të Dielën ka rëndësi.

A mund të shes ose modifikoj kodin nga një aftësi loje 3D Vibe Skills?

Po. Aftësitë në Vibe Skills dërgojnë me një licencë miqësore për tregtinë që ju lejon të publikoni kodin në lojën tuaj në Vercel, itch.io, Steam, ose kudo tjetër. Krijuesit mbajnë pronësinë intelektuale të aftësisë, ju mbani pronësinë intelektuale të lojës së ndërtuar mbi të.

Po nëse nuk dua të përdor Cursor?

Çdo redaktor AI që mund të modifikojë skedarë projekti funksionon. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - cilido prej tyre mund të përtërijë strukturën Three.js nga një aftësi Vibe Skills. Vetë aftësia është e pavarur nga redaktori.

Dërgojeni Këtë Fundjavë

Arsyeja pse shumica e zhvilluesve të vetëm nuk dërgojnë kurrë një lojë 3D nuk është motori, zhanri, apo niveli i aftësisë. Është e Premtja në mbrëmje kur ata "vetëm hulumtojnë pak më shumë" dhe kurrë nuk fillojnë. Fundjavën e ardhshme që keni të lirë, ndiqni planin me katër faza: instaloni një aftësi loje 3D Vibe Skills, dërgoni në GitHub, lidhni Vercel, vendoseni deri të Premten në orën 8 pasdite, pastaj kaloni të Shtunën dhe të Dielën duke përtërirë në një URL live.

Portofoli juaj me dhjetë lojëra të dërguara fundjavore në Vercel është më i vlefshëm se projekti juaj hipotetik i ëndrrave gjashtë-mujore të motorit. Ajo e dërguara gjithmonë fiton. URL falas e Vercel është prova.

Shfletoni aftësi lojërash 3D në Vibe Skills →

Kalo maratonën e materialit bazë Three.js. Instaloni një aftësi loje 3D në Vibe Skills, dërgoni në Vercel, dhe keni një URL live deri të Dielën në mbrëmje.