Wie man an diesem Wochenende ein 3D-Spiel auf Vercel veröffentlicht (mit KI-Kenntnissen)

Vibe Skills

Stöbern Sie durch Hunderte von fertigen Fähigkeiten für Claude, Cursor und mehr.

Fähigkeiten entdecken

Jetzt kostenlos starten

Ein 3D-Spiel bis Sonntagabend auf Vercel veröffentlichen: Das 48-Stunden-Deploy-Playbook

Sie können am Freitagabend von Null auf einen Link unter dein-spiel.vercel.app bis zum Abendessen am Sonntag gelangen. Der Stack besteht aus Three.js, Cursor, einer KI-Fähigkeit von Vibe Skills und der kostenlosen Stufe von Vercel. Gesamtkosten für das Wochenende: 0 $. Gesamte Infrastruktur, die Sie betreuen müssen: ebenfalls null.

Dies ist keine "Prototyp auf dem Laptop bauen und fertig nennen". Dies ist eine öffentliche URL, die jeder auf der Welt in einem Browser öffnen kann, mit HTTPS, Edge Caching und einer benutzerdefinierten Domain, falls Sie eine wünschen. Die KI-Fähigkeit liefert das Three.js-Grundgerüst und eine funktionierende vercel.json. Cursor kümmert sich um die Iterationsschleife. Vercel kümmert sich um das Deployment. Sie kümmern sich um das Design.

Diese Anleitung richtet sich an Indie-Entwickler, Vibe-Coder, Hackathon-Teilnehmer und alle, die keine Lust mehr auf halbfertige localhost:5173-Tabs haben. Wir erklären, warum dieser Stack funktioniert, die Anatomie eines 48-Stunden-Deploys, fünf 3D-Spiel-Fähigkeiten, die für diesen Workflow entwickelt wurden, und die Schritt-für-Schritt-Anleitung von Freitag bis Sonntag.

Vibe Skills

Stöbern Sie durch Hunderte von fertigen Fähigkeiten für Claude, Cursor und mehr.

Fähigkeiten entdecken

Jetzt kostenlos starten

Warum Vercel + Three.js + KI-Fähigkeiten der Solo-Entwickler-Stack ist

Vercel ist das faulste mögliche Deployment-Ziel für ein Three.js-Spiel. Pushen Sie zu GitHub, Vercel bemerkt es, baut das Projekt und gibt Ihnen innerhalb von 60 Sekunden eine URL zurück. Kein Server, der bereitgestellt werden muss, keine Docker-Datei, keine NGINX-Konfiguration, keine SSL-Einrichtung. Das Three.js-Bundle besteht nur aus statischem HTML, JS und WebGL-Assets, was genau das ist, wofür Vercels Edge-Netzwerk entwickelt wurde.

Die kostenlose Stufe deckt einen Wochenend-Launch bequem ab:

• 100 GB Bandbreite pro Monat. Ein 5-MB-Three.js-Build bei 10.000 Wiedergaben sind 50 GB. Ihnen geht das Wochenende aus, bevor Ihnen die Bandbreite ausgeht.
• Unbegrenzte statische Deployments mit HTTPS und einer *.vercel.app-Subdomain.
• Unterstützung für benutzerdefinierte Domains auf der kostenlosen Stufe - bringen Sie Ihre eigene name-spiel.com mit, wenn Sie eine haben, andernfalls ist die kostenlose vercel.app-URL auf jeder Social-Media-Plattform teilbar.
• Vorschau-Deployments für jeden Commit - jeder Push erhält eine eigene URL, sodass Sie einen Build mit einem Freund teilen und weiter iterieren können, ohne ihn zu unterbrechen.

Fügen Sie eine KI-Fähigkeit von Vibe Skills hinzu und der Boilerplate-Code verschwindet ebenfalls. Three.js-Szenen-Setup, Spielersteuerung, Build-Pipeline und ein Vercel-bereites vercel.json werden mit einem einzigen Befehl generiert. Dann verwandelt Cursor den Rest des Wochenendes in einen Chat, in dem Sie das gewünschte Gameplay beschreiben und die Ausgabe abstimmen. Das ist der vollständige Stack: eine Marktplatz-Fähigkeit für die Grundlage, ein KI-Editor für die Iteration und Vercel für das Deployment. Solo, kostenlos und schnell.

