Sådan udgiver du et 3D-spil på Vercel i denne weekend (med AI-færdigheder)

Vibe Skills

Gennemse hundredvis af færdiglavede færdigheder til Claude, Cursor og mere.

Udforsk Færdigheder

Start Gratis Nu

Udgiv et 3D-spil på Vercel inden søndag aften: 48-timers udgivelsesmanual

Du kan gå fra en tom fredag aften til et link som dit-spil.vercel.app inden søndagsmiddag. Stacket er Three.js, Cursor, en AI-kompetence fra Vibe Skills og Vercel's gratis niveau. Samlet omkostning for weekenden: 0 kr. Samlet infrastruktur du skal passe: også nul.

Dette er ikke "byg en prototype på din bærbare computer og kald det færdigt". Dette er en offentlig URL, som enhver i verden kan åbne i en browser, med HTTPS, edge caching og et brugerdefineret domæne, hvis du ønsker det. AI-kompetencen udgiver Three.js stilladser og en fungerende vercel.json. Cursor håndterer iterationsløkken. Vercel håndterer udgivelsen. Du håndterer designet.

Denne guide er for indie-udviklere, vibe-kodere, hackathon-deltagere og alle, der er trætte af halvfærdige localhost:5173 faner. Vi gennemgår, hvorfor denne stack virker, 48-timers udgivelsesanatomien, fem 3D-spilkompetencer bygget til arbejdsgangen og trin-for-trin fra fredag til søndag.

Vibe Skills

Gennemse hundredvis af færdiglavede færdigheder til Claude, Cursor og mere.

Udforsk Færdigheder

Start Gratis Nu

Hvorfor Vercel + Three.js + AI-kompetencer er Solo-udvikler Stacken

Vercel er det mest dovne mulige udgivelsesmål for et Three.js-spil. Skub til GitHub, Vercel bemærker det, bygger projektet og giver dig en URL tilbage inden for 60 sekunder. Ingen server at provisionere, ingen Docker-fil, ingen NGINX-konfiguration, ingen SSL-opsætning. Three.js-bundlen er blot statisk HTML, JS og WebGL-aktiver, hvilket er præcis, hvad Vercels edge-netværk blev bygget til at tjene.

Gratis niveauet dækker en weekendlancering komfortabelt:

• 100 GB båndbredde per måned. En 5 MB Three.js-build ved 10.000 spil er 50 GB. Du løber tør for weekenden, før du løber tør for båndbredde.
• Ubgrænsede statiske udgivelser med HTTPS og et *.vercel.app subdomæne.
• Brugerdefinerede domæner support på gratis niveau - medbring din egen navn-spil.com, hvis du har en, ellers er den gratis vercel.app URL delelig på alle sociale platforme.
• Forhåndsvisningsudgivelser for hver commit - hver push får sin egen URL, så du kan dele et build med en ven og fortsætte med at iterere uden at ødelægge det.

Tilføj en AI-kompetence fra Vibe Skills, og boilerplate forsvinder også. Three.js sceneopsætning, spillerkontrol, build pipeline og en Vercel-klar vercel.json genereres med én kommando. Derefter gør Cursor resten af weekenden til en chat, hvor du beskriver det gameplay, du ønsker, og finjusterer outputtet. Det er den fulde stack: en markedsplads-kompetence til fundamentet, en AI-editor til iteration og Vercel til udgivelsen. Solo, gratis og hurtigt.

Vibe Skills

Gennemse hundredvis af færdiglavede færdigheder til Claude, Cursor og mere.

Udforsk Færdigheder

Start Gratis Nu

48-timers Anatomien: Fredags Koncept til Søndags Udgivelse

Hver weekendudgivelse, der rent faktisk går live, følger de samme trin. Tricket er at planlægge udgivelsen fredag, ikke søndag eftermiddag, så de sidste seks timer går til polering i stedet for at kæmpe med en build-fejl.

