Báwo ni Lati Fi Ẹ̀yà 3D Kan Ranṣẹ Lori Vercel Ni Ipari ose Yi (pẹlu Awọn Ọgbọn AI)

Ìròhin ní ọjọ́ Àrẹwà, URL tí ó wà láàyè ní ọjọ́ Àná. Èrò àtòkọ́ ti Mẹ́ta.js + Kọnsọlá + Vibe Skills + Vercel ìpele ọfẹ́ fún ìkìlọ̀ ìṣòwò tí ń kọjá 3D kan ní wákàtù 48.

3D GamesVercelThree.jsVibe CodingVibe Skills
Sarah Mitchell
Sarah Mitchell
Creator editorial lead
9,623
Báwo ni Lati Fi Ẹ̀yà 3D Kan Ranṣẹ Lori Vercel Ni Ipari ose Yi (pẹlu Awọn Ọgbọn AI) - Vibe Skills preview
Vibe Skills
Vibe Skills

Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.

Fiṣipẹ 3D Ẹ̀rọ̀ Ìṣeré Kan lórí Vercel nígbà Àrọ̀déjì: Àtòjọ̀ ìgbésẹ̀ fún ìgbà díẹ̀ fún ìgbà díẹ̀

O lè láti ọwọ́ ìwọ́ Friday ìrọ̀lẹ́ títí dé your-game.vercel.app ìjápọ̀ nígbà àjọ̀òjọ́ Òjìjì. Èròǹgbìyànjú náà ni Three.js, Cursor, ìwòye ìwòye olóye láti Vibe Skills, àti Vercel free tier. Iye tí a tú jọ fún òsẹ̀ náà: $0. Àpapọ̀ ètò ètò tí ó ní láti tójú tò: pẹ̀lú mẹ́rìnléláàdọ́ta-ó-ṣáà-láàárín.

Èyí kì í ṣe "kíkó amúbáradà lórí àgbo ilé rẹ kí o sì pe ni tí ó ti parí". Èyí jẹ́ URL tí gbogbo ènìyàn ní ayé lè ṣí nípasẹ̀ àwòrán ìgbáfẹ́, pẹ̀lú HTTPS, etíyàrán ìfọ́njá, àti orúkọ àdáni bí o bá fẹ́. Ìwòye olóye náà ń fúnni ní Three.js scaffolding àti vercel.json tí ó ṣiṣẹ́. Cursor ń tójú ìyípadà. Vercel ń tójú ìgbésí. Ìwọ náà ń tójú ìṣàpèjúwe.

Ìtọ́nisọnà yìí jẹ́ fún àwọn akọṣẹ́ tí ó lọ́wọ́ọ́wọ́, àwọn akọṣẹ́ vibe, àwọn olùkópa ìkópa, àti ẹnikẹ́ni tí ó ti rẹ̀ láti àwọn ìbùsọ̀ tí kò parí localhost:5173. A ń ṣàlàyé ìdí tí èròǹgbìyànjú yìí fi ń ṣiṣẹ́, ìtòjọ́ ìgbésí fún ìgbà díẹ̀, ìwòye ìwòye 3D márùn-ún tí a kọ́ fún ìṣànà ìṣiṣẹ́, àti Friday-títí-Sunday ìgbésẹ̀-lẹ́yìn-ìgbésẹ̀.


Báwo ni Lati Fi Ẹ̀yà 3D Kan Ranṣẹ Lori Vercel Ni Ipari ose Yi (pẹlu Awọn Ọgbọn AI) - Vibe Skills preview
Vibe Skills
Vibe Skills

Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.

Èéṣe tí Vercel + Three.js + Ìwòye Olóye Fi Jẹ́ Èròǹgbìyànjú Fún Akọṣẹ́ Kan

Vercel ni ojú ìgbésí tí ó rọ̀ tí ó ṣeéṣe fún Three.js game. Fi sí GitHub, Vercel ó mọ̀, yóò kọ́ iṣẹ́ náà, yóò sì fún ọ ní URL kan ní ìṣẹ́jú kan. Kò sí sìwaju láti pín, kò sí Dockerfile, kò sí NGINX configuration, kò sí SSL setup. The Three.js bundle jẹ́ HTML, JS, àti WebGL láti àtọ̀rọ̀, èyí tí Vercel's edge network wá láti fún.

