Vibe Skills

Blader door honderden kant-en-klare vaardigheden voor Claude, Cursor en meer.

Publiceer een 3D-game op Vercel voor zondagavond: de 48-uurs implementatiehandleiding

Je kunt van een lege vrijdagavond naar een link zoals jouw-game.vercel.app gaan tegen zondagse diner. De stack is Three.js, Cursor, een AI-vaardigheid van Vibe Skills, en de gratis laag van Vercel. Totale kosten voor het weekend: $0. Totale infrastructuur waar je babysit op moet doen: ook nul.

Dit is geen "bouw een prototype op je laptop en noem het af". Dit is een openbare URL die iedereen ter wereld in een browser kan openen, met HTTPS, edge caching en een aangepast domein als je dat wilt. De AI-vaardigheid levert de Three.js scaffolding en een werkende vercel.json. Cursor beheert de iteratieloop. Vercel beheert de implementatie. Jij beheert het ontwerp.

Deze gids is voor indie-ontwikkelaars, vibe coders, hackathon-deelnemers en iedereen die moe is van half afgemaakte localhost:5173 tabbladen. We behandelen waarom deze stack werkt, de 48-uurs implementatieanatomie, vijf 3D-gamevaardigheden gebouwd voor de workflow, en de stap-voor-stap van vrijdag tot zondag.

Vibe Skills

Blader door honderden kant-en-klare vaardigheden voor Claude, Cursor en meer.

Ontdek Vaardigheden

Start Nu Gratis

Waarom Vercel + Three.js + AI-vaardigheden de Solo Dev Stack is

Vercel is het meest luie mogelijke implementatiedoel voor een Three.js-game. Push naar GitHub, Vercel merkt het op, bouwt het project en geeft je binnen 60 seconden een URL terug. Geen server om te provisioneren, geen Docker-bestand, geen NGINX-configuratie, geen SSL-installatie. De Three.js-bundel bestaat gewoon uit statische HTML-, JS- en WebGL-assets, wat precies is waar Vercel's edge-netwerk voor is gebouwd.

De gratis laag dekt een weekendlancering comfortabel:

100 GB bandbreedte per maand. Een Three.js-build van 5 MB met 10.000 plays is 50 GB. Je raakt eerder het weekend op dan je bandbreedte opraakt.
Onbeperkte statische implementaties met HTTPS en een *.vercel.app subdomein.
Ondersteuning voor aangepaste domeinen op de gratis laag - breng je eigen naam-game.com mee als je die hebt, anders is de gratis vercel.app URL deelbaar op elk sociaal platform.
Preview implementaties voor elke commit - elke push krijgt zijn eigen URL, zodat je een build kunt delen met een vriend en kunt blijven itereren zonder het te breken.

Voeg een AI-vaardigheid toe van Vibe Skills en de boilerplate verdwijnt ook. Three.js-scène-setup, spelercontroller, build-pipeline en een Vercel-klare vercel.json worden in één commando gegenereerd. Cursor maakt vervolgens de rest van het weekend een chat waarin je de gewenste gameplay beschrijft en de output afstemt. Dat is de volledige stack: een marketplace-vaardigheid voor de basis, een AI-editor voor iteratie, en Vercel voor de implementatie. Solo, gratis en snel.

Vibe Skills

Blader door honderden kant-en-klare vaardigheden voor Claude, Cursor en meer.

Ontdek Vaardigheden

Start Nu Gratis

De 48-uurs Anatomie: Vrijdag Concept tot Zondag Implementatie

Elke weekendpublicatie die daadwerkelijk live gaat, volgt dezelfde stappen. De truc is om de implementatie op vrijdag te plannen, niet op zondagmiddag, zodat de laatste zes uur aan polijsten gaan in plaats van vechten met een build-fout.

