Bawo ni lati fi 3D ere kan ranṣẹ lori Vercel ni ipari ose yii (pẹlu Awọn ọgbọn AI)

Vibe Skills

Suʻesuʻe le faitau selau o tomai ua saunia mo Claude, Cursor, ma isi.

Suʻesuʻe tomai

Amata le Free Nei

Fèy yon jwèt 3D sou Vercel avan dimanch swa: Manyèl Depo 48èdtan

Ou ka soti nan vandredi swa vid nan yon lyen jwèt-ou.vercel.app avan dine dimanch. Estrikti a se Three.js, Cursor, yon ladrès enfòmatik AI soti nan Vibe Skills, ak nivo gratis Vercel. Kòt total pou wikenn nan: $0. Twoupo enfòmatik ou dwe veye: tou zewo.

Sa a pa "bati yon pwototip sou laptop ou epi rele li fini". Sa a se yon URL piblik nenpòt moun nan mond lan ka louvri nan yon navigatè, ak HTTPS, kachèt kwen, ak yon domèn koutim si ou vle youn. Ladrès enfòmatik AI a voye estrikti Three.js ak yon vercel.json k ap fonksyone. Cursor jere bouk iterasyon an. Vercel jere depo a. Ou jere konsepsyon an.

Gid sa a pou dev endepandan, kodè vibe, patisipan hackathon, ak nenpòt moun ki satisfè ak tab localhost:5173 ki pa fini. Nou kouvri poukisa estrikti sa a mache, anatomi depo 48èdtan, senk ladrès jwèt 3D bati pou koule travay la, ak etap pa etap vandredi-a-dimanch.

Vibe Skills

Suʻesuʻe le faitau selau o tomai ua saunia mo Claude, Cursor, ma isi.

Suʻesuʻe tomai

Amata le Free Nei

Poukisa Vercel + Three.js + Ladrès AI Se Estrikti Dev Solisyon an

Vercel se pi bon destinasyon depo pou yon jwèt Three.js ki pi parese posib. Pouse sou GitHub, Vercel remake, bati pwojè a, epi ba ou yon URL tounen nan 60 segonn. Pa gen sèvè pou pwovizyon, pa gen dosye Docker, pa gen konfigirasyon NGINX, pa gen konfigirasyon SSL. Pakè Three.js la se jis estatik HTML, JS, ak resous WebGL, ki se egzakteman sa rezo kwen Vercel la te bati pou sèvi.

Nivo gratis la kouvri yon lansman wikenn konfòtabman:

• 100 GB Pleasant pou chak mwa. Yon bati Three.js 5 MB nan 10,000 jwe se 50 GB. Ou pral fini wikenn anvan ou fini Pleasant la.
• Depo estatik san limit ak HTTPS ak yon soudomèn *.vercel.app.
• Sipò domèn koutim sou nivo gratis la - pote pwòp jwèt-non.com ou si ou genyen youn, otreman lyen gratis vercel.app la kapab pataje sou chak platfòm sosyal.
• Depo aperçu pou chak komèt - chak pouse jwenn pwòp URL li, kidonk ou ka pataje yon bati ak yon zanmi epi kontinye iterasyon san yo pa kase li.

Ajoute yon ladrès AI soti nan Vibe Skills epi kòd fondasyon an disparèt tou. Anviwònman Three.js, kontwolè jwè, pipeline konstriksyon, ak yon vercel.json pare pou Vercel yo jenere nan yon sèl kòmand. Lè sa a, Cursor fè rès wikenn nan yon chat kote ou dekri jeu ou vle a epi ajiste pwodiksyon an. Sa se estrikti konplè a: yon ladrès mache pou fondasyon an, yon editè AI pou iterasyon, ak Vercel pou depo a. Solisyon, gratis, ak rapid.

Vibe Skills

Suʻesuʻe le faitau selau o tomai ua saunia mo Claude, Cursor, ma isi.

Suʻesuʻe tomai

Amata le Free Nei

Anatomi 48èdtan: Vandredi Konsepsyon pou Dimanch Depo

Chak wikenn ki aktyèlman ale an dirèk swiv menm etap yo. Rès la se planifye depo a vandredi, pa dimanch aprèmidi, pou sis dènye èdtan yo ale nan polisaj olye pou yo goumen ak yon erè konstriksyon.

