Cum să lansezi un joc 3D pe Vercel în acest weekend (cu abilități AI)

Vibe Skills

Răsfoiește sute de abilități gata făcute pentru Claude, Cursor și multe altele.

Explorează Abilități

Începe Acum Gratuit

Lansează un joc 3D pe Vercel până Duminică seara: Ghidul de lansare de 48 de ore

Poți ajunge de la nimic vinerea seara la un link jocultau.vercel.app până la cina de duminică. Stiva tehnologică este Three.js, Cursor, o abilitate AI de la Vibe Skills și planul gratuit Vercel. Cost total pentru weekend: 0 $. Infrastructură totală pe care trebuie să o supraveghezi: tot zero.

Acesta nu este "construiește un prototip pe laptop și gata". Acesta este un URL public pe care oricine din lume îl poate deschide într-un browser, cu HTTPS, caching la nivel de edge și un domeniu personalizat dacă dorești unul. Abilitatea AI lansează scheletul Three.js și un fișier vercel.json funcțional. Cursor gestionează bucla de iterație. Vercel gestionează lansarea. Tu gestionezi designul.

Acest ghid este pentru dezvoltatorii independenți, coderi cu vibrație, participanți la hackathon și oricine s-a săturat de tab-uri localhost:5173 neterminate. Vom acoperi de ce funcționează această stivă, anatomia lansării de 48 de ore, cinci abilități de jocuri 3D create pentru fluxul de lucru și pas cu pas de vineri până duminică.

Vibe Skills

Răsfoiește sute de abilități gata făcute pentru Claude, Cursor și multe altele.

Explorează Abilități

Începe Acum Gratuit

De ce Vercel + Three.js + Abilități AI este Stiva pentru Dezvoltatori Solo

Vercel este cel mai leneș țintă de lansare posibilă pentru un joc Three.js. Fă un push pe GitHub, Vercel observă, construiește proiectul și îți oferă un URL în mai puțin de 60 de secunde. Nu este necesar să provizionezi servere, nici fișiere Docker, nici configurații NGINX, nici configurări SSL. Pachetul Three.js este doar HTML static, JS și active WebGL, exact ceea ce rețeaua edge a Vercel a fost creată pentru a servi.

Planul gratuit acoperă o lansare de weekend confortabil:

• 100 GB lățime de bandă pe lună. Un pachet Three.js de 5 MB la 10.000 de redări înseamnă 50 GB. Vei rămâne fără weekend înainte de a rămâne fără lățime de bandă.
• Lansări statice nelimitate cu HTTPS și un subdomeniu *.vercel.app.
• Suport pentru domenii personalizate pe planul gratuit - adu-ți propriul nume-joc.com dacă ai unul, altfel URL-ul gratuit vercel.app este partajabil pe fiecare platformă socială.
• Previzualizări ale lansărilor pentru fiecare commit - fiecare push primește propriul URL, astfel încât poți partaja o construcție cu un prieten și poți continua să iterezi fără a o strica.

Adaugă o abilitate AI de la Vibe Skills și fișierul boilerplate dispare și el. Configurarea scenei Three.js, controlerul jucătorului, pipeline-ul de construcție și un vercel.json pregătit pentru Vercel sunt generate printr-o singură comandă. Apoi, Cursor transformă restul weekendului într-o conversație în care descrii gameplay-ul pe care îl dorești și ajustezi rezultatul. Aceasta este stiva completă: o abilitate de pe piață pentru fundație, un editor AI pentru iterație și Vercel pentru lansare. Solo, gratuit și rapid.

Vibe Skills

Răsfoiește sute de abilități gata făcute pentru Claude, Cursor și multe altele.

Explorează Abilități

Începe Acum Gratuit

Anatomia de 48 de Ore: Conceptul de Vineri până la Lansarea de Duminică

Fiecare lansare de weekend care are loc urmează aceleași etape. Trucul este să planifici lansarea vineri, nu duminică după-amiază, astfel încât ultimele șase ore să fie dedicate finisării, în loc să te lupți cu o eroare de compilare.