Grunden til at dette virker, er fredagens push til Vercel. Når URL'en eksisterer, udgives hver lørdag og søndag commit automatisk. Der er ingen "søndag aften udgivelsespanik", fordi udgivelsen allerede skete fredag og har kørt på autopilot hele weekenden.

Hvordan "Vibe Coding" af et 3D-spil på Vercel ser ud

Vibe coding betyder at beskrive, hvad du ønsker, på almindeligt engelsk og lade en AI-editor skrive koden, derefter iterere på outputtet. For et Three.js-spil på Vercel er løkken usædvanligt ren: hver ændring i Cursor er en pnpm dev væk fra lokal feedback, derefter en git push væk fra en live forhåndsvisnings-URL, derefter automatisk udgivet til produktion på main.

En vibe-codet Vercel spilweekend ser sådan ud:

1. Åbn kompetencens startmappe i Cursor.
2. Beskriv en funktion i chatten: "dobbeltspring hvis mellemrum trykkes to gange inden for 200 ms".
3. Cursor redigerer controllerfilen. Gem. pnpm dev genindlæses. Du mærker springet i browseren.
4. Hvis det føles rigtigt, git push. Vercel bygger en forhåndsvisnings-URL. Send den til en ven.
5. Merge til main, når følelsen er låst. Produktions-URL opdateres inden for 60 sekunder.

AI'en laver tastningen. Vercel laver udgivelsen. Du laver følelsen og designet.

5 AI 3D Spilkompetencer der gør dette muligt på Vibe Skills

Disse kompetencer er bygget til Vercel + Three.js + Cursor weekend-workflowet. Hver leveres med et Vite-baseret Three.js-projekt, en fungerende vercel.json, en pnpm build, der producerer en statisk bundle, som Vercel kan tjene fra kanten, og en testet udgivelsessti. Alle er i 3D Games kategorien på Vibe Skills.

1. Three.js + Vercel Spil Starter

Standardvalget. Genererer en Three.js-scene med en spillerkontrol, tredjepersonskamera, lysrig, skybox og et jordplan med kollisioner. Leveres med en vercel.json, der indstiller de rigtige cache-headers for Three.js aktiv-bundler. pnpm dev kører lokalt; et klik i Vercel-dashboardet forbinder GitHub-repoet, og du har en live URL.

Bedst til: enhver genre undtagen ren 2D. Brug denne, hvis du endnu ikke ved, hvad du bygger.

2. Førstepersons Vercel Gåmaskine

En poleret førstepersonskontrol (WASD + musemarkør-lås + tyngdekraft + sprint + hop) med fodtrins-hooks, hovedrysten og en vercel.json, der håndterer CSP-headers for markør-lås korrekt. Denne får mange solo-udviklere til at snuble i produktion. Kompetencen løser det for dig.

Bedst til: gåsimuleringer, horror-prototyper, narrative spil, museumsudstillinger.

3. Browser Arena Shooter Kit

En top-down arena (twin-stick kontrol, bølge-generator, grundlæggende fjende-AI, projektilsystem, score-HUD) med et Vercel-tunet build, der gzips aktiver, kode-splitter AI'en og indlæser musik langsomt. Multiplayer-hooks inkluderet; weekenden leverer singleplayer.

Bedst til: arkadeskydespil, bullet hell, jam-bidrag, der skal indlæses hurtigt på mobil.

4. Vercel Puzzle Platformer

En tredjepersons platformer (variabelt hop, coyote time, afsatser-detektion), checkpoints, tre stub-baner, du kan redigere i Blender eller i kode, og en respawn-løkke. vercel.json er konfigureret til øjeblikkelige, edge-cached bane-genindlæsninger, så playtesting føles hurtigt på en telefon.

Bedst til: puzzle platformere, parkour-prototyper, bane-design-eksperimenter.

5. Vercel Driving Sandbox

