Kuidas sel nädalavahetusel 3D-mängu Vercelisse saata (AI oskustega)

Vibe Skills

Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.

Sirvi oskusi

Alusta tasuta kohe

Mängi Vercelil 3D-mäng välja pühapäeva õhtuks: 48-tunnine kasutuselevõtu juhend

Reede õhtust kuni pühapäeva õhtusöögini saad olla nullist valmis lingil sinu-mäng.vercel.app. Kasutatav tehnoloogia on Three.js, Cursor, tehisintellekti oskus Vibe Skills ja Verceli tasuta tase. Nädalavahetuse kogukulu: 0 dollarit. Infrastruktuur, mille eest pead hoolitsema: samuti null.

See ei ole "ehita prototüüp oma sülearvutil ja kutsu see valmis." See on avalik URL, mille igaüks maailmas saab brauseris avada, koos HTTPS-i, servusüsteemi vahemälu ja soovi korral kohandatud domeeniga. Tehisintellekti oskus tarnib Three.js alusraamistiku ja töötava vercel.json. Cursor haldab iteratsioonitsüklit. Vercel haldab kasutuselevõttu. Sina haldad disaini.

See juhend on mõeldud iseseisvatele arendajatele, "vibe-koodijatele", häkatoni osalejatele ja kõigile, kes on väsinud poolikute localhost:5173 vahekaartide haldamisest. Vaatleme, miks see tehnoloogiastablik töötab, 48-tunnise kasutuselevõtu anatoomiat, viis Three.js mängu oskust, mis on loodud töövoo jaoks, ning reedest pühapäevani samm-sammult juhendit.

Vibe Skills

Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.

Sirvi oskusi

Alusta tasuta kohe

Miks Vercel + Three.js + tehisintellekti oskused on ühtse arendaja tehnoloogiastablik

Vercel on Three.js mängude kõige laisem võimalik kasutuselevõtu sihtmärk. Pushige GitHubi, Vercel märkab seda, ehitab projekti ja annab teile 60 sekundi jooksul URL-i tagasi. Ühtegi serverit pole vaja ette valmistada, ühtegi Docker faili, ühtegi NGINX konfiguratsiooni, ühtegi SSL-i seadistust. Three.js pakett on lihtsalt staatiline HTML, JS ja WebGL ressursid, mis on täpselt see, milleks Verceli servusüsteem on loodud.

Tasuta tase katab nädalavahetuse käivitamise mugavalt:

• 100 GB ribalaius kuus. 5 MB Three.js pakett 10 000 mängukorraga on 50 GB. Sa lõpetad nädalavahetuse enne, kui ribalaius otsa saab.
• Piiramatud staatilised kasutuselevõtud HTTPS-i ja *.vercel.app alamsildiga.
• Kohandatud domeeni tugi tasuta tasemel - tooge oma nimi-mäng.com, kui see teil olemas on, muidu on tasuta vercel.app URL jagatav igal sotsiaalplatvormil.
• Eelvaate kasutuselevõtud iga muudatuse jaoks - iga push saab oma URL-i, nii et saate ehitise sõbraga jagada ja edasi arendada, seda rikkumata.

Lisage tehisintellekti oskus Vibe Skills ja ka tüütu alguskaader kaob. Three.js stseeni seadistus, mängija kontroller, ehitusprotsess ja Vercel-valmis vercel.json genereeritakse ühe käsuga. Seejärel muudab Cursor ülejäänud nädalavahetuse vestluseks, kus kirjeldad soovitavat mängukäiku ja häälestad väljundit. See on täielik tehnoloogiastablik: turuplatsi oskus alusraamistiku jaoks, tehisintellekti redaktor iteratsiooni jaoks ja Vercel kasutuselevõtuks. Üksi, tasuta ja kiire.

Vibe Skills

Sirvige sadu valmisolevaid oskusi Claude'i, Cursori ja muude jaoks.

Sirvi oskusi

Alusta tasuta kohe

48-tunnine anatoomia: reede kontseptsioonist pühapäeva kasutuselevõtuni

Iga nädalavahetuse edukas käivitamine järgib samu etappe. Trikk on planeerida kasutuselevõtt reedel, mitte pühapäeva pärastlõunal, et viimased kuus tundi läheksid poleerimisele, mitte ehitusvea vastu võitlemisele.

Põhjus, miks see töötab, on reedesed pushid Vercelile. Kui URL on olemas, kasutatakse laupäevaseid ja pühapäevaseid muudatusi automaatselt. Ei ole "pühapäeva õhtust kasutuselevõtu paanikat", sest kasutuselevõtt toimus juba reedel ja töötab kogu nädalavahetuse autopiloodil.