Rezon pou sa mache se pouse vandredi a sou Vercel. Yon fwa URL la egziste, chak komèt samdi ak dimanch depoze otomatikman. Pa gen "panik depo dimanch swa" paske depo a te deja fèt vandredi e li te mache sou pilòt otomatik tout wikenn lan.

Kisa "Vibe Coding" yon Jwèt 3D sou Vercel Sanble

Vibe coding vle di dekri sa ou vle an lang natirèl epi kite yon editè AI ekri kòd la, answit iterasyon sou pwodiksyon an. Pou yon jwèt Three.js sou Vercel, bouk la etranjman pwòp: chak chanjman nan Cursor se yon pnpm dev lwen fidbak lokal, answit yon git push lwen yon lyen aperçu an dirèk, answit oto-depoze nan pwodiksyon sou main.

Yon wikenn jwèt Vercel ki kode nan vibe sanble konsa:

1. Louvri katab demaraj ladrès la nan Cursor.
2. Dekri yon fonksyonalite nan chat: "d double sote si espas peze de fwa nan 200ms".
3. Cursor edite dosye kontwolè a. Sove. pnpm dev relouvri. Ou santi sote a nan navigatè a.
4. Si sa sanble byen, git push. Vercel bati yon lyen aperçu. Voye li bay yon zanmi.
5. Melanje nan main lè santiman an fèmen. Lyen pwodiksyon an mete ajou nan 60 segonn.

AI a fè tape la. Vercel fè depo a. Ou fè santiman an ak konsepsyon an.

5 Ladrès Jwèt AI 3D Ki Fè Sa Posib sou Vibe Skills

Ladrès sa yo bati pou koule travay wikenn Vercel + Three.js + Cursor. Chak youn voye ak yon pwojè Three.js ki baze sou Vite, yon vercel.json k ap fonksyone, yon pnpm build ki pwodui yon bati estatik Vercel ka sèvi nan kwen an, ak yon chemen depo teste. Tout yo nan kategori Jwèt 3D sou Vibe Skills.

1. Three.js + Vercel Jwèt Starter

Chwa default la. Jenere yon sèn Three.js ak yon kontwolè jwè, kamera twazyèm moun, ekleraj, bwat syèl, ak yon plan tè ak kolizyon. Voye ak yon vercel.json ki mete bon ankachèt pou pake resous Three.js. pnpm dev kouri lokalman; yon sèl klik nan tablodb Vercel la konekte repo GitHub la epi ou gen yon lyen ap fonksyone.

Pi bon pou: nenpòt genre eksepte 2D pur. Itilize sa a si ou pa konnen ankò sa ou ap bati.

2. Vèsyon Premye Moun Vercel Walker

Yon kontwolè premye moun ki poli (WASD + fèmen kurseur sourit + gravite + kouri + sote) ak kwòk pou etap, tèt ki balanse, ak yon vercel.json ki jere dwa ankadreman CSP pou fèmen kurseur la. Sa a fè anpil dev endepandan konfonn nan pwodiksyon. Ladrès la rezoud li pou ou.

Pi bon pou: simyè mache, pwototip laterè, jwèt naratif, ekspozisyon mize.

3. Twous tirè arèn navigatè

Yon arèn tèt-an-ba (kontwolè marasa-kouto, kourè vag, AI debaz pou lènmi, sistèm projèktil, ekran nòt) ak yon bati Vercel-ajiste ki gzip resous yo, separe AI a an pati, epi chaje mizik la avèk reta. Koneksyon multijoueur enkli; wikenn nan voye jwèt selibatè.

Pi bon pou: tirè arkad, jwèt bal, antre konpetisyon ki bezwen chaje vit sou mobil.

4. Vercel Puzzle Platformer

Yon platfòm twazyèm moun (sote varyab, tan coyote, deteksyon kwen), checkpoint, twa nivo stub ou ka edite nan Blender oswa nan kòd, ak yon bouk reaparans. vercel.json la konfigire pou rechargement nivo kwen ki ankwoche imedyatman, kidonk tès jwe yo santi yo rapid sou telefòn.

Pi bon pou: platfòm puzl, pwototip parkour, eksperyans konsepsyon nivo.

5. Vercel Driving Sandbox

Santi kondwi arkad (kurv akselerasyon, fizik derapaj, lag kamera, tèren debaz) ak yon machin ki ba-poligon, yon modèl track, ak yon depo ajiste pou gwo mes kout tèren. Ankadreman HTTP prereglaj fè kòmansman anviwònman WebGL la pi rapid sou Safari, ki istorikman se navigatè ki pi dousman pou Three.js.