Fase	Tijdsblok	Wat je doet	Wat is gepubliceerd aan het einde van de fase
Fase 1: Concept	Vrijdag 18:00 - 22:00	Kies genre, schrijf 1-pagina design document, installeer Vibe Skills 3D game skill, push starter naar GitHub, maak verbinding met Vercel	Live `naam-game.vercel.app` URL met de boilerplate scène
Fase 2: Bouwen	Zaterdag 09:00 - 20:00	Vervang placeholder met je kernmechanisme, voeg 1 level toe, zorg dat win/verlies-status werkt	Speelbare build op dezelfde Vercel URL, automatisch geïmplementeerd bij elke push
Fase 3: Polijsten	Zondag 10:00 - 16:00	Geluid, 'juice', tutorial popup, bugcontrole, prestatiecheck op mobiel	Een build die niet breekt in de eerste 60 seconden op elk apparaat
Fase 4: Lancering	Zondag 16:00 - 20:00	Stel aangepast domein in (optioneel), neem GIF op, schrijf itch.io pagina, post de link	Publieke URL + itch.io pagina + een lanceringsbericht op socials

De reden dat dit werkt, is de vrijdag-push naar Vercel. Zodra de URL bestaat, worden elke zaterdag en zondag commits automatisch geïmplementeerd. Er is geen "zondagavond implementatiepaniek" omdat de implementatie al op vrijdag heeft plaatsgevonden en het hele weekend op de automatische piloot heeft gedraaid.

Wat "Vibe Coden" van een 3D-game op Vercel eruitziet

Vibe coderen betekent in duidelijke taal beschrijven wat je wilt en een AI-editor de code laten schrijven, en vervolgens itereren op de output. Voor een Three.js-game op Vercel is de loop ongewoon schoon: elke wijziging in Cursor is een pnpm dev verwijderd van lokale feedback, vervolgens een git push verwijderd van een live preview URL, en vervolgens automatisch geïmplementeerd naar productie op main.

Een vibe-gecodeerd Vercel-game weekend ziet er als volgt uit:

Open de starter-map van de vaardigheid in Cursor.
Beschrijf een functie in chat: "dubbele sprong als spatie twee keer binnen 200 ms wordt ingedrukt".
Cursor bewerkt het controller-bestand. Opslaan. pnpm dev herladen. Je voelt de sprong in de browser.
Als het goed voelt, git push. Vercel bouwt een preview URL. Stuur die naar een vriend.
Merge naar main als het gevoel vastligt. Productie URL wordt binnen 60 seconden bijgewerkt.

De AI doet het typwerk. Vercel doet de implementatie. Jij doet het gevoel en het ontwerp.

5 AI 3D-gamevaardigheden die dit mogelijk maken op Vibe Skills

Deze vaardigheden zijn gebouwd voor de Vercel + Three.js + Cursor weekend-workflow. Elk van hen levert een Vite-gebaseerd Three.js-project, een werkende vercel.json, een pnpm build die een statische bundel produceert die Vercel vanaf de edge kan serveren, en een getest implementatiepad. Ze bevinden zich allemaal in de 3D Games categorie op Vibe Skills.

1. Three.js + Vercel Game Starter

De standaardkeuze. Genereert een Three.js-scène met een spelercontroller, third-person camera, verlichtingsrig, skybox en een grondvlak met botsingen. Wordt geleverd met een vercel.json die de juiste caching-headers voor Three.js-assetbundels instelt. pnpm dev draait lokaal; één klik in het Vercel-dashboard verbindt de GitHub-repo en je hebt een live URL.

Het beste voor: elk genre behalve pure 2D. Gebruik dit als je nog niet weet wat je aan het bouwen bent.

2. First-Person Vercel Walker

Een gepolijste first-person controller (WASD + muiswijzer vergrendeling + zwaartekracht + sprint + sprong) met voetstap-hooks, hoofd-bobbel en een vercel.json die de pointer-lock CSP-headers correct afhandelt. Dit is iets waar veel solo-ontwikkelaars mee worstelen in productie. De vaardigheid lost het voor je op.

Het beste voor: walking simulators, horrorprototypes, narratieve games, museumexposities.

3. Browser Arena Shooter Kit

Een top-down arena (twin-stick controller, wave spawner, basis vijandelijke AI, projectiel systeem, score HUD) met een Vercel-afgestelde build die assets comprimeert, de AI code-splitst en muziek lazy-loadt. Multiplayer-hooks inbegrepen; het weekend levert single-player.

Het beste voor: arcade shooters, bullet hell, jam-inzendingen die snel moeten laden op mobiel.

4. Vercel Puzzle Platformer