Vibe Skills

Stöbern Sie durch Hunderte von fertigen Fähigkeiten für Claude, Cursor und mehr.

Fähigkeiten entdecken

Jetzt kostenlos starten

Die 48-Stunden-Anatomie: Freitag-Konzept bis Sonntag-Deployment

Jedes Wochenend-Ship, das tatsächlich live geht, folgt denselben Schritten. Der Trick besteht darin, das Deployment am Freitag zu planen und nicht am Sonntagnachmittag, damit die letzten sechs Stunden für die Politur und nicht für die Bekämpfung eines Build-Fehlers verwendet werden.

Der Grund, warum das funktioniert, ist der Freitag-Push zu Vercel. Sobald die URL existiert, werden alle Samstags- und Sonntags-Commits automatisch bereitgestellt. Es gibt keine "Sonntagabend-Deployment-Panik", da das Deployment bereits am Freitag stattgefunden hat und das ganze Wochenende über automatisch läuft.

Wie "Vibe Coding" eines 3D-Spiels auf Vercel aussieht

Vibe Coding bedeutet, das Gewünschte in einfacher Sprache zu beschreiben und einen KI-Editor den Code schreiben zu lassen, dann die Ausgabe zu iterieren. Für ein Three.js-Spiel auf Vercel ist die Schleife ungewöhnlich sauber: Jede Änderung in Cursor ist ein pnpm dev von lokalem Feedback entfernt, dann ein git push von einer Live-Vorschau-URL entfernt, dann automatisch in die Produktion auf main bereitgestellt.

Ein Vibe-gecodetes Vercel-Spiel-Wochenende sieht so aus:

1. Öffnen Sie den Starter-Ordner der Fähigkeit in Cursor.
2. Beschreiben Sie eine Funktion im Chat: "Doppelsprung, wenn die Leertaste innerhalb von 200 ms zweimal gedrückt wird".
3. Cursor bearbeitet die Controller-Datei. Speichern. pnpm dev lädt neu. Sie spüren den Sprung im Browser.
4. Wenn es sich richtig anfühlt, git push. Vercel erstellt eine Vorschau-URL. Senden Sie sie an einen Freund.
5. Zusammenführen zu main, wenn das Gefühl stimmt. Die Produktions-URL wird innerhalb von 60 Sekunden aktualisiert.

Die KI macht die Tipparbeit. Vercel erledigt das Deployment. Sie kümmern sich um das Gefühl und das Design.

5 KI-3D-Spiel-Fähigkeiten, die das auf Vibe Skills ermöglichen

Diese Fähigkeiten sind für den Vercel + Three.js + Cursor-Wochenend-Workflow konzipiert. Jede von ihnen liefert ein Vite-basiertes Three.js-Projekt, eine funktionierende vercel.json, einen pnpm build, der ein statisches Bundle erzeugt, das Vercel vom Edge aus bedienen kann, und einen getesteten Deployment-Pfad. Alle sind in der Kategorie 3D-Spiele auf Vibe Skills zu finden.

1. Three.js + Vercel Game Starter

Die Standardwahl. Generiert eine Three.js-Szene mit einem Spieler-Controller, einer Third-Person-Kamera, einem Licht-Rig, einem Skybox und einer Bodenebene mit Kollisionen. Wird mit einer vercel.json geliefert, die die richtigen Caching-Header für Three.js-Asset-Bundles setzt. pnpm dev läuft lokal; ein Klick im Vercel-Dashboard verbindet das GitHub-Repository und Sie erhalten eine Live-URL.

Am besten geeignet für: jedes Genre außer reinem 2D. Verwenden Sie dies, wenn Sie noch nicht wissen, was Sie bauen.

2. First-Person Vercel Walker

Ein polierter First-Person-Controller (WASD + Mauszeiger-Sperre + Schwerkraft + Sprint + Sprung) mit Fußschritt-Hooks, Kopf wackeln und einer vercel.json, die die CSP-Header für die Mauszeiger-Sperre korrekt behandelt. Dies ist ein Stolperstein für viele Solo-Entwickler in der Produktion. Die Fähigkeit löst es für Sie.