Motivul pentru care acest lucru funcționează este push-ul de vineri pe Vercel. Odată ce URL-ul există, fiecare commit de sâmbătă și duminică se lansează automat. Nu există "panică de lansare duminică seara" deoarece lansarea a avut deja loc vineri și a funcționat pe pilot automat pe tot parcursul weekendului.

Cum arată "Vibe Coding"-ul unui joc 3D pe Vercel

Vibe coding înseamnă să descrii ceea ce dorești în engleză simplă și să lași un editor AI să scrie codul, apoi să iterezi pe baza rezultatului. Pentru un joc Three.js pe Vercel, bucla este neobișnuit de curată: fiecare schimbare în Cursor este la un pnpm dev distanță de feedback local, apoi la un git push distanță de un URL de previzualizare live, apoi lansat automat în producție pe main.

Un weekend de joc pe Vercel cu vibe coding arată așa:

1. Deschizi folderul starter al abilității în Cursor.
2. Descrii o funcționalitate în chat: "săritură dublă dacă spațiul este apăsat de două ori în mai puțin de 200ms".
3. Cursor editează fișierul controller-ului. Salvezi. pnpm dev se reîncarcă. Simți săritura în browser.
4. Dacă se simte bine, faci git push. Vercel construiește un URL de previzualizare. Îl trimiți unui prieten.
5. Faci merge în main când senzația este fixată. URL-ul de producție se actualizează în mai puțin de 60 de secunde.

AI-ul tastează. Vercel lansează. Tu te ocupi de senzație și de design.

5 Abilități AI pentru Jocuri 3D Care Fac Acest Lucru Posibil pe Vibe Skills

Aceste abilități sunt create pentru fluxul de lucru de weekend Vercel + Three.js + Cursor. Fiecare vine cu un proiect Three.js bazat pe Vite, un vercel.json funcțional, un pnpm build care produce un pachet static pe care Vercel îl poate servi de la edge și un traseu de lansare testat. Toate sunt în categoria Jocuri 3D pe Vibe Skills.

1. Starter pentru Jocuri Three.js + Vercel

Alegerea implicită. Generează o scenă Three.js cu un controller pentru jucător, cameră la persoana a treia, configurație de iluminare, skybox și un plan de sol cu coliziuni. Include un vercel.json care setează antetele de caching corecte pentru pachetele de active Three.js. pnpm dev rulează local; un clic în tabloul de bord Vercel conectează repository-ul GitHub și ai un URL live.

Ideal pentru: orice gen, cu excepția celor pur 2D. Folosește acest lucru dacă nu știi încă ce construiești.

2. Prim Personaj Vercel Walker

Un controller finisat la persoana întâi (WASD + blocare cursor mouse + gravitație + sprint + săritură) cu hook-uri pentru pași, mișcare a capului și un vercel.json care gestionează corect antetele CSP pentru blocarea cursorului. Aceasta dă bătăi de cap multor dezvoltatori solo în producție. Abilitatea ți-o rezolvă.

Ideal pentru: simulatoare de mers, prototipuri de horror, jocuri narative, expoziții de muzeu.

3. Kit de Arenă Shooter pentru Browser

O arenă de sus în jos (controler twin-stick, generator de valuri, AI de bază pentru inamici, sistem de proiectile, HUD scor) cu o construcție optimizată pentru Vercel care comprimă activele, împarte AI-ul în bucăți și încarcă muzica la cerere. Include hook-uri pentru multiplayer; weekendul lansează single-player.

Ideal pentru: shootere arcade, bullet hell, intrări de jam care trebuie să se încarce rapid pe mobil.

4. Puzzle Platformer Vercel

Un platformer la persoana a treia (săritură variabilă, timp de coyote, detectare margini), puncte de control, trei nivele stub pe care le poți edita în Blender sau în cod și o buclă de respawn. vercel.json este configurat pentru reîncărcări instantanee ale nivelului cu cache la edge, astfel încât testarea să fie rapidă pe telefon.

Ideal pentru: puzzle platformere, prototipuri de parkour, experimente de design de nivel.

5. Sandbox de Condus Vercel

Senzație de condus arcade (curbă de accelerație, fizică de drift, lag cameră, teren de bază) cu o mașină low-poly, un șablon de pistă și o lansare optimizată pentru mesh-uri mari de teren. Antetele HTTP presetate fac ca contextul WebGL să pornească mai rapid pe Safari, istoric cel mai lent browser pentru Three.js.