Een third-person platformer (variabele sprong, coyote time, ledge detection), checkpoints, drie stub levels die je kunt bewerken in Blender of in code, en een respawn-loop. De vercel.json is geconfigureerd voor directe, edge-gecachete level-herladingen, zodat playtesting soepel aanvoelt op een telefoon.

Het beste voor: puzzelplatformers, parkour-prototypes, level-design experimenten.

5. Vercel Driving Sandbox

Arcade-racegevoel (acceleratiecurve, driftfysica, cameratraagheid, basis-terrein) met een low-poly auto, een track-sjabloon, en een implementatie afgestemd op grote terrein-meshes. Vooraf ingestelde HTTP-headers zorgen ervoor dat de WebGL-context sneller start op Safari, historisch de langzaamste browser voor Three.js.

Het beste voor: arcade racen, off-road rijden, autoreageer-demo's voor een portfolio.

Bekijk alle 3D gamevaardigheden op Vibe Skills →

Stap-voor-stap van Vrijdag tot Zondag

Dit is het exacte schema. Pas de starttijd aan, maar behoud de volgorde. De belangrijkste mijlpaal is de Vercel-implementatie op vrijdagavond. Al het andere daarna is iteratie.

Vrijdag 18:00 - 20:00: Kies Vaardigheid, Push naar GitHub, Verbinding Vercel

Stap 1: Kies een 3D-gamevaardigheid op Vibe Skills. Blader door de 3D Games categorie, kies degene die bij je genre past, en installeer de starter in een nieuwe map. Open het in Cursor. Je zou om 19:00 uur een Three.js-scène met een bewegende speler moeten zien.

Stap 2: Maak een GitHub-repo en push. git init, git remote add, git push. Gebruik de slug van je game als de repo-naam (crystal-runner, lunar-fishing, wat dan ook). De repo-naam wordt vaak je URL.

Stap 3: Verbind de repo met Vercel. Log in op Vercel met GitHub (gratis), klik op "Add New Project", kies de repo. Vercel detecteert automatisch Vite en configureert de build. Klik op Deploy. Binnen 60 seconden heb je een crystal-runner.vercel.app URL. Open het op je telefoon. Deel het met één vriend. De implementatiebalk is nu nul voor de rest van het weekend.

Vrijdag 20:00 - 22:00: Schrijf het Design Document

Stap 4: Beantwoord vijf vragen in duidelijke taal. Open een Notion-pagina of een markdown-bestand in de repo en beantwoord:

Wat doet de speler elke 5 seconden? (de kernloop)
Wat is de win-conditie en de verlies-conditie?
Hoe lang duurt één run of één level?
Wat is de visuele haak? (palet, belichting, stijlreferentie)
Wat is de ene functie die dit gedenkwaardig maakt in 30 seconden?

Stap 5: Commit het design document. Push het naar de repo. Vercel zal opnieuw implementeren. De discipline om elke zinvolle wijziging te pushen, houdt de live URL eerlijk.

Zaterdag 09:00 - 13:00: Bouw de Kernmechanica

Stap 6: Vervang de placeholder-mechanica door je ene functie. Dit is de enige functie die ertoe doet. Gebruik de Cursor-chat om het te beschrijven ("wanneer de speler een kristal oppakt, vries nabije vijanden 2 seconden in en speel een belletje af"). Itereer lokaal met pnpm dev. Als het goed voelt, push.

Stap 7: Koppel de win/verlies-status. Een build van 60 seconden met een echt einde voelt als een game. Een build van 60 minuten zonder einde voelt als een technische demo. Koppel altijd eerst het winstscherm, daarna al het andere.

Zaterdag 13:00 - 20:00: Voeg Eén Level Toe

Stap 8: Bouw één gepolijst level. Niet drie halfbakken. Gebruik placeholder-kubussen voor geometrie. Gebruik het standaardpersonage van de vaardigheid. Stem het gevoel af - spronghoogte, cameratraagheid, deeltjesintensiteit.

Stap 9: Voeg een tutorial-overlay toe. Een tweeregelig "WASD om te bewegen, klik om te vuren" pop-up bij de eerste lancering bespaart je lancering van verwarde spelers die na 8 seconden opgeven. Cursor kan de overlay in React (of vanilla DOM) in 30 seconden genereren.