The free tier ó dá oòrùn fún ìdásílẹ̀ òsẹ̀ tí ó yá:

  • 100 GB bandwidth fún oṣù kan. Ẹ̀rọ̀ Three.js 5 MB ní 10,000 ìṣeré jẹ́ 50 GB. Ìwọ yóò kùnà òsẹ̀ kí o tó kùnà bandwidth.
  • Ìgbésí tí kò ní ìlò pẹ̀lú HTTPS àti *.vercel.app subdomain.
  • Orúkọ àdáni ìrànlọ́wọ́ lórí free tier - mú ìwọ́ name-game.com tí o bá ní, bí kò bá bẹ́, URL vercel.app tí kò ní iye jẹ́ alábápín lórí gbogbo àwọn ẹ̀rọ́ ìbánisọ̀.
  • Ìgbésí àtúnwò fún gbogbo commit - gbogbo ìgbésí pẹ̀lú URL tirẹ̀, kí o lè pín ìlànà kan pẹ̀lú ọ̀rẹ́ kí o sì tẹ̀ síwájú láì ní ìwàpàdà.

Fi ìwòye ìwòye olóye kan láti Vibe Skills àti pé tí a bá ti dá lánà náà yóò sún. Three.js àtòjọ̀ ìgbìmọ̀, akọ̀wé oníṣẹ́, ìlànà ìkọ́, àti vercel.json tí ó ṣíṣẹ́ pẹ̀lú Vercel ni a kọ́ ní àṣẹ kan. Lẹ́yìn náà Cursor mú ìyókù òsẹ̀ náà yípadà sí ọ̀rọ̀ tí o ń sọ ìṣeré tí o fẹ́ kí o sì fi ipa mọ́ àtúnṣe. Èyẹn ni èròǹgbìyànjú gbogbo: ìwòye ìwòye kan fún ìpilẹ̀, akọṣẹ́ olóye fún ìyípadà, àti Vercel fún ìgbésí. Ẹni kan, ọfẹ́, àti yára.


Báwo ni Lati Fi Ẹ̀yà 3D Kan Ranṣẹ Lori Vercel Ni Ipari ose Yi (pẹlu Awọn Ọgbọn AI) - Vibe Skills preview
Vibe Skills
Vibe Skills

Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.

Ìtòjọ́ Ìgbésí Fún Ìgbà Díẹ̀: Friday Concept Sí Sunday Deploy

Gbogbo òsẹ̀ tí ó bá lọ sí ojú bẹ́ẹ̀ tẹ̀lé àwọn ìgbésẹ̀ kan náà. Ọgbọ́n ni láti ṣe àtòjọ̀ ìgbésí ní Friday, kì í ṣe Sunday ọ̀sán, kí àwọn wákàtí mẹ́fà tí ó kù lè lọ sí ìwòye tí kò sí kíkọ́ ju ìjàkadì àṣìṣe ìkọ́ lọ.

ÈtòWákàtíOhun tí o ṣeOhun tí a fúnni ní ìparí ètò
Ètò 1: AṣàgbàyíyànFriday 6pm - 10pmYan oríṣi, kọ ìwé ìṣàpèjúwe ojú ìwé kan, fi Vibe Skills 3D game skill sí, fi ìbẹ̀rẹ̀ sí GitHub, ṣọ̀kan sí VercelURL name-game.vercel.app tí ó wà láàyè pẹ̀lú àtòjọ̀ ìbẹ̀rẹ̀ kan
Ètò 2: Kíkọ́Saturday 9am - 8pmRọ̀pọ̀ àwọn àwòrán ìbẹ̀rẹ̀ pẹ̀lú ohun ìṣeré rẹ, fi ìpele kan kún, ṣe tí ipò ìṣẹ́gun/ìparun lè ṣiṣẹ́Ìlànà tí ó ṣíṣẹ́ ní URL Vercel kan náà, tí a fi sílẹ̀ láti máa fi ìgbésí sí gbogbo ìgbésí
Ètò 3: ÌwòyeSunday 10am - 4pmÌró, ìyọ̀, ìgbòkègbodò ìkọ́, àtúnwò àṣìṣe, ìdánwò ipá fún fónùÌlànà tí kò bàjé ní ìṣẹ́jú àkọ́kọ́ 60 lórí èròǹgbà èyíkéyìí
Ètò 4: ÌgbésíSunday 4pm - 8pmFi orúkọ àdáni sí (ìyan), ṣe àgbègbè GIF, kọ ìwé ojú ìwé itch.io, fi ìjápọ̀ sílẹ̀URL tí ó wà láàyè + ìwé ojú ìwé itch.io + ìwé ìgbésí lórí àwọn ẹ̀rọ́ ìbánisọ̀

