Hur du släpper ett 3D-spel på Vercel i helgen (med AI-färdigheter)

Vibe Skills

Vinjari mamia ya ujuzi tayari-umetengenezwa kwa Claude, Cursor, na zaidi.

Vinjari Ujuzi

Anza Bure Sasa

Skeppa ett 3D-spel på Vercel till söndag kväll: 48-timmars deploy-handbok

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

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

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

Vibe Skills

Vinjari mamia ya ujuzi tayari-umetengenezwa kwa Claude, Cursor, na zaidi.

Vinjari Ujuzi

Anza Bure Sasa

Varför Vercel + Three.js + AI-färdigheter är stacken för solo-utvecklare

Vercel är det mest latfria möjliga deploy-målet 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 kantnätverk byggdes för att leverera.

Gratisnivån täcker en helg-lansering bekvämt:

• 100 GB bandbredd per månad. En 5 MB Three.js-byggnad vid 10 000 spel är 50 GB. Du kommer att få slut på helgen innan du får slut på bandbredd.
• Obegränsade statiska deployer med HTTPS och en underdomän *.vercel.app.
• Stöd för anpassade domäner 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örhandsgransknings-deployer för varje commit - varje push får sin egen URL, så du kan dela en byggnad med en vän och fortsätta iterera utan att förstöra den.

Lägg till en AI-färdighet från Vibe Skills och grundkoden försvinner också. Three.js-scen-instä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 spel du vill ha och finjusterar resultatet. Det är hela stacken: en marknadsplatsfärdighet för grunden, en AI-redigerare för iteration och Vercel för deploy. Ensam, gratis och snabbt.

Vibe Skills

Vinjari mamia ya ujuzi tayari-umetengenezwa kwa Claude, Cursor, na zaidi.

Vinjari Ujuzi

Anza Bure Sasa

48-timmars anatomi: Fredag koncept till Söndag deploy

Varje helg-skepp som faktiskt går live följer samma steg. Tricket är att planera deploy på fredagen, inte söndag eftermiddag, så att de sista sex timmarna går till polering istället för att slåss mot ett byggfel.

Anledningen till att detta fungerar är fredagens push till Vercel. När URL:en finns, deployas varje lördag och söndag commit automatiskt. Det finns ingen "söndag kvälls deploy-panik" eftersom deployen redan skedde på fredagen och har körts på autopilot hela helgen.

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

Vibe-kodning 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 ett pnpm dev bort från lokal feedback, sedan en git push bort från en live förhandsgransknings-URL, sedan automatiskt deployad till produktion på main.

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

1. Öppna färdighetens startmapp i Cursor.
2. Beskriv en funktion i chatten: "dubbelhopp 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å samman till main när känslan är låst. Produktions-URL:en uppdateras inom 60 sekunder.

AI:n gör typandet. Vercel gör deploy. Du gör känslan och designen.

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

Dessa färdigheter är byggda för Vercel + Three.js + Cursor helg-arbetsflöde. Var och en levererar 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 deploy-väg. Alla finns i kategorin 3D-spel på Vibe Skills.

1. Three.js + Vercel Spelstartare

Standardvalet. Genererar en Three.js-scen med spelarkontroller, tredjeperson-kamera, ljusrigg, skybox och en markplan med kollisioner. Levereras med en vercel.json som ställer in rätt cachningshuvuden för Three.js-tillgångspaket. pnpm dev körs lokalt; ett klick i Vercel-instrumentpanelen kopplar GitHub-förrådet och du har en live-URL.

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

2. First-Person Vercel Walker

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

Bäst för: promenad-sim, skräck-prototyper, berättande spel, museiutställningar.

3. Browser Arena Shooter Kit

En top-down arena (twin-stick-kontroll, våg-generator, grundläggande fiende-AI, projektil-system, poäng-HUD) med en Vercel-anpassad byggnad som zip-komprimerar tillgångar, kod-delar AI:n och laddar musik asynkront. Multiplayer-krokar ingår; helgen levererar en-spelarläge.

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