Stap 10: Push elk uur. Elke push krijgt een Vercel-preview URL. Stuur elke preview naar een vriend. De feedbacklus is het geheime wapen van deze stack.

Zondag 10:00 - 16:00: Polijsten

Stap 11: Voeg drie geluiden toe. Voetstapgeluid, ambient pad, win-geluid. Zelfs drie geluiden tillen een weekendprototype drastisch op. Gratis bronnen: freesound.org, opengameart.org.

Stap 12: Voeg 'juice' toe. Deeltjes bij impact, schermtrillingen bij botsing, getallenpop-ups bij score. 'Juice' is wat een 48-uurs build er in een GIF uit laat zien als een 6-maandsproject. Vraag Cursor om een "schermtrilling met intensiteit 0.3 gedurende 150 ms wanneer de speler schade oploopt" toe te voegen - het schrijft de camera-trillings-hook in vijf seconden.

Stap 13: Voer een Lighthouse-scan uit. Open de Vercel URL op een telefoon en voer Chrome DevTools Lighthouse uit. Three.js-bundels zijn meestal rond de 400 KB tot 1,5 MB. Als je boven de 3 MB komt, vraag dan aan Cursor om code-splitting op de zware modules in te schakelen. Vercel's gzip en brotli zullen de rest doen.

Stap 14: Bug-doorloop. Speel je live URL vijf keer achter elkaar. Los alles op wat twee keer breekt. Negeer alles wat één keer breekt.

Zondag 16:00 - 20:00: Lancering

Stap 15: (Optioneel) Stel een aangepast domein in. Als je van tevoren een naam-game.com hebt gekocht, voeg het dan toe in de projectinstellingen van Vercel. SSL is automatisch. Anders is de *.vercel.app URL prima - deze heeft HTTPS, is deelbaar en laadt overal.

Stap 16: Neem een GIF van 15 seconden op van het beste moment. Gebruik de live URL, niet localhost. De GIF is wat wordt aangeklikt op Twitter, Bluesky en Reddit.

Stap 17: Maak een itch.io pagina (optioneel maar zeer nuttig). Titel, tagline van één regel, drie screenshots, de GIF, besturing, credits, en een ingesloten iframe van je *.vercel.app (itch.io ondersteunt iframe-embeds voor HTML5-games). Nu heb je twee URL's - één voor casual delen en één voor het gamerpubliek.

Stap 18: Post de link. Twitter, Bluesky, je dev-community Discord, r/IndieDev, r/threejs, r/WebGames. Begin altijd met de GIF. Voeg altijd de URL toe. Als je een Vibe Skills-vaardigheid hebt gebruikt, vermeld dit dan in het devlog-bericht - andere ontwikkelaars die meelezen willen dezelfde starter.

Hoe de Drie Meest Voorkomende Vercel Implementatiefouten te Vermijden

Drie dingen breken bijna elke solo Three.js + Vercel weekend. Alle drie zijn 5-minuten fixes als je ze op vrijdagavond oppikt, en 5-uur durende konijnenholen als je ze op zondag om 19:00 uur ontdekt.

Onjuiste build output directory. Vite standaard is dist/. Vercel detecteert automatisch Vite en gebruikt dist/. Als je de output hebt aangepast, stel dan outputDirectory in vercel.json of de projectinstellingen in, anders is je implementatie een 404.
Assetpaden die lokaal werken, maar in productie 404 zijn. Gebruik relatieve paden of de Vite import.meta.env.BASE_URL helper voor elk runtime geladen GLB, textuur of audiobestand. Hardcoded /assets/... paden werken meestal, maar gekopieerde absolute Windows-paden absoluut niet.
CSP-headers die pointer lock of audio context blokkeren. First-person games hebben pointer lock nodig. Audio heeft gebruikersgestuurde activering nodig. Elke vaardigheid uit de 3D Games categorie wordt geleverd met het juiste headers-blok in vercel.json om dit af te handelen. Als je het zelf vanaf nul hebt geschreven, kopieer dan de configuratie uit de repo van de vaardigheid.

De implementatie werkt op vrijdag, dus wanneer deze op zondag breekt, is het altijd vanwege een recente wijziging. git bisect is je vriend. Nog beter: blijf elke 30 minuten pushen, zodat de gebroken commit klein is.