Ìdí tí èyí fi ń ṣiṣẹ́ ni Friday push sí Vercel. Lọ́gán tí URL bá wà, gbogbo Saturday àti Sunday commit yóò máa fi ìgbésí sí láti máa ṣiṣẹ́. Kò sí "Sunday night deploy panic" nítorí pé ìgbésí náà ti ṣẹlẹ̀ ní Friday tí ó sì ti ń ṣiṣẹ́ fún gbogbo òsẹ̀ náà.


Kí Ni "Vibe Coding" Ìṣeré 3D Kan Lórí Vercel Dabi

Vibe coding túmọ̀ sí ṣíṣàlàyé ohun tí o fẹ́ ní èdè Gẹ́ẹ́sì àti láti jẹ́ kí akọṣẹ́ olóye kọ ìwé kódì, kí o sì tún àtúnṣe nínú ohun tí ó kọ. Fún Three.js game lórí Vercel, ìyípadà náà jẹ́ alárà, tí ó mọ́ tónítóní: gbogbo ìyípadà ní Cursor jẹ́ pnpm dev ìyọ̀ láti àtúnkò ní àgbègbè, lẹ́yìn náà git push ìyọ̀ láti URL àtúnwò tí ó wà láàyè, lẹ́yìn náà tí a fi sílẹ̀ láti máa ṣiṣẹ́ lórí production ní main.

Òsẹ̀ vibe-coded Vercel game kan máa ń jẹ́ báyìí:

  1. Ṣí ìwé tí skill náà bẹ̀rẹ̀ ní Cursor.
  2. Sọ̀rọ̀ nípa ànímọ́ kan ní ọ̀rọ̀ ìgbàrà: "lọ́fà méjì bí space bá ti wù tí a bá tẹ ni ìgbà méjì láàárín 200ms".
  3. Cursor ó kọ ìwé oníṣẹ́ náà. Fi pamọ́. pnpm dev yóò mú un padà. O yóò nímọ̀ nípa títún ọ̀rọ̀ náà nípasẹ̀ àwòrán ìgbáfẹ́.
  4. Bí ó bá tọ́, git push. Vercel yóò kọ URL àtúnwò kan. Fi ránṣẹ́ sí ọ̀rẹ́ kan.
  5. Pín sí main nígbà tí ìròyìn bá ti gbón. URL production yóò yípadà ní ìṣẹ́jú 60.

Olóye náà ni ó ń kọ ìwé. Vercel ni ó ń ṣe ìgbésí. Ìwọ náà ń ṣe ìròyìn àti ìṣàpèjúwe.


5 Ìwòye Ìṣeré 3D Olóye tí Ń Mú Èyí Ṣeé ṣe Lórí Vibe Skills

Àwọn ìwòye yìí ni a kọ́ fún Vercel + Three.js + Cursor òsẹ̀ ìṣànà ìṣiṣẹ́. Olúkúlùkù wọn ń fúnni ní Vite-based Three.js project, vercel.json tí ó ṣiṣẹ́, pnpm build tí ó ń mú àtòjọ̀ statíìk kan tí Vercel lè fún láti ojú etí, àti ìgbésí tí a ti dáwo rí. Gbogbo wọn wà ní 3D Games category lórí Vibe Skills.

1. Three.js + Vercel Game Starter

Ìfíyè sí. Ó ń kọ Three.js ìyàrá pẹ̀lú akọ̀wé oníṣẹ́, camera kejì, àtòjọ̀ ìmọ́lẹ̀, skybox, àti ilẹ̀ pẹ̀lú ìgbòwé. Ó ń fúnni ní vercel.json tí ó ń ṣètò àwọn ìlànà ìfòyẹ́ sí iye tí ó tọ́ fún Three.js asset bundles. pnpm dev ń ṣiṣẹ́ ní àgbègbè; ìtẹ ènìyàn kan ní Vercel dashboard ó máa ṣọ̀kan pẹ̀lú GitHub repo àti pé o ní URL tí ó wà láàyè.

Tí ó dára fún: gbogbo oríṣi àyàfi àwọn tí kò ní ìpín 2D. Lo èyí bí o kò tilẹ̀ mọ ohun tí o kọ́ tí o ń kọ.

2. First-Person Vercel Walker