Ideal pentru: curse arcade, condus off-road, demo-uri de senzație de mașină pentru un portofoliu.

Explorează toate abilitățile de jocuri 3D pe Vibe Skills →

Pas cu Pas de Vineri până Duminică

Acesta este programul exact. Ajustează ora de începere, dar păstrează ordinea. Jalonul cheie este lansarea Vercel de vineri seara. Tot ce urmează este iterație.

Vineri 18:00 - 20:00: Alege Abilitatea, Push pe GitHub, Conectează Vercel

Pasul 1: Alege o abilitate de joc 3D pe Vibe Skills. Explorează categoria Jocuri 3D, alege-o pe cea care se potrivește genului tău și instalează starter-ul într-un folder nou. Deschide-l în Cursor. Ar trebui să vezi o scenă Three.js cu un jucător în mișcare până la ora 19:00.

Pasul 2: Creează un repository GitHub și fă push. git init, git remote add, git push. Folosește slug-ul jocului tău ca nume de repository (crystal-runner, lunar-fishing, orice altceva). Numele repository-ului devine adesea URL-ul tău.

Pasul 3: Conectează repository-ul la Vercel. Autentifică-te pe Vercel cu GitHub (gratuit), apasă "Add New Project", alege repository-ul. Vercel detectează automat Vite și configurează construcția. Apasă Deploy. În mai puțin de 60 de secunde, ai un URL crystal-runner.vercel.app. Deschide-l pe telefon. Partajează-l cu un prieten. Bara de lansare este acum zero pentru restul weekendului.

Vineri 20:00 - 22:00: Scrie Documentul de Design

Pasul 4: Răspunde la cinci întrebări în engleză simplă. Deschide o pagină Notion sau un fișier markdown în repository și răspunde:

• Ce face jucătorul la fiecare 5 secunde? (bucla de bază)
• Care este condiția de câștig și condiția de pierdere?
• Cât durează o rundă sau un nivel?
• Care este elementul vizual atrăgător? (paletă, iluminare, referință de stil)
• Care este singura funcționalitate care face jocul memorabil în 30 de secunde?

Pasul 5: Fă commit la documentul de design. Fă-i push în repository. Vercel va relansa. Disciplina de a face push la fiecare modificare semnificativă menține URL-ul live corect.

Sâmbătă 9:00 - 13:00: Construiește Mecanica de Bază

Pasul 6: Înlocuiește mecanica placeholder cu funcționalitatea ta unică. Aceasta este singura funcționalitate care contează. Folosește chatul Cursor pentru a o descrie ("când jucătorul ridică un cristal, îngheață inamicii din apropiere timp de 2 secunde și redă un clinchet"). Iterează local cu pnpm dev. Când se simte bine, fă push.

Pasul 7: Conectează starea de câștig/pierdere. O construcție de 60 de secunde cu un sfârșit real se simte ca un joc. O construcție de 60 de minute fără sfârșit se simte ca un demo tehnologic. Conectează întotdeauna ecranul de câștig mai întâi, apoi tot restul.

Sâmbătă 13:00 - 20:00: Adaugă Un Nivel

Pasul 8: Construiește un nivel finisat. Nu trei la jumătate coapte. Folosește cuburi placeholder pentru geometrie. Folosește personajul implicit al abilității. Ajustează senzația - înălțimea săriturii, lag-ul camerei, intensitatea particulelor.

Pasul 9: Adaugă un overlay de tutorial. Un popup de două propoziții "WASD pentru mișcare, clic pentru a trage" la prima pornire salvează lansarea de la jucători confuzi care renunță în 8 secunde. Cursor poate genera overlay-ul React (sau DOM simplu) în 30 de secunde.

Pasul 10: Fă push la fiecare oră. Fiecare push primește un URL de previzualizare Vercel. Trimite-l fiecărui prieten. Bucla de feedback este arma secretă a acestei stive.

Duminică 10:00 - 16:00: Finisare

Pasul 11: Adaugă trei sunete. Buclă de pași, sunet ambiental, semnal de câștig. Chiar și trei sunete ridică dramatic un prototip de weekend. Surse gratuite: freesound.org, opengameart.org.

