Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Mẹ́ta.js Gbọ́n ohun gbogbo tó jẹ mọ́ 3D Nínú Web, Tí O Kò sì Ní Lọ́jọ́ Lati Kọ̀ ọ́
Mẹ́ta.js ń fi 70% gbogbo ohun tó jẹ mọ́ 3D síta lórí ayàwòrán tó gbòòrò, láti ojú-ìwé ọjà Apple sí àwọn eré oníṣẹ́ tí wọ́n fiṣẹ́. Títí di ọdún 2025, ṣíṣe ohun kan pẹ̀lú rẹ̀ túmọ̀ sí láti kọ́ WebGL, àwọn ohun tó ń fi àwòrán ránṣẹ́, àti ojú-ìwé ìwé ìtọ́nisọ́nà tó gbòòrò bíi 200. Bísì, ìmọ̀-ẹ̀kọ́ AI lórí Vibe Skills mú kí àwọn tí kò jẹ́ oníṣẹ́ kọ́ dúró fún èyí tó ń ṣiṣẹ́ ní Mẹ́ta.js ní ọ̀sẹ̀ kan - láìsí ẹ̀kọ́ math, aláìsí ìrìn-àjò kíkà Stack Overflow.
Ìtọ́nisọ́nà yìí yóò fi hàn ọ́ èwo ni ìmọ̀-ẹ̀kọ́ AI tó ń mú ohun tó jẹ́ Mẹ́ta.js jáde, ohun tó o lè ṣe ní òótọ́ (ìkòòkò eré, àwọn olùṣàtò nǹkan, àwọn ohun tó jẹ́ olórí), àti bí o ṣe lè bẹ̀rẹ̀ láti "Mo ní èrò" sí "Ó ti wà láàyè lórí àjọ̀tẹ́ mi" láìsí kànná ọwọ́ kankan pẹ̀lú THREE.PerspectiveCamera ẹgbẹ́ rẹ̀.
Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Kí N Tààtàà Ni Mẹ́ta.js Ṣe Fún Àwọn Tí Kò Jẹ́ Oníṣẹ́ Lákọ̀ọ́kọ́
Mẹ́ta.js ni ojú-ìwé JavaScript tó wà lẹ́yìn WebGL, API tó ṣe ìgbéṣe awòrán 3D tó wà ní ìsàlẹ̀ gbogbo ohun tó wà nínú àgbàwọ̀. Lati lo ohun tí ó wà nínú rẹ̀ tààrà, o ní láti lóye:
- Ìrò mọ́ǹtágè (àwọn kamera, àwọn ìmọ́lẹ̀, àwọn ohun tí wọ́n fi àwòrán ṣe, àti bí wọ́n ṣe jọ̀pọ̀)
- Àwọn ohun tó ń fi àwòrán ránṣẹ́ (àwọn ètò vertex àti fragment tí wọ́n kọ ní GLSL)
- Math àwòrán (àwọn àkópọ̀, àwọn quaternion, àyè àgbáyé vs àyè pẹ̀pẹ̀)
- Àwọn ẹ̀ka ìwà tó dára (àwọn ìfọ̀namọ̀, iye ohun tó wà ní àwọn ẹyà, àyè ìwòye)
Ìtọ́nisọ́nà "Hello Cube" tó wà nísinsìnì ń lọ 800 ìlà JavaScript kí o tó rí àwòrán tó ń yí. Àwọn ètò ìgbéjáde gidi láti àwọn ilé-iṣẹ́ bíi Active Theory tàbí Resn ń lọ 5,000 sí 15,000 ìlà pẹ̀lú àwọn ètò àwòrán tí wọ́n ṣe fún ara wọn.
Àkọ́kọ́ yìí mú kí Mẹ́ta.js wà fún àwọn oníṣẹ́ WebGL tó ń jèrè $120 sí $250 fún wákàtú . Àwọn onísẹ̀-ọ̀nà, àwọn olùtò market, àwọn olùtòlé, àti àwọn akẹ́kọ̀ọ́ lè máa yìn ín láre, ṣùgbọ́n wọn kò lè fií síta.
Ìgbékalẹ̀ ní 2026: àwọn ohun èlò AI láti máa kọ̀ ọ́ bíi Cursor àti Claude lè kà àbá tí a sọ ní èdè Gẹ̀ẹ́sì tí ó rọrùn kí wọ́n sì fi àwọn ètò react-three-fiber tó ń ṣiṣẹ́ jáde. Àwọn ìmọ̀-ẹ̀kọ́ AI fi èyí tí wọ́n ń ṣe sínú ìfífínṣe kan tààrà - ìjẹ́, ìmọ́lẹ̀, ìdarí kamera, ìwà tó dára, gbogbo rẹ̀ ti pèsè tẹ́lẹ̀.
Ṣawari awọn ọgọọgọrun awọn ọgbọn ti a ti ṣetan tẹlẹ fun Claude, Cursor, ati diẹ sii.
Ohun Tí O Lè Ṣe Pẹ̀lú Mẹ́ta.js + Ìmọ̀-ẹ̀kọ́ AI
O lè fi àwọn irú ìgbésílẹ̀ márùn-ún tí ó dájú síta láì kọ WebGL ní ọwọ́. Ọ̀kọ̀ọ̀kan wọn ní ẹ̀ka Vibe Skills kan tó ṣàgbékalẹ̀ ìlànà ìṣiṣẹ́.
| Irú ìgbésílẹ̀ | Àpẹẹrẹ Nínú Ayé Gidi | Àkókò Ìṣíṣẹ́ (pẹ̀lú ìmọ̀-ẹ̀kọ́ AI) | Àkókò Ìṣíṣẹ́ (láti ìbẹ̀rẹ̀) |
|---|---|---|---|
| Ìkòòkò eré 3D | Eré ìwákọ̀ ayàwòrán, eré oníṣẹ́ kékeré, ibi ìsáǹká | 4-12 wákàtú | 2-6 ọ̀sẹ̀ |
| Olùṣàtò nǹkan | Àwòrán ẹsẹ̀ bàtà tó yí sí 360°, àwọn olùṣàtò déèri, àwòrán ojú àrólákò | 2-6 wákàtú | 1-3 ọ̀sẹ̀ |
| Ìpele Olórí 3D | Àgbéléwọ̀n ojú ìwé tí ń ṣiṣẹ́, ojú ìwé tí ń yí lọ | 3-8 wákàtú | 1-2 ọ̀sẹ̀ |
| Àtòjọ ìṣírò tó ní ìsopọ̀ | Ayé tó ń yí, àtòjọ ẹ̀rọ tí wọ́n tú sílẹ̀, àtòjọ ìsọ̀rí | 4-10 wákàtú | 2-4 ọ̀sẹ̀ |
| Ibi ìfihàn AR / gbìyànjú láti wọ̀ | Àtòjọ gíláàsì, ìdásílẹ̀ yàrá, àwòrán tó gbòòrò | 6-15 wákàtú | 3-6 ọ̀sẹ̀ |
Ìfọ̀rọ̀rọ̀ jẹ́ nǹkan bíi 10x sí 20x. Àwọn ìmọ̀-ẹ̀kọ́ ló ń ṣètò àwọn ohun tí a kọ̀ sábà máa ń lo (ìdásílẹ̀ ìpele, àwọn ìmọ́lẹ̀, ìdarí, ìwà tó lè yí padà) kí o lè máa ṣe ìtọ́nisọ́nà ìṣe.
Àwọn ẹ̀ka Vibe Skills méjì tó wúlò jù lọ níbí:
- Eré 3D - àwọn eré 3D tó lè ṣiṣẹ́ pátápàta nípasẹ̀ Mẹ́ta.js (ìwákọ̀, àlàyé, eré oníṣẹ́ kékeré, àwọn ìfàájá eré ayàwòrán)
- Ìsopọ̀ 3D - àwọn olùṣàtò nǹkan, àwọn ìpele olórí 3D, àwọn ojú ìwé tó ń yí lọ, àtòjọ ìsọ̀rí
5 Ìmọ̀-ẹ̀kọ́ AI Mẹ́ta.js Lórí Vibe Skills (Láì Ní Lọ́jọ́ WebGL)
Ìkòòkò Eré 3D lórí Vibe Skills ní àwọn ìmọ̀-ẹ̀kọ́ tí wọ́n ṣe fún àwọn tí kò jẹ́ oníṣẹ́ tó fẹ́ láti gbórí Mẹ́ta.js. Ọ̀kọ̀ọ̀kan wọn wá pẹ̀lú ìdásílẹ̀ react-three-fiber, ètò ohun èlò, àti ìwé ìṣiṣẹ́ tí ó lè ṣiṣẹ́ pẹ̀lú Cursor.
| Irú ìmọ̀-ẹ̀kọ́ | Ohun Tí Ó Ń Mu Jáde | Tó Dára Fún |
|---|---|---|
| Olùkọ́ Ìpele Olórí 3D | Ìpele Mẹ́ta.js tó ń yí lọ gẹ́gẹ́ bíi ẹ̀yà Next.js | Àwọn ojú ìwé ìdágbéléwọ̀n, àwọn ojú ìwé àwòrán, àwọn ojú ìwé ilé-iṣẹ́ |
| Olùbẹ̀rẹ̀ Eré Ìwákọ̀ Ayàwòrán | Eré ìwákọ̀ tó kún, pẹ̀lú ọ̀nà, ìgbóyà, àti ìdarí | Àwọn ìfàájá eré, àwọn ìgbóyà àmì, àwọn ìṣàgbéyẹ̀wò |
| Olùṣàtò Nǹkan | Àwòrán tó yí sí 360° pẹ̀lú àwọn ohun tí a lè yípadà/àwọ̀ | Àwọn ilé ìtòja tààrà, àwọn ìdágbéléwọ̀n nǹkan, àwọn ojú ìwé kickstarter |
| Àgbékalẹ̀ Ìkòòkò Eré 3D | Àwọn ìpele tí wọ́n ti pèsè tẹ́lẹ̀ (igbó, àléébù, àyíká ọkọ̀ òfurufú, ìlú) | Àwọn eré oníṣẹ́, àwọn iṣẹ́ ilé ìwé, àwọn ìrírí ìtàn |
| Ìfihàn Àmì 3D Tó ní Ìsopọ̀ | Àmì gẹ́gẹ́ bíi ohun elo 3D pẹ̀lú ìdarí kamera | Àwọn ìbẹ̀rẹ̀ ìwé, àwọn fílmì àmì, àwọn ìbẹ̀rẹ̀ àpéjọ |
Wo àwọn ìmọ̀-ẹ̀kọ́ 3D Eré lórí Vibe Skills láti rí àwọn ìfihàn ayàwòrán láàyè. Ọ̀kọ̀ọ̀kan ìmọ̀-ẹ̀kọ́ wá pẹ̀lú àwòrán ìfòyìnáà tí o sì rí ohun tí ó jáde ṣáá kí o tó fi sílẹ̀.
Ohun tí ó jáde ń ṣiṣẹ́ nínú ètò èdè kíkọ́ kankan: Next.js, Astro, Vite, HTML mímọ́. Kò sí ìdáwọ́ ohun kan.
Ṣe Ìpele Mẹ́ta.js Rẹ Àkọ́kọ́ Ní Ọ̀sẹ̀ Kan
Èyí ni ọ̀nà ìgbésẹ̀ láti ìbẹ̀rẹ̀ sí ojú ìwé Mẹ́ta.js tó wà láàyè lórí àjọ̀tẹ́ rẹ.
Ìgbésẹ̀ 1: Yàn Ìmọ̀-ẹ̀kọ́ Tó Dára Ní Vibe Skills
Bẹ̀rẹ̀ ní /category/3d-games kí o sì fi ohun tó jáde sílẹ̀. Bí o bá fẹ́ ìpele olórí, mú olùkọ́ Ìpele Olórí 3D. Bí o bá fẹ́ eré tó lè ṣiṣẹ́, mú Olùbẹ̀rẹ̀ Eré Ìwákọ̀ Ayàwòrán tàbí Àgbékalẹ̀ Ìkòòkò Eré 3D.
Ka ìfihàn ayàwòrán láàyè, wo àwòrán ìfòyìnáà, ṣègbègbé ìrọ́ra èdè ètò (ọ̀pọ̀ nǹkan wá pẹ̀lú react-three-fiber fún Next.js / Vite). Fi ìmọ̀-ẹ̀kọ́ sí Cursor tàbí Claude Code.
Ìgbésẹ̀ 2: Fi Cursor (táàbí Claude Code) Sílẹ̀
Àwọn ohun èlò méjèjì lè fi àwọn ìmọ̀-ẹ̀kọ́ AI ṣiṣẹ́. Cursor dára fún ìgbékalẹ̀ ojú-ìwòye pẹ̀lú ibi ìfihàn kọ́ńpútà kan. Claude Code dára fún iṣẹ́ tí a ń ṣe ní terminal àti ìṣiṣẹ́ oníṣẹ́. Yàn ọ̀kan - fi sílẹ̀ ní 5 ìṣẹ́jú.
Ìgbésẹ̀ 3: Ṣe Àwòrán Ìpele
Ṣí ilé-iṣẹ́ náà nínú olùdáṣà rẹ, pe ìmọ̀-ẹ̀kọ́ náà, sọ ohun tí o fẹ́ ní èdè Gẹ̀ẹ́sì tó rọrùn: "Àwòrán olórí kristali tó ń yí lọ pẹ̀lú ojú ìgbò, ìgbélé-wọ́, ìyípadà mímú." Ìmọ̀-ẹ̀kọ́ AI yóò fi gbogbo kọ́ńpútà Mẹ́ta.js jáde, pẹ̀lú ìmọ́lẹ̀, kamera, ìdarí, àti ìwà tó lè yí padà.
Ìgbésẹ̀ 4: Fi Àwọn Ohun Èlò Rẹ Pààrọ̀
Fi àwọn ohun elo 3D rẹ sílẹ̀ (.glb tàbí .gltf láti Sketchfab, Polyhaven, tàbí àwọn èso Blender), àwọn àwòrán (Polyhaven tí ó wà fún ọ̀fẹ́ CC0), àti àwọ̀ àmì rẹ. Ìmọ̀-ẹ̀kọ́ náà ní àyè fún ohun èlò kí o má bá ṣe ìjẹ́ ilé-iṣẹ́ náà.
Ìgbésẹ̀ 5: Ṣe Ìwà Tí Ó Dára Fún Alagàkiri
Ìmọ̀-ẹ̀kọ́ náà ń fi àwọn ohun tó lè yí padà fún alágbàkiri: àwọn iye ohun tó wà ní àwòrán, àwọn ìmọ́lẹ̀ tó rọrùn, àwọn ìwà tí a fún ní àkókò lórí àwọn GPU tí kò lágbára. Gbìyànjú lórí tẹlifóònù gidi (Chrome DevTools alágbàkiri tẹlifóònù ṣì máa ń ṣe àṣìṣe lórí àwọn ìṣòro GPU). Fi 60 FPS sí iPhone tó gbó ti ọdún 2 gẹ́gẹ́ bíi ìlànà ìbẹ̀rẹ̀.
Ìgbésẹ̀ 6: Fi Sílẹ̀
Fi sí Vercel tàbí Netlify. Àwọn ìpele Mẹ́ta.js jẹ́ JavaScript tí ó dúró - kò sí olùgbéléwọ̀n, kò sí GPU, kò sí ìtọ́jú àrà. Ojú ìwé tó wà láàyè ní ìsàlẹ̀ ìṣẹ́jú 60.
Wo àwọn ìmọ̀-ẹ̀kọ́ Mẹ́ta.js lórí Vibe Skills →
Àwọn Ìdánilẹ́kọ̀ọ́ Tí A Ń Bi Tọ̀tún
Ṣé Mo ní láti mọ̀ WebGL láti lo àwọn ìmọ̀-ẹ̀kọ́ Mẹ́ta.js AI?
Bẹ́ẹ̀ kọ́. Àwọn ìmọ̀-ẹ̀kọ́ AI lórí Vibe Skills ń fi WebGL gbogbo rẹ̀ pamọ́. O sọ̀rọ̀ nípa ìpele náà ní èdè Gẹ̀ẹ́sì tó rọrùn, ìmọ̀-ẹ̀kọ́ náà yóò fi kọ́ńpútà react-three-fiber tó ń ṣiṣẹ́ jáde, o sì máa fi àwọn ohun èlò rẹ sílẹ̀. Ohun tó jinlẹ̀ jù lọ tí o lè ṣe ni yíyí àwọ̀ àti àwọn ibi tí wọ́n fi ohun èlò sílẹ̀.
Ṣé Ìpele Náà Yóò Máa Gbó Rọ̀ Sára Alàgbàkiri?
Bẹ́ẹ̀, bí ìmọ̀-ẹ̀kọ́ náà bá ní àwọn ìlànà ìgbéwà tí ó dára fún alágbàkiri. Gbogbo àwọn olùkọ́ ìpele 3D Vibe Skills wá pẹ̀lú àwọn ohun tó lè yí padà fún àwọn ohun èlò èrò: àwọn ohun elo pẹ̀lú iye kekere fún àwọn tẹlifóònù aláìlágbára, àwọn ìwà tí a fún ní àkókò lórí àwọn ojú ìwé tí wọ́n wà ní ẹ̀yìn, àti àwọn àwòrán tí wọ́n máa ń fi sílẹ̀ nígbà tí wọ́n bá lọ. Àlàyé tí a fínú rẹ̀ jẹ́ 60 FPS lórí iPhone tó gbó ti ọdún 2. Gbìyànjú kí o tó fi sílẹ̀.
Ṣé Mo Ò Gbọ́dọ̀ Lo Mẹ́ta.js Tààrà Tàbí react-three-fiber?
Lo react-three-fiber. Ó jẹ́ wíwò tí ó jẹ́ React lórí Mẹ́ta.js tí ó mú kí kọ́ńpútà jẹ́ kí ó máa sọ̀rọ̀ pọ̀ tí ó sì ní 40-60% díẹ̀ síi. Àwọn ìmọ̀-ẹ̀kọ́ 3D Vibe Skills ń bẹ̀rẹ̀ pẹ̀lú react-three-fiber nítorí ó jọ̀wọ́ pọ̀ pẹ̀lú Next.js, Astro, àti Vite. Mẹ́ta.js tí ó mọ́ jẹ́ wúlò nìkan fún àwọn ètò JavaScript mímọ́ tàbí ìwà tó ga jù lọ.
Ṣé Mo Lè Lo Àwọn Ohun Èlò 3D Mi Láti Blender Tàbí Sketchfab?
Bẹ́ẹ̀. Fi jáde gẹ́gẹ́ bíi .glb tàbí .gltf láti Blender, tàbí gba àwọn faili .glb láti Sketchfab àti Polyhaven. Fi wọ́n sí àwọn àyè ohun èlò, fi ojú sí faili náà, ó ti tán. Wo àwọn ìmọ̀-ẹ̀kọ́ ìpele 3D láti rí àwọn àpẹẹrẹ àyè ohun èlò.
Meló ni Ìmọ̀-ẹ̀kọ́ Mẹ́ta.js Kan Fi Ìgbèsè Owó Jù Láti Ṣíṣẹ́ Oníṣẹ́?
Oníṣẹ́ WebGL tí ó ń ṣíṣẹ́ ń gba $120 sí $250 fún wákàtú, pẹ̀lú ìpele olórí tó rọrùn tó ń jẹ́ $2,000 sí $8,000. Ìdáwọ́ Vibe Skills bẹ̀rẹ̀ ní $39/òṣù tí ó sì ní àwọn ìmọ̀-ẹ̀kọ́ 3D tí kò lópin. Ojú ìwòye tí a fi fínú rẹ̀ jẹ́ ìpele kan.
Ṣé Mo Lè Ṣe Eré Kíkún Láì Kọ̀?
Bẹ́ẹ̀ fún àwọn ìfàájá, bẹ́ẹ̀ fún àwọn eré tó ti pèsè láti fi síta. Olùbẹ̀rẹ̀ Eré Ìwákọ̀ Ayàwòrán àti Àgbékalẹ̀ Ìkòòkò Eré 3D lórí Vibe Skills wá pẹ̀lú ìgbóyà tó ń ṣiṣẹ́, ìdarí, àti àwọn ìṣòro. O fi àwọn ìpele, àwòrán, àti ohùn sílẹ̀. Ìwà tí ó jẹ́ àwọn ìgbésílẹ̀ (púpọ̀ lọ́wọ́, ipò ìfipamọ́, ìwòye) ṣì ń jàǹfààní láti ọ̀dọ̀ oníṣẹ́.
Ṣé Kọ́ńpútà Mẹ́ta.js Tí AI Ṣe Yóò Máa Gbó Rọ̀?
Bí ìmọ̀-ẹ̀kọ́ náà bá ní àwọn ìlànà ìwà tí ó dára, bẹ́ẹ̀. Wò ó fún àwọn ìmọ̀-ẹ̀kọ́ tí ó ní àwọn ìdáwọ́ ìfọ̀namọ̀, ìgbóyà, ìgbòkègbọn, àti ìfọ́nú àwòrán. Àwọn ìmọ̀-ẹ̀kọ́ 3D Vibe Skills ní gbogbo mẹ́rin ní àbáta. Àwọn ìpele tí a kọ ní ọwọ́ láti ọ̀dọ̀ àwọn tí wọ́n bẹ̀rẹ̀ sábà máa ń lọ́ra nítorí àwọn ìwà tó dára jù lọ wà nínú ìwé ìtọ́nisọ́nà.
Dẹ́kun Wíwo Àwọn Ìfihàn Web 3D. Ṣe Tí Rẹ.
Mẹ́ta.js jẹ́ olùṣọ́ àgbàwọ̀ sí 3D lórí ayàwòrán fún ọdún mẹ́wàá. Àwọn ìmọ̀-ẹ̀kọ́ AI fọ́ àgbàwọ̀ náà. O kò ní láti mọ WebGL mọ́, láti san oníṣẹ́, tàbí láti lo oṣù mẹ́fà láti kọ́. O ní àìní láti sọ̀rọ̀ nípa ìpele tó dára, ìmọ̀-ẹ̀kọ́ láti Vibe Skills, àti ọ̀sẹ̀ kan.
Àwọn onísẹ̀-ọ̀nà fi àwọn olórí 3D síta. Àwọn olùtòlé fi àwọn olùṣàtò nǹkan síta. Àwọn akẹ́kọ̀ọ́ fi àwọn eré ayàwòrán síta. Àwọn olùtò market fi àwọn àtòjọ ìṣírò tó ní ìsopọ̀ síta. Ìlànà náà jẹ́ ìtọ́nisọ́nà ìṣe, kì í ṣe GLSL syntax.
Wo àwọn ìmọ̀-ẹ̀kọ́ Mẹ́ta.js àti Eré 3D lórí Vibe Skills →
Ayàwòrán ń lọ sí 3D. Fi ìmọ̀-ẹ̀kọ́ Mẹ́ta.js rẹ àkọ́kọ́ sílẹ̀ lórí Vibe Skills kí o sì fi ìpele kan síta ní ọ̀sẹ̀ yìí.