Akọ̀wé oníṣẹ́ tí ó wà ní ipò àkọ́kọ́ (WASD + mouse pointer lock + gravity + sprint + jump) pẹ̀lú àwọn ìkọ́ ìgbésẹ̀, head-bob, àti vercel.json tí ó ń tójú ìwòye CSP headers tí ó tọ́ fún pointer-lock. Èyí máa ń mú àwọn akọṣẹ́ kan tí ó lọ́wọ́ọ́wọ́ láyè nínú production. Skill náà ń yan ìṣòro náà fún ọ.

Tí ó dára fún: walking sims, horror prototypes, narrative games, museum exhibits.

3. Browser Arena Shooter Kit

Arena kan tí ó wà lókè (twin-stick controller, wave spawner, basic enemy AI, projectile system, score HUD) pẹ̀lú Vercel-tuned build tí ó ń gígun àwọn ohun tí a kọ́, code-splits AI, àti láàárín ìgbà tí a kò bá nípò. Àwọn ohun ìbágbépọ̀ ni a kún; òsẹ̀ náà ń fi ìsọ̀kan nikan ránṣẹ́.

Tí ó dára fún: arcade shooters, bullet hell, jam entries tí ó ní láti máa láàyè yá bó ṣe ń ṣíṣẹ́ lórí fónù.

4. Vercel Puzzle Platformer

Platformer kejì (variable jump, coyote time, ledge detection), checkpoints, mẹ́ta ìpele tí o le yípadà ní Blender tàbí ní kódì, àti ìyípadà ìbúgbàmú. The vercel.json ni a fi pamọ́ fún ìyípadà ìpele ìgbà tí a ti fi pamọ́, kí ìdánwò kì í kún nípa àgbègbè lórí fónù.

Tí ó dára fún: puzzle platformers, parkour prototypes, level-design experiments.

5. Vercel Driving Sandbox

Arcade driving feel (acceleration curve, drift physics, camera lag, basic terrain) pẹ̀lú low-poly car, ìpele ìpele ìpele kan, àti ìgbésí tí a fi pamọ́ fún àwọn nǹkan ilẹ̀ tí ó tóbi. Ìlànà HTTP tí a ti fi pamọ́ ni ó mú WebGL context kí ó máa bẹ̀rẹ̀ yá lórí Safari, tí ó jẹ́ àwòrán ìgbáfẹ́ tí ó lọ́ra jù lọ fún Three.js.

Tí ó dára fún: arcade racing, off-road driving, car-feel demos fún portfolio.

Wo gbogbo 3D game skills lórí Vibe Skills →


Friday-títí-Sunday Ìgbésẹ̀-lẹ́yìn-Ìgbésẹ̀

Èyí ni àtòjọ̀ ìgbésẹ̀ náà. Yí ìgbà ìbẹ̀rẹ̀ padà, ṣùgbọ́n kí o tọ́ àṣẹ náà mọ́. Àṣeyọrí tí ó ṣe pàtàkì jù ni Friday-night Vercel deploy. Ohun gbogbo tí ó wà lẹ́yìn náà jẹ́ ìyípadà.

Friday 6pm - 8pm: Yan Skill, Fi sí GitHub, Ṣọ̀kan Vercel

Ìgbésẹ̀ 1: Yan 3D game skill kan lórí Vibe Skills. Wo 3D Games category, yan èyí tí ó bá oríṣi rẹ mu, kí o sì fi ìbẹ̀rẹ̀ sí inú ìwé tí ó jẹ́ tuntun. Ṣí i ní Cursor. O yẹ kí o rí Three.js ìyàrá pẹ̀lú akọ̀wé oníṣẹ́ tí ó ń ṣiṣẹ́ ní 7pm.

Ìgbésẹ̀ 2: Ṣẹ̀dá GitHub repo àti ìgbésí. git init, git remote add, git push. Lo orúkọ ìsọ̀rí rẹ fún orúkọ repo (crystal-runner, lunar-fishing, ohunkúnhún). Orúkọ repo ni a máa ń jẹ́ URL rẹ.

Ìgbésẹ̀ 3: Ṣọ̀kan repo náà pẹ̀lú Vercel. Wọlé sí Vercel pẹ̀lú GitHub (ọfẹ́), tẹ "Add New Project", yan repo náà. Vercel ó máa mọ̀ pé Vite ni, kí ó sì fi pamọ́ fún ìkọ́. Tẹ Deploy. Ní ìṣẹ́jú 60, o ní crystal-runner.vercel.app URL. Ṣí i lórí fónù rẹ. Pín pẹ̀lú ọ̀rẹ́ kan. Ìgbésí bar jẹ́ mẹ́ta fún ìyókù òsẹ̀ náà.

