Hur man släpper ett 3D-spel på Vercel i helgen (med AI-kunskaper)

Vibe Skills

Bläddra bland hundratals färdiga färdigheter för Claude, Cursor och mer.

Utforska färdigheter

Börja gratis nu

Publicera ett 3D-spel på Vercel innan söndag kväll: 48-timmars utrullningshandbok

Du kan gå från tom fredag kväll till länken ditt-spel.vercel.app till söndagsmiddagen. Stacken är Three.js, Cursor, en AI-funktion från Vibe Skills och Vercels gratisnivå. Total kostnad för helgen: 0 kr. Total infrastruktur du måste övervaka: också noll.

Det här är inte "bygg en prototyp på din bärbara dator och kalla det färdigt". Det här är en publik URL som vem som helst i världen kan öppna i en webbläsare, med HTTPS, edge caching och en anpassad domän om du vill ha det. AI-funktionen levererar Three.js-skelettet och en fungerande vercel.json. Cursor hanterar iterationsloopen. Vercel hanterar utrullningen. Du hanterar designen.

Den här guiden är för indieutvecklare, vibe-kodare, hackathon-deltagare och alla som är trötta på halvfärdiga localhost:5173-flikar. Vi går igenom varför den här stacken fungerar, 48-timmars utrullningsanatomin, fem 3D-spelfunktioner byggda för arbetsflödet och steg-för-steg-guiden från fredag till söndag.

Vibe Skills

Bläddra bland hundratals färdiga färdigheter för Claude, Cursor och mer.

Utforska färdigheter

Börja gratis nu

Varför Vercel + Three.js + AI-funktioner är Stacken för Solo-utvecklare

Vercel är den lataste möjliga utrullningsmål för ett Three.js-spel. Skicka till GitHub, Vercel märker det, bygger projektet och ger dig tillbaka en URL inom 60 sekunder. Ingen server att provisionera, ingen Docker-fil, ingen NGINX-konfiguration, ingen SSL-installation. Three.js-paketet är bara statiska HTML-, JS- och WebGL-tillgångar, vilket är precis vad Vercels edge-nätverk byggdes för att leverera.

Gratisnivån täcker en helgutrullning bekvämt:

• 100 GB bandbredd per månad. En 5 MB Three.js-byggnad vid 10 000 spel är 50 GB. Du får slut på helgen innan du får slut på bandbredd.
• Obegränsade statiska utrullningar med HTTPS och en *.vercel.app-underdomän.
• Anpassad domänstöd på gratisnivån - ta med din egen namn-spel.com om du har en, annars är den gratis vercel.app-URL:en delbar på alla sociala plattformar.
• Förhandsgranskningsrullningar för varje commit - varje push får sin egen URL, så du kan dela en byggnad med en vän och fortsätta att iterera utan att bryta den.

Lägg till en AI-funktion från Vibe Skills och även standardkoden försvinner. Three.js-sceninställning, spelarkontroller, byggpipeline och en Vercel-redo vercel.json genereras med en enda kommando. Sedan förvandlar Cursor resten av helgen till en chatt där du beskriver det spelupplägg du vill ha och finjusterar resultatet. Det är hela stacken: en marknadsplatsfunktion för grunden, en AI-redigerare för iteration och Vercel för utrullningen. Enskilt, gratis och snabbt.

Vibe Skills

Bläddra bland hundratals färdiga färdigheter för Claude, Cursor och mer.

Utforska färdigheter

Börja gratis nu

48-timmars Anatomi: Fredagskoncept till Söndagsutrullning

Varje helgutrullning som faktiskt blir live följer samma steg. Tricket är att planera utrullningen på fredagen, inte söndag eftermiddag, så att de sista sex timmarna går till polering istället för att kämpa med ett byggfel.

