Slik publiserer du et 3D-spill på Vercel denne helgen (med AI-ferdigheter)

Vibe Skills

Bla gjennom hundrevis av ferdige ferdigheter for Claude, Cursor og mer.

Utforsk ferdigheter

Start gratis nå

Publiser et 3D-spill på Vercel innen søndag kveld: 48-timers utgivelsesplanen

Du kan gå fra en tom fredagskveld til en lenke som ditt-spill.vercel.app innen søndagsmiddag. Stabelen er Three.js, Cursor, en AI-ferdighet fra Vibe Skills, og Vercel gratisnivå. Total kostnad for helgen: 0 dollar. Total infrastruktur du må passe på: også null.

Dette er ikke "bygg en prototype på laptopen din og kall det ferdig". Dette er en offentlig URL alle i verden kan åpne i nettleseren, med HTTPS, kant-mellomlagring og et egendefinert domene hvis du vil ha det. AI-ferdigheten utgir Three.js-skjelettet og en fungerende vercel.json. Cursor håndterer iterasjonsløkken. Vercel håndterer utgivelsen. Du håndterer designet.

Denne guiden er for indie-utviklere, "vibe coders", hackathon-deltakere, og alle som er lei av halvferdige localhost:5173-faner. Vi dekker hvorfor denne stabelen fungerer, 48-timers utgivelsesanatomien, fem 3D-spillferdigheter bygget for arbeidsflyten, og steg-for-steg-guiden fra fredag til søndag.

Vibe Skills

Bla gjennom hundrevis av ferdige ferdigheter for Claude, Cursor og mer.

Utforsk ferdigheter

Start gratis nå

Hvorfor Vercel + Three.js + AI-ferdigheter er Solo-utviklerens Stabel

Vercel er det minst krevende utgivelsesmålet for et Three.js-spill. Send til GitHub, Vercel merker det, bygger prosjektet, og gir deg tilbake en URL innen 60 sekunder. Ingen server å provisjonere, ingen Dockerfil, ingen NGINX-konfigurasjon, ingen SSL-oppsett. Three.js-pakken er bare statisk HTML, JS og WebGL-ressurser, som er nøyaktig det Vercels kantnettverk ble bygget for å levere.

Gratisnivået dekker en helgeutgivelse komfortabelt:

• 100 GB båndbredde per måned. En 5 MB Three.js-bygging med 10 000 spill er 50 GB. Du vil gå tom for helg før du går tom for båndbredde.
• Ubegrensede statiske utgivelser med HTTPS og et *.vercel.app-underdomene.
• Støtte for egendefinert domene på gratisnivået - bruk ditt eget navn-spill.com hvis du har et, ellers er den gratis vercel.app-URLen delbar på alle sosiale plattformer.
• Forhåndsvisningsutgivelser for hver commit - hver push får sin egen URL, slik at du kan dele en bygging med en venn og fortsette å iterere uten å bryte den.

Legg til en AI-ferdighet fra Vibe Skills og standardkoden forsvinner også. Three.js-scenetilpasning, spillerkontroller, bygg-pipeline og en Vercel-klar vercel.json genereres med én kommando. Deretter gjør Cursor resten av helgen om til en chat der du beskriver spillingen du ønsker og finjusterer resultatet. Det er den komplette stabelen: en markedsplassferdighet for grunnlaget, en AI-editor for iterasjon, og Vercel for utgivelsen. Alene, gratis og raskt.

Vibe Skills

Bla gjennom hundrevis av ferdige ferdigheter for Claude, Cursor og mer.

Utforsk ferdigheter

Start gratis nå

48-timers Anatomi: Fredagskonsept til Søndagsutgivelse

Hver helgeutgivelse som faktisk blir levende, følger de samme trinnene. Trikset er å planlegge utgivelsen på fredag, ikke søndag ettermiddag, slik at de siste seks timene går til polering i stedet for å kjempe mot en byggefeil.

Grunnen til at dette fungerer, er fredagens push til Vercel. Når URLen eksisterer, utgis hver lørdags- og søndagscocommit automatisk. Det er ingen "søndagskveld-utgivelsespaniikk" fordi utgivelsen allerede skjedde på fredag og har kjørt på autopilot hele helgen.