Pi bon pou: kous arkad, kondwi koupe-wout, demo sans machin pou yon pòtfolyo.

Navige tout ladrès jwèt 3D sou Vibe Skills →

Vandredi-a-Dimanch Etap pa Etap

Sa a se pwogram egzak la. Ajiste lè depa a, men kenbe lòd la. Milis an kleyans lan se depo Vercel vandredi swa. Tout sa ki apre sa se iterasyon.

Vandredi 6pm - 8pm: Chwazi Ladrès, Pouse sou GitHub, Konekte Vercel

Etap 1: Chwazi yon ladrès jwèt 3D sou Vibe Skills. Navige kategori Jwèt 3D, chwazi youn ki koresponn ak genre ou, epi enstale demaraj la nan yon katab ki fèk kreye. Louvri li nan Cursor. Ou ta dwe wè yon sèn Three.js ak yon jwè k ap deplase pa 7pm.

Etap 2: Kreye yon depo GitHub epi pouse. git init, git remote add, git push. Itilize slug jwèt ou a kòm non repo a (kourè-kristal, lalin-lapèch, kèlkeswa sa). Non repo a souvan vin URL ou.

Etap 3: Konekte repo a ak Vercel. Ou fèmen nan Vercel ak GitHub (gratis), klike sou "Add New Project", chwazi repo a. Vercel oto-detekte Vite epi konfigire konstriksyon an. Klike Deploy. Nan 60 segonn ou gen yon lyen kourè-kristal.vercel.app. Louvri li sou telefòn ou. Pataje ak yon zanmi. Ba depo a kounye a se zewo pou rès wikenn nan.

Vandredi 8pm - 10pm: Ekri Dokiman Konsepsyon an

Etap 4: Reponn senk kesyon an lang natirèl. Louvri yon paj Notion oswa yon dosye markdown anndan repo a epi reponn:

• Kisa jwè a ap fè chak 5 segonn? (bouk prensipal la)
• Kisa kondisyon genyen an ak kondisyon pèdi an ye?
• Konbyen tan yon kourè oswa yon nivo dire?
• Kisa ki kò jwèt vizyèl la? (palèt, ekleraj, referans stil)
• Kisa ki fonksyonalite ki fè sa memorab nan 30 segonn?

Etap 5: Komite dokiman konsepsyon an. Pouse li nan repo a. Vercel ap re-depoze. Disiplin pou pouse chak chanjman ki gen sans kenbe lyen an dirèk la onèt.

Samdi 9am - 1pm: Bati Mekanis Prensipal la

Etap 6: Ranplase mekanis plas holder la ak fonksyonalite ou a. Sa a se sèl fonksyonalite ki enpòtan. Itilize chat Cursor pou dekri li ("lè jwè a ranmase yon kristal, jele lènmi ki tou pre yo pou 2 segonn epi jwe yon son"). Iterasyon lokalman ak pnpm dev. Lè li sanble byen, pouse.

Etap 7: Filonnen eta genyen/pèdi. Yon bati 60 segonn ak yon fini reyèl santi tankou yon jwèt. Yon bati 60 minit san fini santi tankou yon demo teknolojik. Toujou filonnen ekran genyen an premye, answit tout lòt bagay.

Samdi 1pm - 8pm: Ajoute Yon Nivo

Etap 8: Bati yon nivo ki poli. Pa twa ki pa fini. Itilize kib plas holder pou jeyometri. Itilize karaktè stock ladrès la. Tounen santi a - wotè sote, lag kamera, entansite patikil.

Etap 9: Ajoute yon kouvèti tutoriel. Yon popup de fraz "WASD pou deplase, klike pou tire" sou premye lansman an sove lansman ou anba jwè konfonn ki abandone an 8 segonn. Cursor ka jenere popup React (oswa DOM vanilla) la an 30 segonn.

Etap 10: Pouse chak èdtan. Chak pouse jwenn yon lyen aperçu Vercel. Voye chak youn bay yon zanmi. Bouk fidbak la se sekrè estrikti sa a.

Dimanch 10am - 4pm: Polisaj

Etap 11: Ajoute twa son. Bouk etap, pad anbyen, siyal genyen. Menm twa son yo leve yon pwototip wikenn anpil. Sous gratis: freesound.org, opengameart.org.