Veelgestelde Vragen

Houdt de gratis Vercel-laag echt stand als mijn game verkeer krijgt?

Ja, voor een weekendlancering en de eerste paar weken. De gratis laag geeft je 100 GB bandbreedte per maand, wat ongeveer 20.000 plays is van een Three.js-build van 5 MB. Als je die limiet bereikt, is het Pro-abonnement $20/maand en krijg je 1 TB. Voor een weekendpublicatie is gratis meer dan genoeg. Vaardigheden op Vibe Skills leveren build-configuraties die de bundelgrootte minimaliseren, waardoor de gratis laag verder wordt uitgerekt.

Kan ik een aangepast domein gebruiken op de gratis Vercel-laag?

Ja. De gratis laag ondersteunt aangepaste domeinen met automatische HTTPS. Koop een domein (Namecheap, Cloudflare Registrar, Porkbun), wijs het naar Vercel, en Vercel regelt het SSL-certificaat. De installatie duurt ongeveer 10 minuten. Als je geen domein hebt, is de naam-game.vercel.app URL kort genoeg om op elk platform te delen.

Is deze stack oké voor een game jam-inzending?

Ja, en het is een van de beste stacks voor jam-inzendingen. De meeste jams (Ludum Dare, GMTK, js13k, GitHub Game Off) accepteren elke web-speelbare URL. Een *.vercel.app link werkt precies zoals een itch.io URL voor juryleden. Veel jam-winnaars publiceren naar beide - itch.io voor het gamerpubliek, Vercel als de snelle canonieke URL.

Moet ik Three.js kennen voordat ik begin?

Je hebt genoeg JavaScript nodig om te lezen wat Cursor schrijft en waarden aan te passen. Je hoeft Three.js niet vanaf nul te schrijven. De vaardigheden op Vibe Skills genereren de engine-setup, camera, controller en build-configuratie. Cursor beheert de gameplay-code op basis van jouw beschrijvingen.

Wat gebeurt er als mijn Vercel build op zondag om 19:00 uur mislukt?

De meest voorkomende oorzaak is een TypeScript-fout of een ontbrekende omgevingsvariabele. Vercel toont het build-logboek met de falende regel gemarkeerd. Eén klik in het dashboard rolt terug naar de laatste werkende implementatie en promoveert deze naar productie. Omdat elke push een preview-implementatie is, ben je nooit meer dan één commit verwijderd van een werkende build. Daarom is elke 30 minuten pushen op zaterdag en zondag belangrijk.

Kan ik de code van een Vibe Skills 3D-gamevaardigheid verkopen of wijzigen?

Ja. Vaardigheden op Vibe Skills worden geleverd met een commercieel vriendelijke licentie waarmee je de code kunt uitbrengen in je eigen game op Vercel, itch.io, Steam, of waar dan ook. Makers behouden het IP van de vaardigheid, jij behoudt het IP van de game die erop is gebouwd.

Wat als ik Cursor niet wil gebruiken?

Elke AI-editor die projectbestanden kan bewerken, werkt. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - elk van hen kan de Three.js-scaffolding van een Vibe Skills-vaardigheid itereren. De vaardigheid zelf is editor-agnostisch.

Publiceer het Dit Weekend

De reden dat de meeste solo-ontwikkelaars nooit een 3D-game publiceren, is niet de engine, het genre of de skill ceiling. Het is de vrijdagavond waarop ze "gewoon nog wat meer research doen" en nooit beginnen. Het volgende gratis weekend dat je hebt, volg je het vier-fasenplan: installeer een Vibe Skills 3D-gamevaardigheid, push naar GitHub, verbind Vercel, publiceer voor vrijdag 20:00 uur, en besteed vervolgens zaterdag en zondag aan itereren op een live URL.

Je portfolio van tien weekend-gepubliceerde games op Vercel is meer waard dan je hypothetische droom-engineproject van zes maanden. Het gepubliceerde project wint altijd. De gratis Vercel URL is het bewijs.

Bekijk 3D-gamevaardigheden op Vibe Skills →

Sla de Three.js boilerplate marathon over. Installeer een 3D-gamevaardigheid op Vibe Skills, push naar Vercel en heb een live URL voor zondagavond.