4. Vercel Puzzle Platformer

En tredjeperson-plattformare (variabelt hopp, coyote-tid, avsats-detektering), checkpoints, tre stub-nivåer du kan redigera i Blender eller kod, och en återfödslings-loop. vercel.json är konfigurerad för omedelbara kant-cachade nivå-omladdningar, så lektestning känns snabb på en telefon.

Bäst för: pussel-plattformare, parkour-prototyper, nivå-design-experiment.

5. Vercel Driving Sandbox

Arkadi-körkänsla (accelerationskurva, driftfysik, kamerforsdröjs, grundläggande terräng) med en lågpoly-bil, en banmall och en deploy anpassad för stora terrängmodeller. Förinställda HTTP-huvuden gör att WebGL-kontexten startar snabbare på Safari, historiskt sett den långsammaste webbläsaren för Three.js.

Bäst för: arkad-racing, off-road-körning, bil-känsla-demos för en portfölj.

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

Fredag till Söndag Steg-för-steg

Det här är det exakta schemat. Justera starttiden, men behåll ordningen. Milstolpen är fredag kvälls Vercel-deploy. Allt därefter är iteration.

Fredag 18:00 - 20:00: Välj färdighet, pusha till GitHub, koppla Vercel

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

Steg 2: Skapa ett GitHub-förråd och pusha. git init, git remote add, git push. Använd din spels slug som förrådsnamn (kristall-runner, mån-fiske, vad som helst). Förrådsnamnet blir ofta din URL.

Steg 3: Koppla förrådet till Vercel. Logga in på Vercel med GitHub (gratis), klicka på "Lägg till nytt projekt", välj förrådet. Vercel känner automatiskt igen Vite och konfigurerar byggnaden. Klicka på Deploy. Inom 60 sekunder har du en kristall-runner.vercel.app-URL. Öppna den på din telefon. Dela med en vän. Deploy-fä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 förrådet och svara:

• Vad gör spelaren var 5:e sekund? (kärnloopen)
• Vad är vinstvillkoret och förlustvillkoret?
• Hur lång är en omgång eller en nivå?
• 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 förrådet. Vercel kommer att deploya om. 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-chatt för att beskriva den ("när spelaren plockar upp en kristall, fryser närliggande fiender i 2 sekunder och spelar en klang"). Iterera lokalt med pnpm dev. När det känns rätt, pusha.

Steg 7: Koppla vinst/förlust-läget. 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 vinstskärmen först, sedan allt annat.

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

Steg 8: Bygg en polerad nivå. Inte tre halvfärdiga. Använd platshållar-kuber för geometri. Använd färdighetens standardkaraktär. Finjustera känslan - hopphöjd, kamerforsdröjs, partikelintensitet.

Steg 9: Lägg till ett handledningslager. En två-sentences "WASD för att röra dig, klicka för att skjuta"-popup vid första lanseringen räddar din lansering från förvirrade spelare som ger upp efter 8 sekunder. Cursor kan generera React- (eller vanilla DOM-) lagret på 30 sekunder.

Steg 10: Pusha varje timme. Varje push får en Vercel förhandsgransknings-URL. Skicka varje till en vän. Feedback-loopen är hemligheten bakom den här stacken.

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

Steg 11: Lägg till tre ljud. Fotstegs-loop, ambient pad, vinst-signal. Även tre ljud lyfter en helg-prototyp dramatiskt. Gratis källor: freesound.org, opengameart.org.

Steg 12: Lägg till "juice". Partiklar vid träff, skärmskakning vid kollision, siffror som dyker upp vid poäng. Juice är det som får en 48-timmars byggnad att se ut som en 6-månaders i en GIF. Be Cursor lägga till "en skärmskakning med intensitet 0.3 i 150 ms när spelaren tar skada" - den skriver krok-för-skärmskakning på fem sekunder.