Am besten geeignet für: Walking-Simulationen, Horror-Prototypen, erzählerische Spiele, Museumsausstellungen.

3. Browser Arena Shooter Kit

Eine Top-Down-Arena (Twin-Stick-Controller, Wellen-Spawner, grundlegende Gegner-KI, Projektil-System, Score-HUD) mit einem Vercel-optimierten Build, der Assets komprimiert, die KI aufteilt und Musik per Lazy-Loading lädt. Multiplayer-Hooks sind enthalten; das Wochenende liefert Single-Player.

Am besten geeignet für: Arcade-Shooter, Bullet Hell, Jam-Beiträge, die auf Mobilgeräten schnell geladen werden müssen.

4. Vercel Puzzle Platformer

Ein Third-Person-Platformer (variabler Sprung, Coyote-Zeit, Kanten-Erkennung), Checkpoints, drei Stub-Level, die Sie in Blender oder im Code bearbeiten können, und eine Respawn-Schleife. Die vercel.json ist für sofortige Edge-gecachte Level-Neuladungen konfiguriert, sodass sich das Testen auf einem Handy schnell anfühlt.

Am besten geeignet für: Puzzle-Platformer, Parkour-Prototypen, Level-Design-Experimente.

5. Vercel Driving Sandbox

Arcade-Fahrgefühl (Beschleunigungskurve, Drift-Physik, Kameranachlauf, grundlegendes Gelände) mit einem Low-Poly-Auto, einer Streckenvorlage und einem Deployment, das für große Geländemeshs optimiert ist. Voreingestellte HTTP-Header sorgen dafür, dass der WebGL-Kontext auf Safari, dem historisch langsamsten Browser für Three.js, schneller startet.

Am besten geeignet für: Arcade-Rennspiele, Offroad-Fahrten, Auto-Gefühl-Demos für ein Portfolio.

Alle 3D-Spiel-Fähigkeiten auf Vibe Skills durchsuchen →

Schritt für Schritt von Freitag bis Sonntag

Dies ist der genaue Zeitplan. Passen Sie die Startzeit an, aber behalten Sie die Reihenfolge bei. Der wichtigste Meilenstein ist das Vercel-Deployment am Freitagabend. Alles danach ist Iteration.

Freitag 18 Uhr - 20 Uhr: Fähigkeit auswählen, zu GitHub pushen, Vercel verbinden

Schritt 1: Wählen Sie eine 3D-Spiel-Fähigkeit auf Vibe Skills. Durchsuchen Sie die Kategorie 3D-Spiele, wählen Sie diejenige, die zu Ihrem Genre passt, und installieren Sie den Starter in einem frischen Ordner. Öffnen Sie ihn in Cursor. Bis 19 Uhr sollten Sie eine Three.js-Szene mit einem sich bewegenden Spieler sehen.

Schritt 2: Erstellen Sie ein GitHub-Repository und pushen Sie es. git init, git remote add, git push. Verwenden Sie den Slug Ihres Spiels als Repository-Namen (crystal-runner, lunar-fishing, was auch immer). Der Repository-Name wird oft zu Ihrer URL.

Schritt 3: Verbinden Sie das Repository mit Vercel. Melden Sie sich bei Vercel mit GitHub an (kostenlos), klicken Sie auf "Neues Projekt hinzufügen", wählen Sie das Repository aus. Vercel erkennt Vite automatisch und konfiguriert den Build. Klicken Sie auf "Bereitstellen". Innerhalb von 60 Sekunden haben Sie eine URL unter crystal-runner.vercel.app. Öffnen Sie sie auf Ihrem Handy. Teilen Sie sie mit einem Freund. Die Deployment-Bar ist nun für den Rest des Wochenendes auf null.

Freitag 20 Uhr - 22 Uhr: Das Design-Dokument schreiben

Schritt 4: Beantworten Sie fünf Fragen in einfacher Sprache. Öffnen Sie eine Notion-Seite oder eine Markdown-Datei im Repository und beantworten Sie:

• Was tut der Spieler alle 5 Sekunden? (die Kernschleife)
• Was ist die Gewinnbedingung und die Verlustbedingung?
• Wie lange dauert ein Durchlauf oder ein Level?
• Was ist der visuelle Haken? (Palette, Beleuchtung, Stilreferenz)
• Was ist das eine Feature, das dies in 30 Sekunden unvergesslich macht?