Hvordan "Vibe Coding" et 3D-spill på Vercel Ser Ut

Vibe coding betyr å beskrive hva du ønsker på vanlig engelsk og la en AI-editor skrive koden, deretter iterere på resultatet. For et Three.js-spill på Vercel er sløyfen uvanlig ren: hver endring i Cursor er en pnpm dev-kommando unna lokal tilbakemelding, deretter en git push unna en live forhåndsvisnings-URL, deretter automatisk utgitt til produksjon på main.

En vibe-codet Vercel-spillhelg ser slik ut:

1. Åpne skillens startmappe i Cursor.
2. Beskriv en funksjon i chatten: "dobbelt hopp hvis mellomrom trykkes to ganger innen 200 ms".
3. Cursor redigerer kontrollfilen. Lagre. pnpm dev laster inn på nytt. Du føler hoppet i nettleseren.
4. Hvis det føles riktig, git push. Vercel bygger en forhåndsvisnings-URL. Send den til en venn.
5. Slå sammen til main når følelsen er låst. Produksjons-URLen oppdateres innen 60 sekunder.

AI-en gjør skrivinga. Vercel gjør utgivelsen. Du gjør følelsen og designet.

5 AI 3D-spillferdigheter som Gjør Dette Mulig på Vibe Skills

Disse ferdighetene er bygget for Vercel + Three.js + Cursor helgearbeidsflyten. Hver av dem leverer et Vite-basert Three.js-prosjekt, en fungerende vercel.json, en pnpm build som produserer en statisk pakke Vercel kan levere fra kanten, og en testet utgivelsesbane. Alle er i 3D Games-kategorien på Vibe Skills.

1. Three.js + Vercel Game Starter

Standardvalget. Genererer en Three.js-scene med en spillerkontroller, tredjeperson-kamera, lysrigg, skyboks og et bakkeplan med kollisjoner. Leveres med en vercel.json som setter de riktige cache-overskriftene for Three.js ressurs-pakker. pnpm dev kjører lokalt; ett klikk i Vercel-dashbordet kobler til GitHub-repoet, og du har en live URL.

Best for: Enhver sjanger unntatt ren 2D. Bruk denne hvis du ennå ikke vet hva du bygger.

2. Førstepersons Vercel-vandrer

En polert førstepersonskontroller (WASD + musepekerlås + tyngdekraft + sprint + hopp) med fottrinnkroker, hodebevegelse og en vercel.json som håndterer CSP-overskriftene for pekerlås korrekt. Denne feiler mange solo-utviklere i produksjon. Ferdigheten løser det for deg.

Best for: Vandresimulatorer, skrekkprototyper, narrative spill, museumutstillinger.

3. Nettleser Arena-skytespillsett

En topp-ned arena (tvilling-styrespak, bølge-spawner, grunnleggende fiendtlig AI, prosjektilsystem, poeng-HUD) med en Vercel-tilpasset bygging som komprimerer ressurser, koder deler av AI-en, og laster musikk ved behov. Flerspillertilkoblinger inkludert; helgen leverer en enspiller.

Best for: Arkadeskytespill, kulehelvete, jam-bidrag som må laste raskt på mobil.

4. Vercel Puzzle Platformer

En tredjeperson-plattformer (variabelt hopp, coyote-tid, kantenkjenning), sjekkpunkter, tre stub-nivåer du kan redigere i Blender eller i kode, og en respawn-løkke. vercel.json er konfigurert for umiddelbar kant-mellomlagret nivå-reloading, slik at testing føles raskt på telefonen.

Best for: Puzzle-plattformspill, parkour-prototyper, nivå-designeksperimenter.

5. Vercel Kjøre-sandkasse

Arkade kjørefølelse (akselerasjonskurve, drift-fysikk, kamerforsinkelse, grunnleggende terreng) med en lav-poly bil, en banemalte, og en utgivelse optimalisert for store terrengmodeller. Forhåndsinnstilte HTTP-overskrifter får WebGL-konteksten til å starte raskere på Safari, historisk sett den tregeste nettleseren for Three.js.