Steg 13: Kör en Lighthouse-genomgång. Ö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 kod-delning för de tunga modulerna. Vercels gzip och brotli hanterar resten.

Steg 14: Bugg-genomgång. Spela din live-URL fem gånger i rad. Fixa 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 bästa ögonblicket. Använd live-URL:en, inte localhost. GIF:en är det som får klick på Twitter, Bluesky och Reddit.

Steg 17: Skapa en itch.io-sida (valfritt men hög hävstångseffekt). Titel, en-rads tagline, tre skärmdumpar, GIF:en, kontroller, krediter och en inbäddad *.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 spelpubliken.

Steg 18: Posta länken. Twitter, Bluesky, din utvecklings-community Discord, r/IndieDev, r/threejs, r/WebGames. Leda alltid med GIF:en. Inkludera alltid URL:en. Om du använde en Vibe Skills-färdighet, nämn det i utvecklarloggen - andra utvecklare som läser med vill ha samma startpaket.

Hur du undviker de tre vanligaste Vercel deploy-felen

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 byggutmatningsmapp. Vite standardinställs till dist/. Vercel känner automatiskt igen Vite och använder dist/. Om du har anpassat utmatningen, ställ in outputDirectory i vercel.json eller projektinställningarna eller din deploy blir en 404.
• Tillgångs-sökvägar som fungerar lokalt men ger 404 i produktion. Använd relativa sökvägar eller Vite-hjälparen import.meta.env.BASE_URL för alla GLB, texturer eller ljudfiler som laddas vid körning. Hårdkodade /assets/...-sökvägar fungerar vanligtvis, men kopierade absoluta Windows-sökvägar gör absolut inte det.
• CSP-huvuden som blockerar pekarlåsning eller ljudkontext. Förstapersonsspel kräver pekarlåsning. Ljud kräver användargest-aktivering. Varje färdighet 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 färdighetens förråd.

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

Vanliga Frågor

Kommer Vercels gratisnivå verkligen att räcka om mitt spel får trafik?

Ja, för en helg-lansering och de första veckorna. Gratisnivån ger dig 100 GB bandbredd per månad, vilket motsvarar ungefär 20 000 spelomgångar av ett 5 MB Three.js-byggnad. Om du når taket är Pro-planen 20 $/månad och ger dig 1 TB. För en helg-skeppning är gratis mer än tillräckligt. Färdigheter på Vibe Skills levereras med byggkonfigurationer som minimerar paketstorleken, vilket sträcker gratisnivån längre.

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å vilken plattform som helst.

Är den här stacken okej för ett spel-jam-bidrag?

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 vilken webbspelbar URL som helst. En *.vercel.app-länk fungerar precis som en itch.io-URL för domare. Många jam-vinnare skeppar till båda - itch.io för spelpubliken, 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 finjustera värden. Du behöver inte skriva Three.js från grunden. Färdigheterna på Vibe Skills genererar motor-inställningen, kameran, kontrollen och bygg-konfigurationen. 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 instrumentpanelen rullar tillbaka till den senaste fungerande deployen och befordrar den till produktion. Eftersom varje push är en förhandsgransknings-deploy ä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-spelfärdighet?

Ja. Färdigheter 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 någon annanstans. Skapare behåller immateriella rättigheter till färdigheten, du behåller immateriella rättigheter till 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 - vilken som helst av dem kan iterera på Three.js-skelettet från en Vibe Skills-färdighet. Själva färdigheten är redigerar-agnostisk.

Skeppa det den här helgen

Anledningen till att de flesta solo-utvecklare aldrig skeppar ett 3D-spel är inte motorn, genren eller svårighetsgraden. 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-spelfärdighet, pusha till GitHub, koppla Vercel, deploya senast fredag 20:00, spendera sedan lördag och söndag med att iterera på en live-URL.

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

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

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