Schritt 5: Committen Sie das Design-Dokument. Pushen Sie es ins Repository. Vercel wird neu bereitstellen. Die Disziplin, jede sinnvolle Änderung zu pushen, hält die Live-URL ehrlich.

Samstag 9 Uhr - 13 Uhr: Die Kernmechanik aufbauen

Schritt 6: Ersetzen Sie die Platzhaltermechanik durch Ihr einziges Feature. Dies ist das einzige Feature, das zählt. Verwenden Sie den Cursor-Chat, um es zu beschreiben ("Wenn der Spieler einen Kristall aufhebt, frieren Sie nahegelegene Feinde für 2 Sekunden ein und spielen Sie einen Ton ab"). Iterieren Sie lokal mit pnpm dev. Wenn es sich richtig anfühlt, pushen Sie.

Schritt 7: Verdrahten Sie den Gewinn-/Verlustzustand. Ein 60-Sekunden-Build mit einem echten Ende fühlt sich wie ein Spiel an. Ein 60-Minuten-Build ohne Ende fühlt sich wie eine Tech-Demo an. Verdrahten Sie immer zuerst den Gewinnbildschirm, dann alles andere.

Samstag 13 Uhr - 20 Uhr: Ein Level hinzufügen

Schritt 8: Bauen Sie ein poliertes Level. Nicht drei halbfertige. Verwenden Sie Platzhalterwürfel für die Geometrie. Verwenden Sie die Standardfigur der Fähigkeit. Stimmen Sie das Gefühl ab - Sprunghöhe, Kameranachlauf, Partikelintensität.

Schritt 9: Fügen Sie ein Tutorial-Overlay hinzu. Ein Zwei-Satz-Popup "WASD zum Bewegen, klicken zum Feuern" beim ersten Start rettet Ihren Launch vor verwirrten Spielern, die nach 8 Sekunden aufgeben. Cursor kann das Overlay (React oder Vanilla DOM) in 30 Sekunden generieren.

Schritt 10: Pushen Sie stündlich. Jeder Push erhält eine Vercel-Vorschau-URL. Senden Sie jede davon an einen Freund. Die Feedbackschleife ist die Geheimwaffe dieses Stacks.

Sonntag 10 Uhr - 16 Uhr: Politur

Schritt 11: Fügen Sie drei Sounds hinzu. Fußschritt-Loop, Ambient-Pad, Gewinn-Ton. Selbst drei Sounds heben einen Wochenend-Prototyp dramatisch an. Kostenlose Quellen: freesound.org, opengameart.org.

Schritt 12: Fügen Sie Saftigkeit hinzu. Partikel beim Treffer, Bildschirmerschütterung beim Aufprall, Zahlen-Popups bei Punkten. Saftigkeit ist das, was einen 48-Stunden-Build in einem GIF wie einen 6-Monate-Build aussehen lässt. Bitten Sie Cursor, eine "Bildschirmerschütterung der Intensität 0,3 für 150 ms hinzuzufügen, wenn der Spieler Schaden nimmt" - er wird den Bildschirmerschütterungs-Hook in fünf Sekunden schreiben.

Schritt 13: Führen Sie einen Lighthouse-Pass durch. Öffnen Sie die Vercel-URL auf einem Handy und führen Sie Chrome DevTools Lighthouse aus. Three.js-Bundles sind normalerweise etwa 400 KB bis 1,5 MB groß. Wenn Sie über 3 MB liegen, bitten Sie Cursor, Code-Splitting für die schweren Module zu aktivieren. Vercels Gzip und Brotli kümmern sich um den Rest.

Schritt 14: Bug-Pass. Spielen Sie Ihre Live-URL fünfmal hintereinander. Beheben Sie alles, was zweimal fehlschlägt. Ignorieren Sie alles, was einmal fehlschlägt.

Sonntag 16 Uhr - 20 Uhr: Launch

Schritt 15: (Optional) Benutzerdefinierte Domain einrichten. Wenn Sie eine name-spiel.com im Voraus gekauft haben, fügen Sie sie in den Projekteinstellungen von Vercel hinzu. SSL ist automatisch. Andernfalls ist die *.vercel.app-URL in Ordnung - sie hat HTTPS, ist teilbar und lädt überall.