Etap 12: Ajoute ji. Patikil nan frape, tranbleman tè ekran nan enpak, nimewo popup nan nòt. Ji se sa ki fè yon bati 48èdtan sanble ak yon yon sèl 6 mwa nan yon GIF. Mande Cursor pou ajoute yon "tranbleman tè ekran nan entansite 0.3 pou 150ms lè jwè a pran domaj" - li pral ekri kwòk tranbleman tè kamera a an senk segonn.

Etap 13: Kouri yon pase Lighthouse. Louvri lyen Vercel la sou yon telefòn epi kouri Chrome DevTools Lighthouse. Pakè Three.js yo anjeneral alantou 400 KB a 1.5 MB. Si ou depase 3 MB, mande Cursor pou aktive separasyon kòd sou modil lou yo. Vercel gzip ak brotli pral okipe rès la.

Etap 14: Pase erè. Jwe lyen ou an dirèk senk fwa youn apre lòt. Ranje anyen ki kase de fwa. Ignòre nenpòt bagay ki kase yon fwa.

Dimanch 4pm - 8pm: Lansman

Etap 15: (Si ou vle) Mete yon domèn koutim. Si ou te achte yon jwèt-non.com davans, ajoute li nan anviwònman pwojè Vercel la. SSL se otomatik. Otreman lyen *.vercel.app la anfòm - li gen HTTPS, li ka pataje, epi li chaje toupatou.

Etap 16: Anrejistre yon GIF 15 segonn nan pi bon moman an. Itilize lyen dirèk la, pa localhost. GIF la se sa ki resevwa klik sou Twitter, Bluesky, ak Reddit.

Etap 17: Kreye yon paj itch.io (si ou vle men anpil valè). Tit, slogan yon liy, twa ekran, GIF la, kontwòl, kredi, epi yon ankadreman de jwèt *.vercel.app ou an (itch.io sipòte ankadreman iframe pou jwèt HTML5). Kounye a ou genyen de URL - youn pou pataje aksidantèl ak youn pou odyans jwè yo.

Etap 18: Poste lyen an. Twitter, Bluesky, Discord kominote dev ou, r/IndieDev, r/threejs, r/WebGames. Toujou kòmanse ak GIF la. Toujou mete URL la. Si ou te itilize yon ladrès Vibe Skills, mansyone li nan pòs devlog la - lòt dev k ap swiv yo pral vle menm demaraj la.

Kouman pou evite twa pi komen echèk depo Vercel yo

Twa bagay kase prèske chak wikenn Three.js + Vercel endepandan. Tout twa yo se solisyon 5 minit si ou ratrape yo vandredi swa, epi twou rajè 5 èdtan si ou dekouvri yo dimanch a 7pm.

• Dòk konstriksyon ki mal. Vite default la se dist/. Vercel oto-detekte Vite epi li itilize dist/. Si ou te koutimize pwodiksyon an, mete outputDirectory nan vercel.json oswa anviwònman pwojè a oswa depo ou pral yon 404.
• Chemen resous ki mache lokalman men ki 404 nan pwodiksyon. Itilize chemen relatif oswa èd import.meta.env.BASE_URL Vite pou nenpòt dosye GLB, tèkstur, oswa odyo ki chaje an tan reyèl. Chemen ki genyen /assets/... yo anjeneral mache, men chemen Windows absoli yo kopye yo pa pral mache.
• Ankadreman CSP ki bloke fèmen kurseur oswa kontèks odyo. Jwèt premye moun bezwen fèmen kurseur. Odyo bezwen aktivasyon pa itilizatè. Nenpòt ladrès nan kategori Jwèt 3D voye ak blòk headers ki bon nan vercel.json pou okipe sa. Si ou te ekri pwòp ou a depi nan konmansman, kopye konfigirasyon an soti nan repo ladrès la.

Depo a mache vandredi, kidonk lè bagay sa yo kase dimanch, se toujou akòz yon chanjman ki sot pase. git bisect se zanmi ou. Menm pi bon: kontinye pouse chak 30 minit pou komèt kase a piti.

Kesyon yo poze souvan

Èske nivo gratis Vercel la pral vrèman kenbe si jwèt mwen an resevwa trafik?