Anledningen till att detta fungerar är fredagens push till Vercel. När URL:en finns, rullas varje lördag- och söndagscykel ut automatiskt. Det finns ingen "panik vid utrullning på söndag kväll" eftersom utrullningen redan skedde på fredagen och har körts på autopilot hela helgen.

Hur "Vibe Coding" av ett 3D-spel på Vercel ser ut

Vibe coding innebär att beskriva vad du vill ha på vanligt engelska och låta en AI-redigerare skriva koden, och sedan iterera på resultatet. För ett Three.js-spel på Vercel är loopen ovanligt ren: varje ändring i Cursor är en pnpm dev-kommando bort från lokal feedback, sedan en git push-kommando bort från en live förhandsgransknings-URL, sedan automatiskt utrullad till produktion på main.

En vibe-kodad Vercel-spelshelg ser ut så här:

1. Öppna funktionens startmapp i Cursor.
2. Beskriv en funktion i chatten: "dubbelhoppa om mellanslag trycks två gånger inom 200 ms".
3. Cursor redigerar kontrollfilen. Spara. pnpm dev laddas om. Du känner hoppet i webbläsaren.
4. Om det känns rätt, git push. Vercel bygger en förhandsgransknings-URL. Skicka den till en vän.
5. Slå ihop till main när känslan är låst. Produktions-URL:en uppdateras inom 60 sekunder.

AI:n gör skrivandet. Vercel gör utrullningen. Du gör känslan och designen.

5 AI 3D-spelfunktioner som gör detta möjligt på Vibe Skills

Dessa funktioner är byggda för Vercel + Three.js + Cursor helg-arbetsflödet. Var och en levereras med ett Vite-baserat Three.js-projekt, en fungerande vercel.json, en pnpm build som producerar ett statiskt paket som Vercel kan leverera från kanten, och en testad utrullningsväg. Alla finns i kategorin 3D-spel på Vibe Skills.

1. Three.js + Vercel Spelstartare

Standardvalet. Genererar en Three.js-scen med en spelarkontroller, tredjepersonskamera, ljussystem, skybox och en markplan med kollisioner. Levereras med en vercel.json som ställer in rätt cache-headers för Three.js-tillgångspaket. pnpm dev körs lokalt; ett klick i Vercel-dashboarden kopplar GitHub-repoet och du har en live-URL.

Bäst för: alla genrer utom ren 2D. Använd denna om du ännu inte vet vad du bygger.

2. Förstaperson Vercel-vandrare

En polerad förstapersonkontroll (WASD + muspekare låsning + gravitation + sprint + hopp) med fotstegskrokar, huvudgungning och en vercel.json som hanterar pekarlås-CSP-headers korrekt. Den här snubblar många solo-utvecklare i produktion. Funktionen löser det åt dig.

Bäst för: promenadsspel, skräckprototyper, narrativa spel, museiutställningar.

3. Browser Arena Shooter Kit

En top-down arena (tvilling-stick-kontroller, vågenerator, grundläggande fiende-AI, projektilsystem, poäng-HUD) med en Vercel-optimerad byggnad som zippar tillgångar, kod-delar AI:n och laddar musik på begäran. Multiplayer-krokar inkluderade; helgen levererar single-player.

Bäst för: arkadskjutare, bullet hell, jam-bidrag som behöver laddas snabbt på mobilen.

4. Vercel Puzzle Platformer

En tredjeperson plattformsspel (variabelt hopp, coyote-tid, kantdetektering), checkpoints, tre stubbnivåer du kan redigera i Blender eller i kod, och en respawn-loop. vercel.json är konfigurerad för omedelbar edge-cached nivå-omladdningar, så att lektestning känns snabb på en telefon.

Bäst för: pusselplattformsspel, parkour-prototyper, nivådesignexperiment.

5. Vercel Driving Sandbox

Arkadkörningskänsla (accelerationskurva, driftfysik, kamerans fördröjning, grundläggande terräng) med en lågpoly-bil, en banmall och en utrullning optimerad för stora terrängmaskor. Förinställda HTTP-headers gör att WebGL-kontexten startar snabbare på Safari, historiskt sett den långsammaste webbläsaren för Three.js.