Friday 8pm - 10pm: Kọ Ìwé Ìṣàpèjúwe

Ìgbésẹ̀ 4: Dáhùn àwọn ìbéèrè márùn-ún ní èdè Gẹ́ẹ́sì. Ṣí ìwé Notion kan tàbí markdown file ní inú repo, kí o sì dáhùn:

  • Kí ni èròǹgbà náà ń ṣe ní ìgbà ìgbà 5? (ìlànà ìlànà)
  • Kí ni ipò ìṣẹ́gun àti ipò ìparun?
  • Ṣé ìgbà wo ni ìwé kan tàbí ìpele kan?
  • Kí ni ohun tí ó yàtọ̀ sí ìwòye? (òun, ìmọ́lẹ̀, ìfíwé sí ara)
  • Kí ni ohun kan tí ó máa mú èyí rántí ní ìṣẹ́jú 30?

Ìgbésẹ̀ 5: Kọ ìwé ìṣàpèjúwe náà. Fi sí repo náà. Vercel yóò tún fi ìgbésí sí. Ìtọ́nisọnà ti fígbésí sí gbogbo ìyípadà tí ó ṣe pàtàkì ni ó mú URL tí ó wà láàyè dúró ṣinṣin.

Saturday 9am - 1pm: Kọ Ohun ìṣeré Ìpilẹ̀

Ìgbésẹ̀ 6: Rọ̀pọ̀ àwọn àwòrán ìbẹ̀rẹ̀ pẹ̀lú ohun kan tí ó ṣe pàtàkì. Èyí ni ohun kan tí ó ṣe pàtàkì. Lo Cursor chat láti sọ̀rọ̀ rẹ ("nígbà tí èròǹgbà bá mú kristali kan, mú àwọn èèyàn búburú níbi tí ó wà fún ìgbà 2 ìṣẹ́jú kí o sì máa ṣe ohùn kan"). Yípadà ní àgbègbè pẹ̀lú pnpm dev. Nígbà tí ó bá tọ́, fi sílẹ̀.

Ìgbésẹ̀ 7: Ṣọ̀kan ipò ìṣẹ́gun/ìparun. Ìlànà 60 ìṣẹ́jú pẹ̀lú ìparí tootọ́ ní ìròyìn bí àwòrán. Ìlànà 60 ìwòye láì ní ìparí jẹ́ àwòrán ìṣe. Máa fi ipò ìṣẹ́gun sí ní àkọ́kọ́, lẹ́yìn náà ohun gbogbo mìíràn.

Saturday 1pm - 8pm: Fi Ìpele Kan Kún

Ìgbésẹ̀ 8: Kọ ìpele kan tí ó wà ní ipò ìwòye. Kì í ṣe mẹ́ta tí kò parí. Lo àwọn ìwòye dídánwò fún ìsàlẹ̀. Lo akọ̀wé tí skill náà ní. Fi ipa mọ́ ohun tí o nímọ̀ - gíga ìgbà, camera lag, ohun tí ó yọrí sí iye.

Ìgbésẹ̀ 9: Fi ìgbòkègbodò ìkọ́ kan kún. Àwọn ọ̀rọ̀ méjì "WASD láti máa gbé, tẹ láti máa tàn" ní àkókò ìbẹ̀rẹ̀ kàn máa ń yà wòye àwọn èròǹgbà tí ó yápadà tí wọ́n sì kùnà ní ìṣẹ́jú 8. Cursor lè kọ ìgbòkègbodò React (tàbí DOM vanilla) ní ìṣẹ́jú 30.

Ìgbésẹ̀ 10: Fi ìgbésí sí gbogbo wákàtí. Gbogbo ìgbésí ó máa ní Vercel preview URL. Fi gbogbo wọn ránṣẹ́ sí ọ̀rẹ́ kan. Ìpín ìyípadà ni ìkọ̀ tí ó máa ń ṣíṣẹ́ nínú èròǹgbìyànjú yìí.

Sunday 10am - 4pm: Ìwòye

Ìgbésẹ̀ 11: Fi ohùn mẹ́ta kún. Ìlànà ìgbésẹ̀, ohùn ìbẹ̀rẹ̀, ohùn ìṣẹ́gun. Àní ohùn mẹ́ta ni ó máa ń mú àtúnkò òsẹ̀ kan yọ́ tó. Ọfẹ́ orísun: freesound.org, opengameart.org.