Wi pou yon lansman wikenn ak premye semèn yo. Nivo gratis la ba ou 100 GB Pleasant pa mwa, ki se apeprè 20,000 jwe yon bati Three.js 5 MB. Si ou rive nan plafon sa a, plan Pro a se $20/mwa epi li balanse ou a 1 TB. Pou yon lansman wikenn, gratis se plis pase ase. Ladrès sou Vibe Skills voye ak konfigirasyon bati ki minimize gwosè pake, ki etann nivo gratis la pi lwen.

Èske mwen ka itilize yon domèn koutim sou nivo gratis Vercel la?

Wi. Nivo gratis la sipòte domèn koutim ak HTTPS otomatik. Achte yon domèn (Namecheap, Cloudflare Registrar, Porkbun), dirije li nan Vercel, epi Vercel okipe sètifika SSL la. Konfigirasyon an pran apeprè 10 minit. Si ou pa gen yon domèn, lyen jwèt-non.vercel.app la ase kout pou pataje sou nenpòt platfòm.

Èske estrikti sa a bon pou yon soumisyon konpetisyon jwèt?

Wi, epi li se youn nan pi bon estrikti yo pou soumisyon konpetisyon jwèt. Pifò konpetisyon (Ludum Dare, GMTK, js13k, GitHub Game Off) aksepte nenpòt URL ki jwe sou entènèt. Yon lyen *.vercel.app mache egzakteman tankou yon URL itch.io pou jij yo. Anpil ganyan konpetisyon voye nan tou de - itch.io pou odyans jwè yo, Vercel kòm lyen kanonik rapid la.

Èske mwen bezwen konnen Three.js anvan mwen kòmanse?

Ou bezwen ase JavaScript pou li sa Cursor ekri epi ajiste valè yo. Ou pa bezwen ekri Three.js depi nan konmansman. Ladrès yo sou Vibe Skills jenere anviwònman motè, kamera, kontwolè, ak konfigirasyon bati. Cursor okipe kòd jeu a soti nan deskripsyon ou yo.

Kisa k ap pase si depo Vercel mwen an echwe dimanch a 7pm?

Kòz ki pi komen an se yon erè TypeScript oswa yon varyab anviwònman ki manke. Vercel montre jounal depo a ak liy ki echwe a mete aksan sou li. Yon sèl klik nan tablodb la retounen nan dènye bati ki mache a epi li pwomouvwa li nan pwodiksyon. Paske chak pouse se yon depo aperçu, ou pa janm plis pase yon komèt lwen yon bati ki mache. Se poutèt sa pouse chak 30 minit samdi ak dimanch enpòtan.

Èske mwen ka vann oswa modifye kòd la soti nan yon ladrès jwèt 3D Vibe Skills?

Wi. Ladrès sou Vibe Skills voye ak yon lisans komèsyal ki pèmèt ou lage kòd la nan pwòp jwèt ou sou Vercel, itch.io, Steam, oswa nenpòt lò kote. Kreaytè yo kenbe IP ladrès la, ou menm ou kenbe IP jwèt la ki bati sou li.

Kisa si mwen pa vle itilize Cursor?

Nenpòt editè AI ki ka edite dosye pwojè yo mache. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - nenpòt nan yo ka iterasyon sou estrikti Three.js soti nan yon ladrès Vibe Skills. Ladrès la li menm pa depann de editè.

Fèy Li Wikenn Sa a

Rezon pouki pi devan dev endepandan pa janm fèy yon jwèt 3D se pa motè a, genre a, oswa papòt ladrès la. Se vandredi swa a lè yo "jis chèche yon ti kras plis" epi yo pa janm kòmanse. Jou wikenn gratis pwochen ou genyen, swiv plan kat faz la: enstale yon ladrès jwèt 3D Vibe Skills, pouse sou GitHub, konekte Vercel, depoze anvan vandredi 8pm, answit pase samdi ak dimanch iterasyon sou yon lyen ki ap fonksyone.

Pòtfolyo ou ki gen dis jwèt wikenn ki te fèy sou Vercel vo plis pase pwòj rèv motè sis mwa ou a. Sa ki fèy la toujou genyen. Lyen gratis Vercel la se prèv la.

Navige ladrès jwèt 3D sou Vibe Skills →

Sove maraton kòd Three.js la. Enstale yon ladrès jwèt 3D sou Vibe Skills, pouse sou Vercel, epi gen yon lyen ki ap fonksyone anvan dimanch swa.