Bäst för: arkadracing, off-road-körning, demo för bilkänsla för en portfölj.

Bläddra bland alla 3D-spelfunktioner på Vibe Skills →

Steg-för-steg från Fredag till Söndag

Det här är det exakta schemat. Justera starttiden, men behåll ordningen. Nyckelmiljön är Vercel-utrullningen på fredag kväll. Allt därefter är iteration.

Fredag 18:00 - 20:00: Välj Funktion, Push till GitHub, Koppla Vercel

Steg 1: Välj en 3D-spelfunktion på Vibe Skills. Bläddra i kategorin 3D-spel, välj den som matchar din genre och installera startkoden i en ny mapp. Öppna den i Cursor. Du bör se en Three.js-scen med en rörlig spelare senast 19:00.

Steg 2: Skapa ett GitHub-repo och pusha. git init, git remote add, git push. Använd spelets slug som namnet på repot (crystal-runner, lunar-fishing, vad som helst). Repotsnamnet blir ofta din URL.

Steg 3: Koppla repot till Vercel. Logga in på Vercel med GitHub (gratis), klicka på "Add New Project", välj repot. Vercel upptäcker Vite automatiskt och konfigurerar byggnaden. Klicka på Deploy. Inom 60 sekunder har du en crystal-runner.vercel.app-URL. Öppna den på din telefon. Dela med en vän. Utvecklingsfältet är nu noll för resten av helgen.

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

Steg 4: Svara på fem frågor på vanligt engelska. Öppna en Notion-sida eller en markdown-fil i repot och svara:

• Vad gör spelaren var 5:e sekund? (kärnloopen)
• Vad är vinstvillkoret och förlustvillkoret?
• Hur lång är en runda eller en bana?
• Vad är den visuella kroken? (palett, ljussättning, stilreferens)
• Vad är den enda funktionen som gör detta minnesvärt på 30 sekunder?

Steg 5: Committa design dokumentet. Pusha det till repot. Vercel kommer att göra en ny utrullning. Disciplinen att pusha varje meningsfull ändring håller live-URL:en ärlig.

Lördag 09:00 - 13:00: Bygg Kärnmekaniken

Steg 6: Ersätt platshållarmekaniken med din enda funktion. Detta är den enda funktionen som spelar roll. Använd Cursor-chatten för att beskriva den ("när spelaren plockar upp en kristall, frys närliggande fiender i 2 sekunder och spela en klocka"). Iterera lokalt med pnpm dev. När det känns rätt, pusha.

Steg 7: Koppla ihop vinst/förlust-tillståndet. En 60-sekunders byggnad med ett riktigt slut känns som ett spel. En 60-minuters byggnad utan slut känns som en teknikdemo. Koppla alltid ihop vinstskärmen först, sedan allt annat.

Lördag 13:00 - 20:00: Lägg till en bana

Steg 8: Bygg en polerad bana. Inte tre halvbakade. Använd platshållar-kuber för geometri. Använd funktionens standardkaraktär. Finjustera känslan - hopphöjd, kamerans fördröjning, partikelintensitet.

Steg 9: Lägg till en handlednings-overlay. En två-raders "WASD för att röra dig, klicka för att skjuta"-ruta vid första starten räddar din lansering från förvirrade spelare som ger upp på 8 sekunder. Cursor kan generera React (eller vanlig DOM)-overlayn på 30 sekunder.

Steg 10: Pusha varje timme. Varje push får en Vercel förhandsgransknings-URL. Skicka var och en till en vän. Feedback-loopen är hemligheten bakom denna stack.

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

Steg 11: Lägg till tre ljud. Fotstegsloop, ambient pad, vinstmelodi. Även tre ljud lyfter en helgprototyp dramatiskt. Gratis källor: freesound.org, opengameart.org.