Schritt 16: Nehmen Sie ein 15-sekündiges GIF des besten Moments auf. Verwenden Sie die Live-URL, nicht localhost. Das GIF ist das, was auf Twitter, Bluesky und Reddit geklickt wird.

Schritt 17: Erstellen Sie eine itch.io-Seite (optional, aber sehr nützlich). Titel, ein Ein-Zeilen-Tagline, drei Screenshots, das GIF, Steuerung, Credits und eine Einbettung Ihres *.vercel.app-iframes (itch.io unterstützt iframe-Einbettungen für HTML5-Spiele). Jetzt haben Sie zwei URLs - eine für zufälliges Teilen und eine für die Gamer-Zielgruppe.

Schritt 18: Posten Sie den Link. Twitter, Bluesky, Ihr Entwickler-Community-Discord, r/IndieDev, r/threejs, r/WebGames. Beginnen Sie immer mit dem GIF. Fügen Sie immer die URL hinzu. Wenn Sie eine Vibe Skills-Fähigkeit verwendet haben, erwähnen Sie sie im Devlog-Post - andere Entwickler, die mitlesen, wollen denselben Starter.

So vermeiden Sie die drei häufigsten Vercel-Deployment-Fehler

Drei Dinge verderben fast jedes Solo-Three.js + Vercel-Wochenende. Alle drei sind 5-Minuten-Korrekturen, wenn Sie sie am Freitagabend entdecken, und 5-Stunden-Hasenlöcher, wenn Sie sie am Sonntag um 19 Uhr entdecken.

• Falsches Build-Ausgabeverzeichnis. Vite standardmäßig auf dist/. Vercel erkennt Vite automatisch und verwendet dist/. Wenn Sie das Ausgabe-Verzeichnis angepasst haben, setzen Sie outputDirectory in vercel.json oder den Projekteinstellungen, andernfalls wird Ihr Deployment ein 404 sein.
• Asset-Pfade, die lokal funktionieren, aber in der Produktion 404 ergeben. Verwenden Sie relative Pfade oder den Vite-Helfer import.meta.env.BASE_URL für alle zur Laufzeit geladenen GLB-, Textur- oder Audiodateien. Fest kodierte /assets/...-Pfade funktionieren normalerweise, aber kopierte absolute Windows-Pfade funktionieren absolut nicht.
• CSP-Header, die Mauszeiger-Sperre oder Audio-Kontexte blockieren. First-Person-Spiele benötigen Mauszeiger-Sperre. Audio benötigt Benutzergestenaktivierung. Jede Fähigkeit aus der Kategorie 3D-Spiele wird mit dem richtigen headers-Block in vercel.json geliefert, um dies zu handhaben. Wenn Sie Ihre eigene von Grund auf neu geschrieben haben, kopieren Sie die Konfiguration aus dem Repository der Fähigkeit.

Das Deployment funktioniert am Freitag, also wenn diese am Sonntag fehlschlagen, liegt es immer an einer kürzlichen Änderung. git bisect ist Ihr Freund. Noch besser: Pushen Sie alle 30 Minuten, damit der fehlerhafte Commit klein ist.

Häufig gestellte Fragen

Hält die kostenlose Vercel-Stufe wirklich, wenn mein Spiel Traffic bekommt?

Ja, für einen Wochenend-Launch und die ersten paar Wochen. Die kostenlose Stufe bietet Ihnen 100 GB Bandbreite pro Monat, was ungefähr 20.000 Wiedergaben eines 5-MB-Three.js-Builds entspricht. Wenn Sie diese Grenze erreichen, kostet der Pro-Plan 20 $/Monat und erhöht Sie auf 1 TB. Für einen Wochenend-Ship ist kostenlos mehr als genug. Fähigkeiten auf Vibe Skills werden mit Build-Konfigurationen geliefert, die die Bundle-Größe minimieren, was die kostenlose Stufe weiter streckt.

Kann ich auf der kostenlosen Vercel-Stufe eine benutzerdefinierte Domain verwenden?