Ìgbésẹ̀ 12: Fi juice kún. Àwọn ohun ìṣàlàyé nígbà ìkọ̀, ìwọ́ ilẹ̀ nígbà ìkọ̀, àwọn nọ́ńbà tí ó jáde nígbà ìṣàkójọ. Juice ni ohun tí ó mú ìlànà 48-òsẹ̀ dà bíi ti 6-oṣù nínú GIF kan. Béèrè lọ́wọ́ Cursor láti fi "screen shake ìwòye 0.3 fún 150ms nígbà tí èròǹgbà bá gbà ìgbìyànjú" - yóò kọ ìkọ́ camera-shake ní ìṣẹ́jú mẹ́fà.

Ìgbésẹ̀ 13: Ṣe ìdánwò Lighthouse. Ṣí URL Vercel lórí fónù kí o sì ṣàtúnṣe Chrome DevTools Lighthouse. Three.js bundles máa ń wà ní 400 KB sí 1.5 MB. Bí o bá ju 3 MB lọ, béèrè lọ́wọ́ Cursor láti ṣí code splitting lórí àwọn àtòjọ̀ tí ó wúwo. Vercel's gzip àti brotli yóò tójú ohun gbogbo.

Ìgbésẹ̀ 14: Ìtúnwò àṣìṣe. Ṣeré ní URL rẹ tí ó wà láàyè nígbà márùn-ún títí tí yóò fi parí. Ṣe tí ohun kan bá bàjẹ́ ní ìgbà méjì. Kò sí ohun kan tí ó bàjẹ́ ní ìgbà kan.

Sunday 4pm - 8pm: Ìgbésí

Ìgbésẹ̀ 15: (Ìyan) Fi orúkọ àdáni sí. Bí o bá ra name-game.com ní àkókò tí o kò tilẹ̀ tiwa, fi sí Vercel's project settings. SSL jẹ́ àtòkọ̀. Bí kò bá bẹ́, *.vercel.app URL jẹ́ ohun tí ó tọ́ - ó ní HTTPS, ó le jẹ́ alábápín, kí ó sì máa bẹ̀rẹ̀ jákèjádò gbogbo àwọn ètò.

Ìgbésẹ̀ 16: Kọ GIF ìṣẹ́jú 15 kan ti ohun tí ó dára jùlọ. Lo URL tí ó wà láàyè, kì í ṣe localhost. GIF náà ni ohun tí ó máa ń gba ìtẹ ní Twitter, Bluesky, àti Reddit.

Ìgbésẹ̀ 17: Ṣẹ̀dá ìwé ojú ìwé itch.io (ìyan ṣùgbọ́n tí ó ga lọ́rùn). Orúkọ, ìsọ̀rọ̀ kan, àwòrán mẹ́ta, GIF náà, ìkópa, àṣàyàn, àti ìgbàgbọ́ ti *.vercel.app iframe rẹ (itch.io ń gba ìgbàgbọ́ iframe fún HTML5 games). Ní báyìí o ní URL méjì - ọ̀kan fún ìpín tí kò ní ipò àti ọ̀kan fún àwọn olólùtù oyin.

Ìgbésẹ̀ 18: Fi ìjápọ̀ sílẹ̀. Twitter, Bluesky, Discord ìlú rẹ, r/IndieDev, r/threejs, r/WebGames. Máa bẹ̀rẹ̀ pẹ̀lú GIF. Máa fi URL kún. Bí o bá lo Vibe Skills skill, sọ̀rọ̀ rẹ nínú ìwé ìṣàgbéyọ̀ - àwọn akọṣẹ́ mìíràn tí wọ́n ń kà á yóò fẹ́ ìbẹ̀rẹ̀ náà.


Kí Ni Lati Yọ̀ Àwọn Àṣìṣe Ìgbésí Vercel Mẹ́ta Tí Ó Wọ́pọ̀ Jùlọ