Milline näeb välja 3D-mängu "Vibe-kodeerimine" Vercelil

Vibe-kodeerimine tähendab tavalises inglise keeles kirjeldamist, mida soovite, ja lasta tehisintellekti redaktoril koodi kirjutada, seejärel väljundit täiustada. Three.js mängu Vercelil puhul on tsükkel ebatavaliselt puhas: iga muudatus Cursoris on pnpm dev kaugusel kohalikust tagasisidest, seejärel git push kaugusel otse-eelvaate URL-ist, seejärel automaatselt tootmisesse main-is.

Vibe-kodeeritud Vercel mängu nädalavahetus näeb välja selline:

1. Avage oskuse alguskaust Cursoris.
2. Kirjeldage vestluses funktsiooni: "kahekordne hüpe, kui ruumi vajutatakse kaks korda 200 ms jooksul".
3. Cursor muudab kontrolleri faili. Salvestage. pnpm dev laadib uuesti. Tunnete hüpet brauseris.
4. Kui tundub õige, tehke git push. Vercel ehitab eelvaate URL-i. Saatke see sõbrale.
5. Ühendage main-iga, kui tunnetus on lukustatud. Tootmis-URL värskendatakse 60 sekundi jooksul.

Tehisintellekt teeb tippimise. Vercel teeb kasutuselevõtu. Sina teed tunnetuse ja disaini.

5 tehisintellekti 3D mängu oskust, mis muudavad selle Vibe Skillsil võimalikuks

Need oskused on loodud Vercel + Three.js + Cursor nädalavahetuse töövoo jaoks. Igaüks tarnib Vite-põhise Three.js projekti, töötava vercel.json, pnpm build, mis toodab staatilise paketi, mida Vercel saab servusüsteemist serveerida, ja testitud kasutuselevõtu tee. Kõik on Vibe Skillsi 3D mängude kategoorias.

1. Three.js + Vercel mängu algus

Vaikimisi valik. Genereerib Three.js stseeni koos mängija kontrolleri, kolmanda isiku kaamera, valguskomplekti, taevakasti ja kokkupõrgetega maapinnaga. Tarnitakse koos vercel.json-iga, mis seab Three.js ressursipakettide jaoks õiged vahemälu päised. pnpm dev töötab lokaalselt; üks klõps Verceli juhtpaneelil ühendab GitHubi repoga ja teil on tööline URL.

Parim: iga žanri jaoks, välja arvatud puhas 2D. Kasutage seda, kui te veel ei tea, mida ehitate.

2. Esimese isiku Vercel kõndija

Täiustatud esimese isiku kontroller (WASD + hiire kursori lukustus + gravitatsioon + spurt + hüpe) koos jalajälje konksude, peapehmenduse ja vercel.json-iga, mis käsitleb kursori lukustuse CSP päiseid õigesti. See tekitab paljudele üksikutele arendajatele probleeme tootmises. Oskus lahendab selle teie jaoks.

Parim: kõndimis-simulatsioonid, õudusprototüübid, narratiivsed mängud, muuseuminäitused.

3. Brauseri areeni tulistamiskomplekt

Ülalt-alla areen (topelt-keerdtugikontroller, lainegeneraator, põhi-vaenlase tehisintellekt, projektiilsüsteem, skoor HUD) koos Vercel-häälestatud ehitisega, mis pakib ressursid kokku, jagab tehisintellekti koodi ja laadib muusikat hiljem. Mitme mängija konksud on kaasas; nädalavahetus tarnib ühe mängijaga.

Parim: arkaadlaskurid, kuuli põrgu, mänguürituste kirjed, mis peavad mobiilis kiiresti laadima.

4. Vercel Puzzle Platformer

Kolmanda isiku platvormimängija (muutuv hüpe, rebastaimer, serva tuvastus), kontrollpunktid, kolm ajutist taset, mida saab muuta Blenderis või koodis, ja taaskäivitus tsükkel. vercel.json on konfigureeritud vahetu servusüsteemi vahemäluga taseme taaskäivitamiseks, nii et mängimine tundub telefonis kiire.

Parim: puzzle-platvormimängijad, parkuuriprototüübid, taseme-disaini eksperimendid.

5. Vercel sõidu liivakast