Arkade-kørefornemmelse (accelerationskurve, drift-fysik, kamerahale, grundlæggende terræn) med en lavpoly bil, en bane-skabelon og en udgivelse tunet til store terræn-meshes. Forudindstillede HTTP-headers får WebGL-konteksten til at starte hurtigere på Safari, historisk set den langsomste browser for Three.js.

Bedst til: arkade-racerspil, off-road kørsel, bil-følelse demoer til en portefølje.

Gennemse alle 3D-spilkompetencer på Vibe Skills →

Fredag til Søndag Trin for Trin

Dette er den præcise tidsplan. Juster starttidspunktet, men bevar rækkefølgen. Den vigtigste milepæl er fredag aften Vercel-udgivelsen. Alt derefter er iteration.

Fredag 18:00 - 20:00: Vælg Kompetence, Push til GitHub, Forbind Vercel

Trin 1: Vælg en 3D-spilkompetence på Vibe Skills. Gennemse 3D Games kategorien, vælg den, der passer til din genre, og installer starteren i en ny mappe. Åbn den i Cursor. Du bør se en Three.js-scene med en bevægende spiller kl. 19:00.

Trin 2: Opret et GitHub repo og push. git init, git remote add, git push. Brug din spils slug som repo-navn (crystal-runner, lunar-fishing, hvad end). Repo-navnet bliver ofte din URL.

Trin 3: Forbind repoet til Vercel. Log ind på Vercel med GitHub (gratis), klik på "Add New Project", vælg repoet. Vercel registrerer automatisk Vite og konfigurerer build'et. Klik på Deploy. Inden for 60 sekunder har du en crystal-runner.vercel.app URL. Åbn den på din telefon. Del med én ven. Udgivelseslinjen er nu nul for resten af weekenden.

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

Trin 4: Besvar fem spørgsmål på almindeligt engelsk. Åbn en Notion-side eller en markdown-fil inde i repoet og besvar:

• Hvad laver spilleren hvert 5. sekund? (kerne-loopet)
• Hvad er vind-betingelsen og tab-betingelsen?
• Hvor lang tid tager et løb eller en bane?
• Hvad er den visuelle krog? (farvepalet, lys, stilreference)
• Hvad er den ene funktion, der gør dette mindeværdigt på 30 sekunder?

Trin 5: Commit design-dokumentet. Push det til repoet. Vercel vil gen-udgive. Disciplinen med at pushe hver meningsfulde ændring holder den live URL ærlig.

Lørdag 09:00 - 13:00: Byg Kerne-mekanikken

Trin 6: Erstat pladsholder-mekanikken med din ene funktion. Dette er den eneste funktion, der betyder noget. Brug Cursor-chat til at beskrive den ("når spilleren samler en krystal, fryser fjender i nærheden i 2 sekunder og spiller en klokke"). Iterer lokalt med pnpm dev. Når det føles rigtigt, push.

Trin 7: Tilslut vind/tab-tilstanden. Et 60-sekunders build med en reel afslutning føles som et spil. Et 60-minutters build uden afslutning føles som en teknisk demo. Tilslut altid vind-skærmen først, derefter alt andet.

Lørdag 13:00 - 20:00: Tilføj Én Bane

Trin 8: Byg én poleret bane. Ikke tre halvt bagt. Brug pladsholder-kuber til geometri. Brug kompetencens standard-karakter. Finjuster følelsen - hophøjde, kamerahale, partikelintensitet.

Trin 9: Tilføj et tutorial-overlay. En to-sætnings "WASD for at bevæge dig, klik for at skyde" popup ved første opstart redder din lancering fra forvirrede spillere, der giver op på 8 sekunder. Cursor kan generere React (eller vanilla DOM) overlayet på 30 sekunder.

Trin 10: Push hver time. Hver push får en Vercel forhåndsvisnings-URL. Send hver af dem til en ven. Feedback-løkken er denne stacks hemmelige våben.

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