Àwọn nǹkan mẹ́ta ni ó máa ń bàjẹ́ gbogbo solo Three.js + Vercel òsẹ̀. Gbogbo wọn ni àwọn ìyípadà ìṣẹ́jú 5 tí o bá ti rí wọn ní Friday alẹ́, àti àwọn ìrìn ìrìn ìgbà 5 tí o bá ti rí wọn ní Sunday ní 7pm.

  • Ìgbà ìgbésí tí kò tọ́. Vite defaults sí dist/. Vercel ó máa mọ̀ pé Vite ni, kí ó sì lo dist/. Bí o bá yí ìgbà ìgbésí padà, ṣètò outputDirectoryvercel.json tàbí ìgbìmọ̀ ìgbìmọ̀ tàbí ìgbésí rẹ yóò jẹ́ 404.
  • Àwọn ìjápọ̀ ohun tí ó ń ṣiṣẹ́ ní àgbègbè ṣùgbọ́n 404 ní production. Lo àwọn ìjápọ̀ tí ó jẹ́ ìpín tàbí Vite import.meta.env.BASE_URL olùrànlọ́wọ́ fún gbogbo GLB, texture, tàbí ohùn tí a kọ́ láti máa fi ìgbésí sí. Àwọn ìjápọ̀ tí a fi pamọ́ /assets/... máa ń ṣiṣẹ́, ṣùgbọ́n àwọn ìjápọ̀ Windows tí a fi pamọ́ tí ó ga lọ́rùn kì í ṣe.
  • CSP headers tí ń dí pointer lock tàbí ohun tí ó jáde ní audio. First-person games nílá pointer lock. Ohùn nílá ìgbòwé tí olùlo bá ti ṣe. Gbogbo skill láti 3D Games category ó ń fúnni ní headers block tí ó tọ́ ní vercel.json láti tójú èyí. Bí o bá kọ tirẹ̀ láti ìbẹ̀rẹ̀, kó ìgbìmọ̀ náà láti inú repo skill náà.

Ìgbésí náà ń ṣiṣẹ́ ní Friday, kí ó sì máa bàjẹ́ ní Sunday, ó máa ń jẹ́ nítorí ìyípadà tuntun kan. git bisect jẹ́ ọ̀rẹ́ rẹ. Kí ó sì máa fi ìgbésí sí gbogbo ìgbà 30 kí ìgbésí tí ó bàjẹ́ lè kéré.


Àwọn Ìbéèrè Tí A Máa Ń Béèrè

###Ṣé Vercel free tier yóò dúró ṣinṣin bí ìṣeré mi bá ní àwọn ènìyàn tí ó pọ̀?

Bẹ́ẹ̀ ni fún ìgbésí òsẹ̀ àkọ́kọ́ àti àwọn ọ̀sẹ̀ díẹ̀. Free tier fún ọ ní 100 GB bandwidth fún oṣù kan, èyí tí ó jẹ́ ìṣeré 20,000 tí 5 MB Three.js build. Bí o bá dé òǹkà náà, Pro plan jẹ́ $20/oṣù kí o sì mú un padà sí 1 TB. Fún ìgbésí òsẹ̀, ọfẹ́ jẹ́ ju tó lọ. Àwọn skill lórí Vibe Skills máa ń fi ìgbìmọ̀ ìkọ́ tí ó mú ìwọn tí a kọ́ kéré, èyí tí ó mú free tier rẹ tàn sí i.

###Ṣé èmi lè lo orúkọ àdáni lórí Vercel free tier?

Bẹ́ẹ̀ ni. Free tier ń gba àwọn orúkọ àdáni pẹ̀lú HTTPS àtòkọ̀. Ra orúkọ kan (Namecheap, Cloudflare Registrar, Porkbun), fi sí Vercel, kí o sì Vercel tóju certificate SSL. Ìṣàtòjú náà máa ń gba ìgbà díẹ̀. Bí o kò tilẹ̀ ní orúkọ kan, name-game.vercel.app URL jẹ́ kíkúrú láti pín lórí ètò èyíkéyìí.

###Ṣé èròǹgbìyànjú yìí dára fún ìkópa àwọn ìṣeré ìṣeré?

Bẹ́ẹ̀ ni, ó sì jẹ́ ọ̀kan lára àwọn èròǹgbìyànjú tí ó dára jùlọ fún ìkópa ìṣeré ìṣeré. Ọ̀pọ̀lọpọ̀ ìṣeré ìṣeré (Ludum Dare, GMTK, js13k, GitHub Game Off) ń gba URL èyíkéyìí tí a lè ṣeré rẹ̀ ní ayé. Ìjápọ̀ *.vercel.app ń ṣiṣẹ́ bí ìjápọ̀ itch.io fún àwọn òǹwòye. Ọ̀pọ̀lọpọ̀ àwọn tí ó ṣẹ́gun ìṣeré ìṣeré máa ń fi sí méjèjì - itch.io fún àwọn olólùtù oyin, Vercel gẹ́gẹ́ bí URL tí ó yá tí ó sì jẹ́ èyí tí a mọ̀.

###Ṣé mo nílá láti mọ̀ nípa Three.js kí n tó bẹ̀rẹ̀?