Steg 12: Lägg till "juice". Partiklar vid träff, skärmskakningar vid kollision, sifferuppvisningar vid poäng. "Juice" är vad som får en 48-timmars byggnad att se ut som en 6-månaders i en GIF. Fråga Cursor att lägga till en "skärmskakning med intensitet 0.3 i 150 ms när spelaren tar skada" - den kommer att skriva kroken för skärmskakningar på fem sekunder.

Steg 13: Kör en Lighthouse-pass. Öppna Vercel-URL:en på en telefon och kör Chrome DevTools Lighthouse. Three.js-paket är vanligtvis runt 400 KB till 1.5 MB. Om du är över 3 MB, be Cursor att aktivera koddelning på de tunga modulerna. Vercels gzip och brotli hanterar resten.

Steg 14: Buggpass. Spela din live-URL fem gånger i rad. Åtgärda allt som går sönder två gånger. Ignorera allt som går sönder en gång.

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

Steg 15: (Valfritt) Ställ in en anpassad domän. Om du köpte en namn-spel.com i förväg, lägg till den i Vercels projektinställningar. SSL är automatiskt. Annars är *.vercel.app-URL:en bra - den har HTTPS, den är delbar och den laddas överallt.

Steg 16: Spela in en 15-sekunders GIF av det bästa ögonblicket. Använd live-URL:en, inte localhost. GIF:en är det som klickas på Twitter, Bluesky och Reddit.

Steg 17: Skapa en itch.io-sida (valfritt men hög hävstång). Titel, tagline med en rad, tre skärmdumpar, GIF:en, kontroller, credits och en inbäddning av din *.vercel.app-iframe (itch.io stöder iframe-inbäddningar för HTML5-spel). Nu har du två URL:er - en för avslappnad delning och en för spelarpubliken.

Steg 18: Posta länken. Twitter, Bluesky, din utvecklar-Discord, r/IndieDev, r/threejs, r/WebGames. Led alltid med GIF:en. Inkludera alltid URL:en. Om du använde en Vibe Skills-funktion, nämn det i utvecklingsloggen - andra utvecklare som läser kommer att vilja ha samma startkod.

Hur du undviker de tre vanligaste Vercel-utrullningsfelen

Tre saker går sönder nästan varje solo Three.js + Vercel-helg. Alla tre är 5-minutersfixar om du fångar dem på fredag kväll, och 5-timmars kaninhål om du upptäcker dem på söndag kl. 19:00.

• Fel byggutmatningskatalog. Vite standard är dist/. Vercel upptäcker Vite automatiskt och använder dist/. Om du har anpassat utmatningen, ställ in outputDirectory i vercel.json eller projektinställningarna, annars blir din utrullning en 404.
• Tillgångs-sökvägar som fungerar lokalt men ger 404 i produktion. Använd relativa sökvägar eller Vites import.meta.env.BASE_URL-hjälpare för alla GLB-, textur- eller ljudfiler som laddas vid körning. Hårdkodade /assets/...-sökvägar fungerar vanligtvis, men kopierade absoluta Windows-sökvägar kommer absolut inte att göra det.
• CSP-headers som blockerar pekarlås eller ljudkontext. Förstapersonspel behöver pekarlås. Ljud behöver aktivering via användargester. Alla funktioner från kategorin 3D-spel levereras med rätt headers-block i vercel.json för att hantera detta. Om du skrev din egen från grunden, kopiera konfigurationen från funktionens repo.

Utrullningen fungerar på fredagen, så när dessa går sönder på söndagen beror det alltid på en nyligen gjord ändring. git bisect är din vän. Ännu bättre: fortsätt att pusha var 30:e minut så att den trasiga committen är liten.

Vanliga Frågor

Kommer Vercels gratisnivå verkligen att hålla om mitt spel får trafik?