Trin 11: Tilføj tre lyde. Fodtrins-loop, ambient pad, vinder-lyd. Selv tre lyde løfter en weekend-prototype dramatisk. Gratis kilder: freesound.org, opengameart.org.

Trin 12: Tilføj juice. Partikler ved træf, skærmrystelser ved stød, tal-popups på score. Juice er det, der får et 48-timers build til at ligne et 6-måneders i en GIF. Spørg Cursor om at tilføje en "skærmrystelse med intensitet 0.3 i 150ms, når spilleren tager skade" - den vil skrive kameraryste-hook'et på fem sekunder.

Trin 13: Kør en Lighthouse-passage. Åbn Vercel-URL'en på en telefon og kør Chrome DevTools Lighthouse. Three.js-bundler er normalt omkring 400 KB til 1,5 MB. Hvis du er over 3 MB, bed Cursor om at aktivere kode-splitting på de tunge moduler. Vercels gzip og brotli vil håndtere resten.

Trin 14: Fejlfinding. Spil din live URL fem gange i træk. Ret alt, der går i stykker to gange. Ignorer alt, der går i stykker én gang.

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

Trin 15: (Valgfrit) Opsæt et brugerdefineret domæne. Hvis du har købt en navn-spil.com på forhånd, tilføj den i Vercels projektindstillinger. SSL er automatisk. Ellers er *.vercel.app URL'en fin - den har HTTPS, den er delelig, og den indlæses overalt.

Trin 16: Optag en 15-sekunders GIF af det bedste øjeblik. Brug den live URL, ikke localhost. GIF'en er det, der bliver klikket på Twitter, Bluesky og Reddit.

Trin 17: Opret en itch.io-side (valgfrit men meget effektivt). Titel, en-linjes slogan, tre screenshots, GIF'en, kontroller, credits og en indlejret iframe af din *.vercel.app (itch.io understøtter iframe-indlejringer for HTML5-spil). Nu har du to URL'er - en til afslappet deling og en til gamer-publikummet.

Trin 18: Post linket. Twitter, Bluesky, din dev-community Discord, r/IndieDev, r/threejs, r/WebGames. Led altid med GIF'en. Inkluder altid URL'en. Hvis du brugte en Vibe Skills-kompetence, nævn det i devlog-indlægget - andre udviklere, der læser med, vil ønske den samme starter.

Sådan undgår du de tre mest almindelige Vercel udgivelsesfejl

Tre ting går næsten altid galt for solo Three.js + Vercel weekender. Alle tre er 5-minutters rettelser, hvis du fanger dem fredag aften, og 5-timers kaninhuller, hvis du opdager dem søndag kl. 19:00.

• Forkert build output mappe. Vite standard er dist/. Vercel registrerer automatisk Vite og bruger dist/. Hvis du har tilpasset outputtet, skal du indstille outputDirectory i vercel.json eller projektindstillingerne, ellers vil din udgivelse være en 404.
• Asset stier der virker lokalt men 404 i produktion. Brug relative stier eller Vite's import.meta.env.BASE_URL hjælpefunktion til enhver GLB, tekstur eller lydfil der indlæses ved kørselstid. Hardkodede /assets/... stier virker normalt, men kopierede absolutte Windows-stier vil absolut ikke.
• CSP-headers der blokerer markør-lås eller lydkontekst. Førstepersonsspil kræver markør-lås. Lyd kræver aktivering via bruger-gestus. Enhver kompetence fra 3D Games kategorien leveres med den rigtige headers blok i vercel.json til at håndtere dette. Hvis du skrev din egen fra bunden, kopier konfigurationen fra kompetencens repo.

Udgivelsen virker fredag, så når disse går i stykker søndag, er det altid på grund af en nylig ændring. git bisect er din ven. Endnu bedre: bliv ved med at pushe hver 30. minut, så den ødelagte commit er lille.

Ofte Stillede Spørgsmål

Vil Vercel's gratis niveau virkelig holde, hvis mit spil får trafik?