Ja. Die kostenlose Stufe unterstützt benutzerdefinierte Domains mit automatischem HTTPS. Kaufen Sie eine Domain (Namecheap, Cloudflare Registrar, Porkbun), richten Sie sie auf Vercel ein und Vercel kümmert sich um das SSL-Zertifikat. Die Einrichtung dauert etwa 10 Minuten. Wenn Sie keine Domain haben, ist die URL name-spiel.vercel.app kurz genug, um sie auf jeder Plattform zu teilen.

Ist dieser Stack für eine Game-Jam-Einreichung geeignet?

Ja, und es ist einer der besten Stacks für Jam-Einreichungen. Die meisten Jams (Ludum Dare, GMTK, js13k, GitHub Game Off) akzeptieren jede web-spielbare URL. Ein *.vercel.app-Link funktioniert für Juroren genauso wie eine itch.io-URL. Viele Jam-Gewinner veröffentlichen auf beiden - itch.io für das Gamer-Publikum, Vercel als schnelle kanonische URL.

Muss ich Three.js kennen, bevor ich anfange?

Sie benötigen genügend JavaScript, um zu lesen, was Cursor schreibt, und Werte anzupassen. Sie müssen Three.js nicht von Grund auf neu schreiben. Die Fähigkeiten auf Vibe Skills generieren die Engine-Einrichtung, Kamera, Controller und Build-Konfiguration. Cursor kümmert sich um den Gameplay-Code aus Ihren Beschreibungen.

Was passiert, wenn mein Vercel-Build am Sonntag um 19 Uhr fehlschlägt?

Die häufigste Ursache ist ein TypeScript-Fehler oder eine fehlende Umgebungsvariable. Vercel zeigt das Build-Log mit der fehlerhaften Zeile hervorgehoben an. Ein Klick im Dashboard rollt zum letzten funktionierenden Deployment zurück und befördert es in die Produktion. Da jeder Push ein Vorschau-Deployment ist, sind Sie nie mehr als einen Commit von einem funktionierenden Build entfernt. Deshalb ist es wichtig, am Samstag und Sonntag alle 30 Minuten zu pushen.

Kann ich den Code einer Vibe Skills 3D-Spiel-Fähigkeit verkaufen oder modifizieren?

Ja. Fähigkeiten auf Vibe Skills werden mit einer kommerzfreundlichen Lizenz geliefert, die es Ihnen ermöglicht, den Code in Ihrem eigenen Spiel auf Vercel, itch.io, Steam oder anderswo zu veröffentlichen. Entwickler behalten das geistige Eigentum der Fähigkeit, Sie behalten das geistige Eigentum des darauf aufgebauten Spiels.

Was, wenn ich Cursor nicht benutzen möchte?

Jeder KI-Editor, der Projektdateien bearbeiten kann, funktioniert. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - jeder davon kann das Three.js-Grundgerüst einer Vibe Skills-Fähigkeit iterieren. Die Fähigkeit selbst ist Editor-unabhängig.

Veröffentlichen Sie es dieses Wochenende

Der Grund, warum die meisten Solo-Entwickler kein 3D-Spiel veröffentlichen, ist nicht die Engine, das Genre oder die Fähigkeitsgrenze. Es ist der Freitagabend, an dem sie "noch ein bisschen recherchieren" und nie anfangen. Das nächste freie Wochenende, das Sie haben, befolgen Sie den Vier-Phasen-Plan: Installieren Sie eine Vibe Skills 3D-Spiel-Fähigkeit, pushen Sie zu GitHub, verbinden Sie Vercel, deployen Sie bis Freitagabend 20 Uhr, und verbringen Sie dann Samstag und Sonntag mit der Iteration auf einer Live-URL.

Ihr Portfolio von zehn am Wochenende veröffentlichten Spielen auf Vercel ist mehr wert als Ihr hypothetisches Sechs-Monate-Traum-Engine-Projekt. Das veröffentlichte gewinnt immer. Die kostenlose Vercel-URL ist der Beweis.

3D-Spiel-Fähigkeiten auf Vibe Skills durchsuchen →

Überspringen Sie den Three.js-Boilerplate-Marathon. Installieren Sie eine 3D-Spiel-Fähigkeit auf Vibe Skills, pushen Sie zu Vercel und haben Sie bis Sonntagabend eine Live-URL.