Ja, för en helgutrullning och de första veckorna. Gratisnivån ger dig 100 GB bandbredd per månad, vilket är ungefär 20 000 spel av en 5 MB Three.js-byggnad. Om du når det taket, kostar Pro-planen 20 USD/månad och ger dig 1 TB. För en helgutrullning är gratis mer än tillräckligt. Funktioner på Vibe Skills levereras med byggkonfigurationer som minimerar paketstorleken, vilket sträcker gratisnivån ytterligare.

Kan jag använda en anpassad domän på Vercels gratisnivå?

Ja. Gratisnivån stöder anpassade domäner med automatisk HTTPS. Köp en domän (Namecheap, Cloudflare Registrar, Porkbun), peka den mot Vercel, och Vercel hanterar SSL-certifikatet. Installationen tar cirka 10 minuter. Om du inte har en domän är namn-spel.vercel.app-URL:en tillräckligt kort för att delas på alla plattformar.

Är denna stack OK för ett bidrag till en speljam?

Ja, och det är en av de bästa stackarna för jam-bidrag. De flesta jam (Ludum Dare, GMTK, js13k, GitHub Game Off) accepterar alla webbspelbara URL:er. En *.vercel.app-länk fungerar exakt som en itch.io-URL för domare. Många jam-vinnare skickar till båda - itch.io för spelarpubliken, Vercel som den snabba kanoniska URL:en.

Behöver jag kunna Three.js innan jag börjar?

Du behöver tillräckligt med JavaScript för att läsa vad Cursor skriver och justera värden. Du behöver inte skriva Three.js från grunden. Funktionerna på Vibe Skills genererar motorinställningen, kameran, kontrollen och byggkonfigurationen. Cursor hanterar spelkoden från dina beskrivningar.

Vad händer om min Vercel-byggnad misslyckas på söndag kl. 19:00?

Den vanligaste orsaken är ett TypeScript-fel eller en saknad miljövariabel. Vercel visar byggloggen med den felande raden markerad. Ett klick i dashboarden rullar tillbaka till den senaste fungerande utrullningen och marknadsför den till produktion. Eftersom varje push är en förhandsgranskningsrullning, är du aldrig mer än en commit från en fungerande byggnad. Det är därför det är viktigt att pusha var 30:e minut på lördagen och söndagen.

Kan jag sälja eller modifiera koden från en Vibe Skills 3D-spelfunktion?

Ja. Funktioner på Vibe Skills levereras med en kommersiellt vänlig licens som låter dig släppa koden i ditt eget spel på Vercel, itch.io, Steam eller var som helst annars. Skapare behåller IP:t för funktionen, du behåller IP:t för spelet som byggts ovanpå.

Vad händer om jag inte vill använda Cursor?

Alla AI-redigerare som kan redigera projektfiler fungerar. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - alla kan iterera på Three.js-skelettet från en Vibe Skills-funktion. Funktionen i sig är redigerar-agnostisk.

Leverera det i helgen

Anledningen till att de flesta solo-utvecklare aldrig släpper ett 3D-spel är inte motorn, genren eller skicklighetsnivån. Det är fredag kväll då de "bara forskar lite mer" och aldrig börjar. Nästa lediga helg du har, följ den fyrfasiga planen: installera en Vibe Skills 3D-spelfunktion, pusha till GitHub, koppla Vercel, rulla ut innan fredag kl. 20:00, spendera sedan lördag och söndag med att iterera på en live-URL.

Din portfölj med tio helgutrullade spel på Vercel är värd mer än ditt hypotetiska sexmånaders drömmotorprojekt. Det utrullade vinner alltid. Den gratis Vercel-URL:en är beviset.

Bläddra bland 3D-spelfunktioner på Vibe Skills →

Hoppa över Three.js standard-maratonloppet. Installera en 3D-spelfunktion på Vibe Skills, pusha till Vercel och ha en live-URL innan söndag kväll.