Pasul 12: Adaugă efecte. Particule la impact, tremurături de ecran la lovitură, pop-up-uri numerice la scor. Efectele sunt ceea ce face ca o construcție de 48 de ore să arate ca una de 6 luni într-un GIF. Cere-i lui Cursor să adauge un "tremur de ecran de intensitate 0.3 pentru 150ms când jucătorul suferă daune" - va scrie hook-ul de tremur al camerei în cinci secunde.

Pasul 13: Rulează o verificare Lighthouse. Deschide URL-ul Vercel pe un telefon și rulează Chrome DevTools Lighthouse. Pachetele Three.js sunt de obicei în jur de 400 KB - 1.5 MB. Dacă depășești 3 MB, cere-i lui Cursor să activeze împărțirea codului pe modulele grele. Compresia gzip și brotli a Vercel va face restul.

Pasul 14: Verificare bug-uri. Joacă URL-ul tău live de cinci ori la rând. Remediază orice se strică de două ori. Ignoră orice se strică o dată.

Duminică 16:00 - 20:00: Lansare

Pasul 15: (Opțional) Setează un domeniu personalizat. Dacă ai cumpărat un nume-joc.com în prealabil, adaugă-l în setările proiectului Vercel. SSL este automat. Altfel, URL-ul *.vercel.app este perfect - are HTTPS, este partajabil și se încarcă peste tot.

Pasul 16: Înregistrează un GIF de 15 secunde cu cel mai bun moment. Folosește URL-ul live, nu localhost. GIF-ul este ceea ce este clicuit pe Twitter, Bluesky și Reddit.

Pasul 17: Creează o pagină itch.io (opțional, dar cu impact mare). Titlu, slogan de o singură linie, trei capturi de ecran, GIF-ul, controale, credite și un iframe cu *.vercel.app-ul tău (itch.io suportă embed-uri iframe pentru jocuri HTML5). Acum ai două URL-uri - unul pentru partajare ocazională și unul pentru publicul gamerilor.

Pasul 18: Postează linkul. Twitter, Bluesky, canalul tău Discord de dezvoltatori, r/IndieDev, r/threejs, r/WebGames. Începe întotdeauna cu GIF-ul. Include întotdeauna URL-ul. Dacă ai folosit o abilitate Vibe Skills, menționează-o în postarea de devlog - alți dezvoltatori care citesc vor dori același starter.

Cum să Eviti Cele Mai Comune Trei Eșecuri de Lansare pe Vercel

Trei lucruri strică aproape fiecare weekend solo Three.js + Vercel. Toate trei sunt remedieri de 5 minute dacă le prinzi vineri seara și iepuri de 5 ore dacă le descoperi duminică la 19:00.

• Directorul de ieșire de compilare greșit. Vite implicit este dist/. Vercel detectează automat Vite și folosește dist/. Dacă ai personalizat ieșirea, setează outputDirectory în vercel.json sau setările proiectului, altfel lansarea ta va fi un 404.
• Căi de active care funcționează local, dar dau 404 în producție. Folosește căi relative sau helper-ul Vite import.meta.env.BASE_URL pentru orice fișier GLB, textură sau audio încărcat la runtime. Căile codificate /assets/... funcționează de obicei, dar căile absolute copiate din Windows absolut nu vor funcționa.
• Antete CSP care blochează pointer lock sau contextul audio. Jocurile la persoana întâi necesită pointer lock. Audio necesită activare prin gestul utilizatorului. Orice abilitate din categoria Jocuri 3D vine cu blocul headers corect în vercel.json pentru a gestiona acest lucru. Dacă ai scris propriul cod de la zero, copiază configurația din repository-ul abilității.

Lansarea funcționează vineri, deci când acestea se strică duminică, este întotdeauna din cauza unei schimbări recente. git bisect este prietenul tău. Și mai bine: continuă să faci push la fiecare 30 de minute, astfel încât commit-ul stricat să fie mic.

Întrebări Frecvente

Va rezista planul gratuit Vercel dacă jocul meu primește trafic?