Best for: Arkaderacing, terrengkjøring, bil-følelse demoer for en portefølje.

Bla gjennom alle 3D-spillferdigheter på Vibe Skills →

Fredag til Søndag Steg-for-Steg

Dette er den nøyaktige planen. Juster starttiden, men behold rekkefølgen. Den viktigste milepælen er fredagskveldens Vercel-utgivelse. Alt etter det er iterasjon.

Fredag 18:00 - 20:00: Velg Ferdighet, Push til GitHub, Koble til Vercel

Trinn 1: Velg en 3D-spillferdighet på Vibe Skills. Bla gjennom 3D Games-kategorien, velg den som matcher sjangeren din, og installer startkoden i en ny mappe. Åpne den i Cursor. Du bør se en Three.js-scene med en bevegelig spiller innen 19:00.

Trinn 2: Opprett et GitHub-repo og push. git init, git remote add, git push. Bruk sluggen av spillet ditt som repo-navn (krystall-løper, måne-fiske, hva som helst). Repo-navnet blir ofte URLen din.

Trinn 3: Koble repoet til Vercel. Logg inn på Vercel med GitHub (gratis), klikk "Add New Project", velg repoet. Vercel oppdager automatisk Vite og konfigurerer byggingen. Klikk Deploy. Innen 60 sekunder har du en krystall-løper.vercel.app-URL. Åpne den på telefonen din. Del med én venn. Utgivelseslinjen er nå null for resten av helgen.

Fredag 20:00 - 22:00: Skriv Design-dokumentet

Trinn 4: Svar på fem spørsmål på vanlig engelsk. Åpne en Notion-side eller en markdown-fil inne i repoet og svar:

• Hva gjør spilleren hvert 5. sekund? (kjernesløyfen)
• Hva er vinnerbetingelsen og taperbetingelsen?
• Hvor lang tid tar ett spill eller ett nivå?
• Hva er det visuelle "kroken"? (palett, lyssetting, stilreferanse)
• Hva er den ene funksjonen som gjør dette minneverdig på 30 sekunder?

Trinn 5: Commit design-dokumentet. Push det til repoet. Vercel vil gi ut på nytt. Disiplinen med å pushe hver meningsfulle endring holder live-URLen ærlig.

Lørdag 09:00 - 13:00: Bygg Kjernemekanikken

Trinn 6: Erstatt plassholder-mekanikken med din ene funksjon. Dette er den eneste funksjonen som betyr noe. Bruk Cursor chat for å beskrive den ("når spilleren plukker opp en krystall, frys nærliggende fiender i 2 sekunder og spill en bjelle"). Iterer lokalt med pnpm dev. Når det føles riktig, push.

Trinn 7: Koble til vinn-/tap-tilstanden. En 60-sekunders bygging med en ekte avslutning føles som et spill. En 60-minutters bygging uten avslutning føles som en teknisk demo. Koble alltid til vinnerskjermen først, deretter alt annet.

Lørdag 13:00 - 20:00: Legg til Ett Nivå

Trinn 8: Bygg ett polert nivå. Ikke tre halvbakte. Bruk standardkuber for geometri. Bruk skillens standardkarakter. Juster følelsen - hopphøyde, kamerforsinkelse, partikkelintensitet.

Trinn 9: Legg til et opplærings-overlay. En to-setnings "WASD for å bevege deg, klikk for å skyte"-popup ved første lansering redder lanseringen din fra forvirrede spillere som gir opp på 8 sekunder. Cursor kan generere React- (eller ren DOM-) overlayet på 30 sekunder.

Trinn 10: Push hver time. Hver push får en Vercel forhåndsvisnings-URL. Send hver av dem til en venn. Tilbakemeldingsløkken er hemmeligheten bak denne stabelen.

Søndag 10:00 - 16:00: Polering

Trinn 11: Legg til tre lyder. Fottrinnsløkke, omgivelseslyd, vinn-signatur. Selv tre lyder løfter en helgeprototype dramatisk. Gratis kilder: freesound.org, opengameart.org.