Ja, til en weekendlancering og de første par uger. Gratis niveauet giver dig 100 GB båndbredde per måned, hvilket svarer til ca. 20.000 spil af en 5 MB Three.js-build. Hvis du rammer det loft, koster Pro-planen 20 $/måned og giver dig 1 TB. Til en weekendudgivelse er gratis mere end nok. Kompetencer på Vibe Skills leveres med build-konfigurationer, der minimerer bundle-størrelsen, hvilket strækker gratisniveauet længere.

Kan jeg bruge et brugerdefineret domæne på Vercel's gratis niveau?

Ja. Gratis niveauet understøtter brugerdefinerede domæner med automatisk HTTPS. Køb et domæne (Namecheap, Cloudflare Registrar, Porkbun), peg det mod Vercel, og Vercel håndterer SSL-certifikatet. Opsætningen tager ca. 10 minutter. Hvis du ikke har et domæne, er navn-spil.vercel.app URL'en kort nok til at dele på enhver platform.

Er denne stack ok til et spil-jam bidrag?

Ja, og det er en af de bedste stacks til spil-jam bidrag. De fleste jam's (Ludum Dare, GMTK, js13k, GitHub Game Off) accepterer enhver web-spilbar URL. Et *.vercel.app link virker præcis som en itch.io URL for dommere. Mange jam-vindere udgiver til begge - itch.io for gamer-publikummet, Vercel som den hurtige kanoniske URL.

Har jeg brug for at kende Three.js, før jeg starter?

Du har brug for nok JavaScript til at læse, hvad Cursor skriver, og finjustere værdier. Du behøver ikke skrive Three.js fra bunden. Kompetencerne på Vibe Skills genererer motor-opsætningen, kameraet, kontrollen og build-konfigurationen. Cursor håndterer gameplay-koden ud fra dine beskrivelser.

Hvad sker der, hvis min Vercel build fejler søndag kl. 19:00?

Den mest almindelige årsag er en TypeScript-fejl eller en manglende env-variabel. Vercel viser build-loggen med den fejlede linje fremhævet. Et klik i dashboardet ruller tilbage til den sidste fungerende build og promoverer den til produktion. Fordi hver push er en forhåndsvisnings-udgivelse, er du aldrig mere end én commit fra en fungerende build. Derfor er det vigtigt at pushe hver 30. minut lørdag og søndag.

Kan jeg sælge eller modificere koden fra en Vibe Skills 3D-spilkompetence?

Ja. Kompetencer på Vibe Skills leveres med en kommercielt venlig licens, der lader dig udgive koden i dit eget spil på Vercel, itch.io, Steam eller hvor som helst ellers. Skabere beholder IP'en for kompetencen, du beholder IP'en for spillet bygget ovenpå.

Hvad hvis jeg ikke vil bruge Cursor?

Enhver AI-editor, der kan redigere projektfiler, virker. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - enhver af dem kan iterere på Three.js stilladset fra en Vibe Skills-kompetence. Kompetencen i sig selv er editor-agnostisk.

Udgiv det denne weekend

Årsagen til at de fleste solo-udviklere aldrig udgiver et 3D-spil er ikke motoren, genren eller færdighedsloftet. Det er fredag aften, hvor de "lige undersøger lidt mere" og aldrig starter. Den næste ledige weekend du har, følg fire-fase planen: installer en Vibe Skills 3D-spilkompetence, push til GitHub, forbind Vercel, udgiv inden fredag kl. 20:00, og brug derefter lørdag og søndag på at iterere på en live URL.

Din portefølje af ti weekend-udgivne spil på Vercel er mere værd end dit hypotetiske seks-måneders drømme-motor-projekt. Det udgivne vinder altid. Den gratis Vercel URL er beviset.

Gennemse 3D-spilkompetencer på Vibe Skills →

Spring over Three.js boilerplate maratonnet. Installer en 3D-spilkompetence på Vibe Skills, push til Vercel, og hav en live URL inden søndag aften.