O nílá láti mọ̀ nípa JavaScript tí ó tó láti ka ohun tí Cursor kọ́ kí o sì fi ipa mọ́ àwọn iye. O kò nílá láti kọ Three.js láti ìbẹ̀rẹ̀. Àwọn skill lórí Vibe Skills ń kọ ìṣàtòjọ̀ engine, camera, controller, àti ìgbìmọ̀ ìkọ́. Cursor ń tójú kódì ìṣeré láti àwọn àlàyé rẹ.

###Kí ni yóò ṣẹlẹ̀ bí ìgbésí Vercel mi bá bàjẹ́ ní Sunday ní 7pm?

Ìdí tí ó wọ́pọ̀ jùlọ ni àṣìṣe TypeScript tàbí tí kò ní env var kan. Vercel ń fi ìwé àtòjọ̀ ìgbésí tí ó ń tọ́ àṣìṣe náà hàn. Ìtẹ́ kan ní dashboard yóò mú ohun tó ti ṣiṣẹ́ padà kí ó sì mú un lọ sí production. Nítorí pé gbogbo ìgbésí jẹ́ ìgbésí àtúnwò, o kò ní ju ìgbésí kan lọ láti ìgbésí tí ó ṣiṣẹ́. Èyí ni ìdí tí fígbésí sí gbogbo ìgbà 30 ní Saturday àti Sunday fi ṣe pàtàkì.

###Ṣé èmi lè ta tàbí yí kódì tí ó wá láti Vibe Skills 3D game skill padà?

Bẹ́ẹ̀ ni. Àwọn skill lórí Vibe Skills ń fúnni ní àṣẹ tí ó ṣeé ta tí ó mú ọ́ láààyè láti fi kódì sí ìṣeré tirẹ lórí Vercel, itch.io, Steam, tàbí ibòmíì. Àwọn tí ó kọ́ máa ń pa ohun tí ó dá sílẹ̀ ti skill náà, ìwọ náà máa ń pa ohun tí ó dá sílẹ̀ ti ìṣeré tí a kọ́ lórí rẹ̀.

###Kí ni yóò ṣẹlẹ̀ bí èmi kò bá fẹ́ lo Cursor?

Gbogbo akọṣẹ́ olóye tí ó lè yí àwọn ìwé project padà ni ó ṣiṣẹ́. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - èyíkẹyí nínú wọn lè yípadà lórí Three.js scaffolding láti Vibe Skills skill. Skill náà fúnrarẹ̀ kò ní ìdí.


Fi Sípẹ́ Òsẹ̀ yìí

Ìdí tí ọ̀pọ̀lọpọ̀ àwọn akọṣẹ́ tí ó lọ́wọ́ọ́wọ́ kì í fi ń fi ìṣeré 3D kan sílẹ̀ kì í ṣe engine, oríṣi, tàbí ìwọn ìwòye. Ó jẹ́ Friday ìrọ̀lẹ́ tí wọ́n "ń ṣèwádìí díẹ̀ sí i" tí wọn kò sì bẹ̀rẹ̀. Òsẹ̀ ọfẹ́ tí ó kẹ́hìn tí o bá ní, tẹ̀lé àtòjọ̀ ìgbésẹ̀ mẹ́rin: fi Vibe Skills 3D game skill sí, fi sí GitHub, ṣọ̀kan Vercel, fi sílẹ̀ ní Friday 8pm, lẹ́yìn náà lo Saturday àti Sunday láti yípadà lórí URL tí ó wà láàyè.

Portfolio rẹ ti ìṣeré òsẹ̀ mẹ́wàá tí a fi sílẹ̀ lórí Vercel jẹ́ iye ju ìran rẹ tí ó ṣíṣe ìgbà mẹ́fà lọ tí ó kọ́ ń gbìmọ̀. Èyí tí a fi sílẹ̀ ló máa ń ṣẹ́gun nígbà gbogbo. URL Vercel ọfẹ́ ni ẹ̀rí náà.

Wo 3D game skills lórí Vibe Skills →


Má ṣe jẹ́ aláìní láti Three.js boilerplate marathon. Fi 3D game skill kan sí Vibe Skills, fi sí Vercel, kí o sì ní URL tí ó wà láàyè ní Sunday òru.

Báwo ni Lati Fi Ẹ̀yà 3D Kan Ranṣẹ Lori Vercel Ni Ipari ose Yi (pẹlu Awọn Ọgbọn AI) - Vibe Skills preview
Vibe Skills
Vibe Skills

Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.