Trinn 12: Legg til "juice". Partikler ved treff, skjermrystelser ved slag, tall-poppups ved poeng. Juice er det som får en 48-timers bygging til å se ut som en 6-måneders bygging i en GIF. Be Cursor om å legge til "en skjermrystelse med intensitet 0.3 i 150ms når spilleren tar skade" - den vil skrive kameraryste-kroken på fem sekunder.

Trinn 13: Kjør en Lighthouse-gjennomgang. Åpne Vercel-URLen på en telefon og kjør Chrome DevTools Lighthouse. Three.js-pakker er vanligvis rundt 400 KB til 1.5 MB. Hvis du er over 3 MB, be Cursor om å aktivere kodeparsing for de tunge modulene. Vercels gzip og brotli tar seg av resten.

Trinn 14: Feilsøkingsrunde. Spill live-URLen din fem ganger på rad. Fiks alt som feiler to ganger. Ignorer alt som feiler én gang.

Søndag 16:00 - 20:00: Lansering

Trinn 15: (Valgfritt) Sett opp et egendefinert domene. Hvis du kjøpte et navn-spill.com på forhånd, legg det til i Vercels prosjektinnstillinger. SSL er automatisk. Ellers er *.vercel.app-URLen fin - den har HTTPS, den er delbar, og den lastes inn overalt.

Trinn 16: Ta opp en 15-sekunders GIF av det beste øyeblikket. Bruk live-URLen, ikke localhost. GIF-en er det som blir klikket på Twitter, Bluesky og Reddit.

Trinn 17: Opprett en itch.io-side (valgfritt, men høy verdi). Tittel, en linjes slagord, tre skjermbilder, GIF-en, kontroller, kreditter, og en innebygd av *.vercel.app-iframe (itch.io støtter iframe-innebygginger for HTML5-spill). Nå har du to URL-er - en for uformell deling og en for spillermålgruppen.

Trinn 18: Post lenken. Twitter, Bluesky, din utvikler-community Discord, r/IndieDev, r/threejs, r/WebGames. Led alltid med GIF-en. Inkluder alltid URLen. Hvis du brukte en Vibe Skills-ferdighet, nevn det i utviklingslogg-innlegget - andre utviklere som leser vil ønske seg den samme startkoden.

Slik Unngår Du de Tre Vanligste Vercel Utgivelsesfeilene

Tre ting ødelegger nesten enhver solo Three.js + Vercel helg. Alle tre er 5-minutters fikser hvis du fanger dem på fredagskveld, og 5-timers kaninhull hvis du oppdager dem søndag kl. 19:00.

• Feil byggutmatingsmappe. Vite standard er dist/. Vercel oppdager automatisk Vite og bruker dist/. Hvis du har tilpasset utdataene, sett outputDirectory i vercel.json eller prosjektinnstillingene, ellers blir utgivelsen din en 404.
• Ressursstier som fungerer lokalt, men gir 404 i produksjon. Bruk relative stier eller Vite import.meta.env.BASE_URL-hjelpeverktøyet for eventuelle GLB-, tekstur- eller lydfiler som lastes inn under kjøring. Hardkodede /assets/...-stier fungerer vanligvis, men kopierte absolutte Windows-stier vil absolutt ikke gjøre det.
• CSP-overskrifter som blokkerer pekerlås eller lydkontekst. Førstepersonsspill trenger pekerlås. Lyd krever aktivering med brukergest. Enhver ferdighet fra 3D Games-kategorien leveres med riktig headers-blokk i vercel.json for å håndtere dette. Hvis du skrev din egen fra bunnen av, kopier konfigurasjonen fra skillens repo.

Utgivelsen fungerer på fredag, så når disse feiler på søndag, skyldes det alltid en nylig endring. git bisect er din venn. Enda bedre: fortsett å pushe hver 30. minutt slik at den ødelagte commiten er liten.

Ofte Stillete Spørsmål

Vil Vercels gratisnivå virkelig holde hvis spillet mitt får trafikk?