Arkaad sõidutunnetus (kiirenduse kõver, triivi füüsika, kaamera viivitus, põhitükid maapinnaga) koos madala polügooniga autoga, raja malliga ja ehitisega, mis on häälestatud suurte maastikumudelite jaoks. Eelnevalt seatud HTTP päised panevad WebGL konteksti kiiremini käivituma Safari-s, mis on ajalooliselt olnud Three.js jaoks kõige aeglasem brauser.

Parim: arkaad-võidusõit, maastikusõit, auto-tunnetuse demonstratsioonid portfoolio jaoks.

Sirvi kõiki 3D mängude oskusi Vibe Skillsil →

Reede-pühapäev samm-sammult

See on täpne ajakava. Kohandage algusaega, kuid säilitage järjekord. Peamine verstapost on reedeõhtune Verceli kasutuselevõtt. Kõik pärast seda on iteratsioon.

Reede 18:00 - 20:00: Valige oskus, tehke push GitHubi, ühendage Vercel

Samm 1: Valige Vibe Skillsilt 3D mängu oskus. Sirvige 3D mängude kategooriat, valige žanrile sobiv ja installige algus värskesse kausta. Avage see Cursoris. Kell 19:00 peaksite nägema Three.js stseeni koos liikuva mängijaga.

Samm 2: Looge GitHubi repositoorium ja tehke push. git init, git remote add, git push. Kasutage mängu nimekaitsena repositooriumi nime (crystal-runner, lunar-fishing, ükskõik mida). Repositooriumi nimi saab sageli teie URL-iks.

Samm 3: Ühendage repositoorium Verceliga. Logige GitHubiga Vercelisse sisse (tasuta), klõpsake "Add New Project", valige repositoorium. Vercel tuvastab automaatselt Vite ja konfigureerib ehitise. Klõpsake Deploy. 60 sekundi jooksul on teil URL crystal-runner.vercel.app. Avage see oma telefonis. Jagage ühe sõbraga. Kasutuslevõtu riba on nüüd ülejäänud nädalavahetuse jaoks null.

Reede 20:00 - 22:00: Kirjutage disainidokument

Samm 4: Vastake viiele küsimusele tavalises inglise keeles. Avage repositooriumis Notion leht või markdown fail ja vastake:

• Mida mängija teeb iga 5 sekundi järel? (põhi-tsükkel)
• Mis on võidu ja kaotuse tingimus?
• Kui pikk on üks jooks või üks tase?
• Mis on visuaalne konks? (värvipalett, valgustus, stiili viide)
• Mis on see üks funktsioon, mis teeb selle 30 sekundi jooksul meeldejäävaks?

Samm 5: Tehke disainidokument koodi. Pushige see repositooriumi. Vercel võtab uuesti kasutusele. Iga tähendusrikka muudatuse pushimise distsipliin hoiab töölist URL-i ausana.

Laupäev 9:00 - 13:00: Ehitage põhi-mehaanika

Samm 6: Asendage kohahoidja funktsioon oma ühe funktsiooniga. See on ainus funktsioon, mis loeb. Kasutage Cursor vestlust selle kirjeldamiseks ("kui mängija võtab kristalli, külmutage läheduses olevad vaenlased 2 sekundiks ja mängige helinat"). Itereerige lokaalselt pnpm dev-iga. Kui tundub õige, tehke push.

Samm 7: Ühendage võidu/kaotuse seis. 60-sekundiline ehitis koos päris lõpuga tundub mänguna. 60-minutiline ehitis ilma lõputa tundub tehnoloogilise demona. Ühendage võidu-ekraan alati esimesena, seejärel kõik muu.

Laupäev 13:00 - 20:00: Lisage üks tase

Samm 8: Ehitage üks poleeritud tase. Mitte kolm poolikut. Kasutage geomeetria jaoks kohahoidja kuubikuid. Kasutage oskuse standardset tegelast. Häälestage tunnetust - hüppe kõrgus, kaamera viivitus, osakeste intensiivsus.

Samm 9: Lisage õpetuse ülekatte. Kahe lause pikkune "WASD liikumiseks, klõpsake tulistamiseks" hüpikaken esmakordsel käivitamisel päästab teie käivituse segaduses mängijatelt, kes annavad alla 8 sekundi pärast. Cursor saab Reacti (või tavalise DOM) ülekatte genereerida 30 sekundiga.

Samm 10: Tehke push iga tund. Iga push saab Verceli eelvaate URL-i. Saatke igaüks sõbrale. Tagasiside tsükkel on selle tehnoloogiastablikri saladus.

Pühapäev 10:00 - 16:00: Poleerimine