Da, pentru o lansare de weekend și primele câteva săptămâni. Planul gratuit îți oferă 100 GB lățime de bandă pe lună, ceea ce înseamnă aproximativ 20.000 de redări ale unui pachet Three.js de 5 MB. Dacă atingi acest plafon, planul Pro costă 20 $/lună și te duce la 1 TB. Pentru o lansare de weekend, gratuit este mai mult decât suficient. Abilitățile de pe Vibe Skills lansează configurații de compilare care minimizează dimensiunea pachetului, ceea ce extinde planul gratuit și mai mult.

Pot folosi un domeniu personalizat pe planul gratuit Vercel?

Da. Planul gratuit suportă domenii personalizate cu HTTPS automat. Cumpără un domeniu (Namecheap, Cloudflare Registrar, Porkbun), direcționează-l către Vercel, iar Vercel se ocupă de certificatul SSL. Configurarea durează aproximativ 10 minute. Dacă nu ai un domeniu, URL-ul nume-joc.vercel.app este suficient de scurt pentru a fi partajat pe orice platformă.

Este această stivă potrivită pentru o contribuție la un game jam?

Da, și este una dintre cele mai bune stive pentru contribuții la jam-uri. Majoritatea jam-urilor (Ludum Dare, GMTK, js13k, GitHub Game Off) acceptă orice URL jucabil pe web. Un link *.vercel.app funcționează exact ca un URL itch.io pentru judecători. Mulți câștigători de jam lansează pe ambele - itch.io pentru publicul gamerilor, Vercel ca URL canonic rapid.

Trebuie să știu Three.js înainte de a începe?

Ai nevoie de suficient JavaScript pentru a citi ceea ce scrie Cursor și a ajusta valorile. Nu trebuie să scrii Three.js de la zero. Abilitățile de pe Vibe Skills generează configurarea motorului, camera, controlerul și configurația de compilare. Cursor se ocupă de codul de gameplay din descrierile tale.

Ce se întâmplă dacă lansarea mea pe Vercel eșuează duminică la 19:00?

Cea mai comună cauză este o eroare TypeScript sau o variabilă de mediu lipsă. Vercel afișează logul de compilare cu linia care cauzează eroarea evidențiată. Un clic în tabloul de bord revine la ultima lansare funcțională și o promovează în producție. Deoarece fiecare push este o previzualizare a lansării, nu ești niciodată la mai mult de un commit de o construcție funcțională. Acesta este motivul pentru care este important să faci push la fiecare 30 de minute sâmbătă și duminică.

Pot vinde sau modifica codul unei abilități de joc 3D Vibe Skills?

Da. Abilitățile de pe Vibe Skills vin cu o licență prietenoasă comercial care îți permite să lansezi codul în propriul joc pe Vercel, itch.io, Steam sau oriunde altundeva. Creatorii păstrează proprietatea intelectuală a abilității, tu păstrezi proprietatea intelectuală a jocului construit deasupra.

Ce se întâmplă dacă nu vreau să folosesc Cursor?

Orice editor AI care poate edita fișierele proiectului funcționează. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - oricare dintre ele poate itera pe scheletul Three.js dintr-o abilitate Vibe Skills. Abilitatea în sine este independentă de editor.

Lansează-l Acest Weekend

Motivul pentru care majoritatea dezvoltatorilor solo nu lansează niciodată un joc 3D nu este motorul, genul sau plafonul de abilități. Este vineri seara, când "cercetează puțin mai mult" și nu încep niciodată. Următorul weekend liber pe care îl ai, urmează planul în patru faze: instalează o abilitate de joc 3D Vibe Skills, fă push pe GitHub, conectează Vercel, lansează până vineri la 20:00, apoi petrece sâmbătă și duminică iterând pe un URL live.

Portofoliul tău de zece jocuri lansate în weekend pe Vercel valorează mai mult decât proiectul tău ipotetic de motor de vis de șase luni. Cel lansat câștigă întotdeauna. URL-ul gratuit Vercel este dovada.

Explorează abilitățile de jocuri 3D pe Vibe Skills →

Sari peste maratonul boilerplate Three.js. Instalează o abilitate de joc 3D pe Vibe Skills, fă push pe Vercel și ai un URL live până duminică seara.