Ja, for en helgeutgivelse og de første ukene. Gratisnivået gir deg 100 GB båndbredde per måned, noe som er omtrent 20 000 spill av en 5 MB Three.js-bygging. Hvis du treffer taket, koster Pro-planen $20/måned og øker deg til 1 TB. For en helgeutgivelse er gratis mer enn nok. Ferdigheter på Vibe Skills leveres med byggkonfigurasjoner som minimerer pakkestørrelsen, noe som strekker gratisnivået lenger.

Kan jeg bruke et egendefinert domene på Vercels gratisnivå?

Ja. Gratisnivået støtter egendefinerte domener med automatisk HTTPS. Kjøp et domene (Namecheap, Cloudflare Registrar, Porkbun), pek det mot Vercel, og Vercel håndterer SSL-sertifikatet. Oppsettet tar omtrent 10 minutter. Hvis du ikke har et domene, er navn-spill.vercel.app-URLen kort nok til å deles på alle plattformer.

Er denne stabelen OK for et spill-jam-bidrag?

Ja, og det er en av de beste stablene for jam-bidrag. De fleste jam-konkurranser (Ludum Dare, GMTK, js13k, GitHub Game Off) godtar enhver spillbar nettlenke. En *.vercel.app-lenke fungerer akkurat som en itch.io-URL for dommere. Mange jam-vinnere utgir til begge - itch.io for spillermålgruppen, Vercel som den raske kanoniske URLen.

Må jeg kunne Three.js før jeg starter?

Du trenger nok JavaScript til å lese hva Cursor skriver og justere verdier. Du trenger ikke å skrive Three.js fra bunnen av. Ferdighetene på Vibe Skills genererer motor-oppsettet, kamera, kontroller og byggkonfigurasjon. Cursor håndterer spillkoden fra dine beskrivelser.

Hva skjer hvis Vercel-byggingen min feiler på søndag kl. 19:00?

Den vanligste årsaken er en TypeScript-feil eller en manglende miljøvariabel. Vercel viser bygge-loggen med den feilende linjen uthevet. Ett klikk i dashbordet ruller tilbake til den sist fungerende utgivelsen og promoterer den til produksjon. Fordi hver push er en forhåndsvisningsutgivelse, er du aldri mer enn én commit unna en fungerende bygging. Derfor er det viktig å pushe hver 30. minutt på lørdag og søndag.

Kan jeg selge eller endre koden fra en Vibe Skills 3D-spillferdighet?

Ja. Ferdigheter på Vibe Skills leveres med en kommersielt vennlig lisens som lar deg utgi koden i ditt eget spill på Vercel, itch.io, Steam eller hvor som helst ellers. Skaperne beholder immateriell eiendom for ferdigheten, du beholder immateriell eiendom for spillet bygget oppå.

Hva om jeg ikke vil bruke Cursor?

Enhver AI-editor som kan redigere prosjektfiler fungerer. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - hvilken som helst av dem kan iterere på Three.js-skjelettet fra en Vibe Skills-ferdighet. Selve ferdigheten er editor-agnostisk.

Publiser Den Denne Helgen

Grunnen til at de fleste solo-utviklere aldri publiserer et 3D-spill, er ikke motoren, sjangeren eller ferdighetstaket. Det er fredag kveld hvor de "bare forsker litt mer" og aldri starter. Neste ledige helg du har, følg fire-fase planen: installer en Vibe Skills 3D-spillferdighet, push til GitHub, koble til Vercel, utgi innen fredag kl. 20:00, og bruk deretter lørdag og søndag på å iterere på en live URL.

Porteføljen din med ti helge-utgitte spill på Vercel er verdt mer enn ditt hypotetiske drømmeprosjekt med en seks-måneders motor. Det utgitte vinner alltid. Den gratis Vercel-URLen er beviset.

Bla gjennom 3D-spillferdigheter på Vibe Skills →

Hopp over Three.js standardkode-maraton. Installer en 3D-spillferdighet på Vibe Skills, push til Vercel, og ha en live URL innen søndag kveld.