Samm 11: Lisage kolm heli. Jalajälje loop, ambientne pad, võidu helin. Isegi kolm heli tõstavad nädalavahetuse prototüüpi dramaatiliselt. Tasuta allikad: freesound.org, opengameart.org.

Samm 12: Lisage "mahl". Osakesed tabamisel, ekraani värisemine põrkumisel, numbrite hüpikaknad skoorimisel. "Mahl" on see, mis muudab 48-tunnise ehitise 6-kuuliseks GIF-is. Küsige Cursorilt, et see lisaks "ekraani värisemise intensiivsusega 0.3 150 ms jooksul, kui mängija saab kahju" - see kirjutab kaamera-värisemise konksu viie sekundiga.

Samm 13: Käivitage Lighthouse pass. Avage telefonis Verceli URL ja käivitage Chrome DevTools Lighthouse. Three.js paketid on tavaliselt umbes 400 KB kuni 1,5 MB. Kui olete üle 3 MB, paluge Cursoril lubada raskete moodulite jaoks koodi jaotamine. Verceli gzip ja brotli hoolitsevad ülejäänu eest.

Samm 14: Veaparandus. Mängige oma töölist URL-i viis korda järjest. Parandage kõik, mis läheb kaks korda katki. Ignoreerige kõike, mis läheb üks kord katki.

Pühapäev 16:00 - 20:00: Käivitamine

Samm 15: (Valikuline) Seadistage kohandatud domeen. Kui ostsite nimi-mäng.com ette, lisage see Verceli projektiseadetes. SSL on automaatne. Muidu sobib *.vercel.app URL - sellel on HTTPS, see on jagatav ja see laadib kõikjal.

Samm 16: Salvestage 15-sekundiline GIF parimast hetkest. Kasutage töölist URL-i, mitte localhosti. GIF on see, millele klõpsatakse Twitteris, Blueskys ja Redditil.

Samm 17: Looge itch.io leht (valikuline, kuid kõrge mõjuga). Pealkiri, üherealine tunnuslause, kolm ekraanitõmmist, GIF, juhtnupud, krediidid ja teie *.vercel.app iframe'i sisseehitatud (itch.io toetab iframe'i sisseehitusi HTML5 mängude jaoks). Nüüd on teil kaks URL-i - üks juhuslikuks jagamiseks ja üks mängijatele.

Samm 18: Postitage link. Twitter, Bluesky, teie arenduskogukonna Discord, r/IndieDev, r/threejs, r/WebGames. Alati alustage GIF-iga. Alati lisage URL. Kui kasutasite Vibe Skillsi oskust, mainige seda arenduspäeviku postituses - teised arendajad, kes seda jälgivad, soovivad sama algust.

Kuidas vältida kolme kõige levinumat Verceli kasutuselevõtu tõrget

Kolm asja rikuvad peaaegu igaüks Three.js + Vercel nädalavahetuse. Kõik kolm on 5-minutilised parandused, kui need reedel avastate, ja 5-tunnised jänesekäigud, kui avastate need pühapäeval kell 19:00.

• Vale ehituse väljundkaust. Vite vaikimisi dist/. Vercel tuvastab Vite automaatselt ja kasutab dist/. Kui olete väljundit kohandanud, määrake outputDirectory failis vercel.json või projektiseadetes või teie kasutuselevõtt on 404.
• Ressursside teed, mis töötavad lokaalselt, kuid 404 tootmises. Kasutage mis tahes ajutiselt laaditava GLB, tekstuuri või heli faili jaoks suhtelisi teid või Vite import.meta.env.BASE_URL abifunktsiooni. Kõvakoodiga /assets/... teed töötavad tavaliselt, kuid kopeeritud absoluutsed Windowsi teed kindlasti mitte.
• CSP päised, mis blokeerivad kursori lukustuse või heli konteksti. Esimese isiku mängud vajavad kursori lukustust. Heli vajab kasutaja žesti aktiveerimist. Iga oskus 3D mängude kategooriast tarnitakse koos õige headers blokiga failis vercel.json, et seda käsitleda. Kui kirjutasite oma nullist, kopeerige konfiguratsioon oskuse repositooriumist.

Kasutuslevõtt töötab reedel, nii et kui need pühapäeval katki lähevad, on see alati hiljutise muudatuse tõttu. git bisect on teie sõber. Veel parem: tehke muudatusi iga 30 minuti järel, nii et katkenud muudatus on väike.

Korduma kippuvad küsimused

Kas Verceli tasuta tase peab tõesti vastu, kui minu mäng saab liiklust?

Jah, nädalavahetuse käivituse ja esimeste nädalate jaoks. Tasuta tase annab teile 100 GB ribalaiust kuus, mis on ligikaudu 20 000 mängukorda 5 MB Three.js ehitise kohta. Kui te selle lae saavutate, on Pro plaan 20 dollarit kuus ja see tõstab teid 1 TB-ni. Nädalavahetuse käivituse jaoks on tasuta rohkem kui piisavalt. Vibe Skillsi oskused tarnivad ehituskinnitusi, mis minimeerivad paketi suuruse, mis venib tasuta taset veelgi.

Kas ma saan Verceli tasuta tasemel kasutada kohandatud domeeni?

Jah. Tasuta tase toetab kohandatud domeene automaatse HTTPS-iga. Ostke domeen (Namecheap, Cloudflare Registrar, Porkbun), suunake see Vercelisse ja Vercel hoolitseb SSL-sertifikaadi eest. Seadistamine võtab umbes 10 minutit. Kui teil pole domeeni, on nimi-mäng.vercel.app URL piisavalt lühike, et jagada seda igal platvormil.

Kas see tehnoloogiastablik sobib mängude võistluse esitamiseks?

Jah, ja see on üks parimaid tehnoloogiastablikuid mängude võistluste jaoks. Enamik võistlusi (Ludum Dare, GMTK, js13k, GitHub Game Off) aktsepteerib iga veebis mängitavat URL-i. *.vercel.app link töötab kohtunike jaoks täpselt nagu itch.io URL. Paljud võistluse võitjad esitavad mõlemasse - itch.io mängijate publiku jaoks, Vercel kiire kui peamine URL.

Kas ma pean enne alustamist tundma Three.js-i?

Teil on vaja piisavalt JavaScripti, et lugeda, mida Cursor kirjutab, ja häälestada väärtusi. Te ei pea Three.js-i nullist kirjutama. Vibe Skillsi oskused genereerivad mootori seadistuse, kaamera, kontrolleri ja ehituskonfiguratsiooni. Cursor hoolitseb mängukoodi eest teie kirjelduste põhjal.

Mis juhtub, kui minu Verceli ehitus ebaõnnestub pühapäeval kell 19:00?

Kõige tavalisem põhjus on TypeScripti viga või puuduv keskkonnamuutuja. Vercel näitab ehituslogi koos katkeva rea ​​kohta esiletõstetuga. Üks klõps juhtpaneelil taastab viimase töötava kasutuselevõtu ja edutab selle tootmisesse. Kuna iga push on eelvaate kasutuselevõtt, olete alati vaid ühe muudatuse kaugusel töötavast ehitisest. Sellepärast on laupäeval ja pühapäeval iga 30 minuti järel pushimine oluline.

Kas ma võin müüa või muuta Vibe Skillsi 3D mängu oskuse koodi?

Jah. Vibe Skillsi oskused tarnitakse kommertsjaoks sõbraliku litsentsiga, mis võimaldab teil koodi vabastada oma mängus Vercelil, itch.io-s, Steamis või kus iganes mujal. Loojad säilitavad oskuse IP, teie säilitate ehitatud mängu IP.

Mis siis, kui ma ei taha Cursorit kasutada?

Iga tehisintellekti redaktor, mis suudab projektifaile muuta, töötab. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - igaüks neist saab Vibe Skillsi oskuse Three.js raamistiku kallal itereerida. Oskus ise on redaktorist sõltumatu.

Lahenda see nädalavahetusel

Põhjus, miks enamik üksikuid arendajaid ei avalda kunagi 3D-mängu, ei ole mootor, žanr ega oskuse lagi. See on reede õhtu, mil nad "lihtsalt uurivad veel natuke" ja ei alusta kunagi. Järgmisel vabal nädalavahetusel järgige nelja-etapilist plaani: installige Vibe Skillsi 3D mängu oskus, tehke push GitHubi, ühendage Vercel, võtke kasutusele reedel kell 20:00, seejärel veetke laupäev ja pühapäev otse- URL-i kallal itereerides.

Teie portfoolio kümne nädalavahetuse jooksul Vercelil valminud mänguga on väärt rohkem kui teie hüpoteetiline kuuekuuline unistuste mootoriprojekt. Välja antud mäng võidab alati. Tasuta Verceli URL on tõestus.

Sirvige 3D mängude oskusi Vibe Skillsil →

Jäta Three.js tüütu algus vahele. Installige 3D mängu oskus Vibe Skillsil, tehke push Vercelile ja teil on tööline URL pühapäeva õhtuks.