Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Three.js-ek webguneet 3Dko esperientzia gehienak bultzatzen ditu, eta ez duzu jada hori kodetu behar
Three.js-ek web irekiko 3Dko eduki guztien %70 baino gehiago erakusten du, Apple-en produktuen orrialdeetatik hasi eta indie nabigatzaile jokoetaraino. 2025era arte, horrekin zerbait eraikitzeak WebGL, shaderrak eta 200 orrialdeko dokumentazio gune bat ikastea esan nahi zuen. Orain, Vibe Skills plataformako trebetasun adimendunek aukera ematen diete garatzaile ez direnei asteburu batean funtzionatzen duen Three.js eszena bat bidaltzeko - ez da matematika gradurik behar, ezta Stack Overflow-eko sagu zulorik ere.
Gida honek erakusten du zein trebetasun adimendunek ekoizten duten benetako Three.js irteera, zer eraiki dezakezun (joko inguruneak, produktuen bistaratzaileak, heroien eszenak), eta nola iritsi ideia bat izatetik "nire domeinuan zuzenean dago" egoerara, inoiz eskuz THREE.PerspectiveCamera konstruktoreari ukitu gabe.
Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Zergatik zen Three.js inoiz garatzaile ez direnentzat erabilgarri
Three.js WebGL-en (nabigatzailearen 3Dko grafikoen API baxua) bilgarria da. Hura zuzenean erabiltzeko, honakoak ulertu behar zenituen:
- Eszenen grafikoak (kamerak, argiak, sareak eta nola txertatzen diren)
- Shaderrak (GLSLn idatzitako programa bertikalak eta fragmentu programak)
- Geometriaren matematika (matrizeak, kuaternionak, mundu espazioa vs espazio lokala)
- Errendimendu aurrekontuak (marrazketa deiak, poligono kopurua, testura memoria)
"Kaixo Kubo" tutorial tipiko batek 800 JavaScript lerro hartzen ditu forma birakari bat ikusi aurretik. Active Theory edo Resn bezalako agentzietako produkzio eszena errealek 5.000 eta 15.000 lerro erabiltzen dituzte shader pipeline pertsonalizatuekin.
Atari horrek Three.js WebGL espezialisten esku utzi zuen, orduko 120 eta 250 $ artean irabazten zutenak. Diseinatzaileek, marketin arduradunek, sortzaileek eta ikasleek lana miretsi zezaketen, baina inoiz ezin zuten bidali.
2026ko aldaketa: Cursor eta Claude bezalako AI kode tresnek jada irakur dezakete ingelesezko azalpen bat eta react-three-fiber eszenak ekoitzi. AI trebetasunak lan prozesu hori klik bakarreko instalazioetan paketetzen du - egitura, argiztapena, kamera kontrolak, errendimendu optimizazioa, dena aurrez prest.
Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.
Zer eraiki dezakezu Three.js + AI trebetasunekin
Bost irteera mota zehatz bidal ditzakezu, WebGL eskuz idatzi gabe. Bakoitzak bere Vibe Skills kategoria du, lan prozesua biltzen duena.
| Irteera mota | Benetako adibidea | Eraikuntza denbora (AI trebetasunarekin) | Eraikuntza denbora (hutsetik) |
|---|---|---|---|
| Joko ingurunea | Nabigatzaileko lasterketa jokoa, mini plataformako jokoa, ihes gela | 4-12 ordu | 2-6 aste |
| Produktuen bistaratzailea | 360 graduko sneaker, entzungailuen konfiguragailua, erlojuaren aurpegia | 2-6 ordu | 1-3 aste |
| Heroien 3D eszena | Animaziozko lehorreratze orriaren atzeko planoa, scroll bidez gidatutako 3D | 3-8 ordu | 1-2 aste |
| Infografia interaktiboa | Lurreko pirulari, motorraren diagrama lehertua, datuen globo bat | 4-10 ordu | 2-4 aste |
| AR / saiatu-jantzi web ikuspegia | Betaurrekoen aurrebista, gelaren kokapena, eskala eredua | 6-15 ordu | 3-6 aste |
Konpresioa gutxi gorabehera 10x eta 20x artekoa da. Trebetasunek boilerplatea (eszenaren konfigurazioa, argiak, kontrolak, tamaina aldakorra) kudeatzen dute, sormenezko norabidean zentratzeko.
Hemen garrantzitsuenak diren bi Vibe Skills kategoria:
- 3D Jokoak - Jolasgarri diren 3D joko osoak Three.js bidez (lasterketak, puzzleak, mini plataformakoak, nabigatzaileko FPS prototipoak)
- 3D Interaktiboa - Produktuen konfiguragailuak, 3D heroien eszenak, scroll bidez gidatutako eszenak, datuen bistaratzeak
Vibe Skills-eko 5 AI Three.js trebetasun (ez da WebGL behar)
Vibe Skills-eko 3D Jokoak kategoria Three.js irteera nahi duten garatzaile ez direnentzat bereziki sortutako trebetasunak ditu. Bakoitzak react-three-fiber boilerplatea, asset pipelinea eta Cursor-erako prest dagoen lan-fluxu fitxategia ditu.
| Trebetasun mota | Zer ekoizten du | Onena |
|---|---|---|
| Heroien 3D Eszena Eraikitzailea | Scroll bidez gidatutako Three.js eszena Next.js osagai gisa | Lehorreratze orriak, portfolio guneak, agentzien hasierako orriak |
| Nabigatzaileko Lasterketa Jokoaren Abiarazlea | Lasterketa joko osoa pista, fisika eta kontrolak dituena | Joko prototipoak, marka aktibazioak, hackathoak |
| Produktuen Konfiguragailua | 360 graduko bistaratzailea material/kolore aldaketarekin | Ecommerce dendak, produktu aurkezpenak, Kickstarter orriak |
| 3D Joko Ingurunea Paketea | Aurrez eraikitako eszenak (basoa, ziega, zientzia-fikzioa, hiria) | Indie jokoak, eskola proiektuak, esperientzia narratiboak |
| 3D Logo Errebelazio Interaktiboa | Logoa 3D modelo gisa kamera animazioarekin | Web sarrerak, marka filmak, konbentzio irekitzeak |
Arakatu 3D Jokoen trebetasunak Vibe Skills-en zuzeneko aurrebistak ikusteko. Trebetasun bakoitzak bideo demo bat du, beraz, instalatu aurretik irteera erreala ikus dezakezu.
Irteera edozein framework modernoetan funtzionatzen du: Next.js, Astro, Vite, HTML soila. Ez dago vendor lock-in-ik.
Eraiki zure lehen Three.js eszena asteburu batean
Hona hemen zero puntutik zure domeinu propioan zuzenean dagoen Three.js eszena baterako bide praktikoa.
1. urratsa: Aukeratu trebetasun egokia Vibe Skills-en
Hasi /category/3d-games helbidean eta iragazi irteera motaren arabera. Heroien eszena bat nahi baduzu, hartu Heroien 3D Eszena Eraikitzailea. Joko jolasgarri bat nahi baduzu, hartu Nabigatzaileko Lasterketa Jokoaren Abiarazlea edo Joko Ingurunea Paketea.
Irakurri zuzeneko aurrebista, ikusi demo bideoa, egiaztatu framework-en bateragarritasuna (gehienek react-three-fiber dute Next.js / Vite-rako). Instalatu trebetasuna Cursor edo Claude Code-ra.
2. urratsa: Instalatu Cursor (edo Claude Code)
Bi tresnek AI trebetasunak exekutatu ditzakete. Cursor hobeto moldatzen da edizio bisualerako, kodearen aurrebista panelekin. Claude Code hobeto moldatzen da terminal bidezko lanerako eta agentzien lan-fluxuetarako. Aukeratu bat - instalazioa 5 minututan.
3. urratsa: Sortu eszena
Ireki proiektua zure editorean, deitu trebetasunari, deskribatu nahi duzuna ingelesez: "Kristal pirulari heroien eszena itsas zabaleko urdin iluneko atzeko planoarekin, flotagarri efektuarekin, astiro auto-biraketa". AI trebetasunak Three.js kode osoa sortzen du, argiak, kamera, kontrolak eta tamaina aldakorra barne.
4. urratsa: Trukatu zure asset-ak
Sartu zure 3D modeloak (.glb edo .gltf Sketchfab, Polyhaven edo Blender esportazioetatik), testurak (Polyhaven doako CC0) eta markaren koloreak. Trebetasunak asset zirrikituak ditu, beraz, ez duzu eszena berrantolatu beharrik.
5. urratsa: Optimizatu mugikorrerako
Trebetasunak mugikorrerako erreserbak ditu: poligono kopuru baxuagoak, argi sinpleagoak, karga-denbora mugatua GPU ahuletan. Probatu telefono erreal batean (Chrome DevTools mugikorreko emuladoreak ez ditu GPU arazoak hartzen). Helburua 60 FPS 2 urteko iPhone batean gutxieneko gisa.
6. urratsa: Zabaldu
Bidali Vercel edo Netlifyra. Three.js eszenak JavaScript estatikoak dira - ez zerbitzaririk, ezta GPU instantziarik, ezta hosting berezirik behar. URL zuzena 60 segundo baino gutxiagotan.
Arakatu Three.js trebetasunak Vibe Skills-en →
Maiz egindako galderak
Behar dut WebGL jakitea AI Three.js trebetasunak erabiltzeko?
Ez. Vibe Skills-eko AI trebetasunek WebGL guztiz biltzen dute. Ingurune natural batean deskribatzen duzu eszena, trebetasunak funtzionatzen duen react-three-fiber kodea sortzen du, eta zure asset-ak trukatzen dituzu. Sakonena kolore balioak eta modelo fitxategien bideak editatzea da.
Exekutatuko da eszena ondo mugikorrean?
Bai, trebetasunak mugikorrerako optimizazioak dituenean. Vibe Skills 3D eszena eraikitzaile guztiek gailu mailako erreserbak dituzte: poligono baxuko modeloak telefono ahuletan, karga-denbora mugatua atzealdeko fitxetan, eta testura kargatzen aldez aurretik. Helburua 60 FPS 2 urteko iPhone batean da. Probatu bidali aurretik.
Raw Three.js edo react-three-fiber erabili behar dut?
Erabili react-three-fiber. Three.js-en gaineko React bilgarria da, kode deklaratiboa eta %40-60 laburragoa egiten duena. Vibe Skills 3D trebetasunek react-three-fiber dute lehenespenez, Next.js, Astro eta Vite-rekin garbi konposatzen baita. Raw Three.js JS hutseko motorretarako edo optimizazio muturrekoetarako bakarrik merezi du.
Erabil dezaket nire 3D modeloak Blender edo Sketchfab-etik?
Bai. Esportatu .glb edo .gltf Blenderretik, edo deskargatu .glb fitxategiak Sketchfab eta Polyhaven-etik. Sartu asset karpetan, zuzendu trebetasuna fitxategira, egina. Arakatu 3D eszena trebetasunak asset zirrikituen adibideak ikusteko.
Zenbat balio du Three.js trebetasun batek garatzaile bat kontratatzearen aldean?
WebGL freelancer batek orduko 120 eta 250 $ artean kobratzen du, eta heroien eszena oinarrizko batek 2.000 eta 8.000 $ balio ditu. Vibe Skills harpidetza 39 $/hilean hasten da eta 3D trebetasun mugagabeak barne hartzen ditu. Parekatze puntua eszena bat da.
Eraiki dezaket joko oso bat kode idatzi gabe?
Bai prototipoetarako, bai gehienbat bai prest dauden jokoetarako. Vibe Skills-eko Nabigatzaileko Lasterketa Jokoaren Abiarazlea eta Joko Ingurunea Paketeak fisika, kontrolak eta puntuazio funtzionalak dituzte. Mailak, arteak eta soinuak gehitzen dituzu. Produkzio akabera (multiplayer, gorde egoera, analitika) oraindik garatzaile baten onuradun da.
Errendimendu ona izango al du AIak sortutako Three.js kodeak?
Trebetasunak errendimendu aurrezarpenak baditu, bai. Bilatu marrazketa deien aurrekontuak, frustum zulatzea, sare espezifikoak eta testura konpresioa dituzten trebetasunak. Vibe Skills 3D trebetasunek lau horiek lehenespenez barne hartzen dituzte. Hasiberrien eskuz kodetutako eszenak motelagoak izan ohi dira optimizazioak dokumentazioan ezkutaturik baitaude.
Utzi 3D web demoak ikusteari. Bidali zurea.
Three.js 3Drako atezain zen webgunean hamarkada batez. AI trebetasunek atea hautsi zuten. Ez duzu jada WebGL ezagutzarik, garatzaile kontratazioik edo 6 hilabeteko ikasteko biderik behar. Eszena deskribapen argi bat, Vibe Skills-eko trebetasun bat eta asteburu bat behar dituzu.
Diseinatzaileek 3D heroien eszenak bidaltzen dituzte. Sortzaileek produktuen bistaratzaileak bidaltzen dituzte. Ikasleek nabigatzaile jokoak bidaltzen dituzte. Marketin arduradunek infografia interaktiboak bidaltzen dituzte. Taberna orain sormenezko norabidea da, ez GLSL sintaxia.
Arakatu Three.js eta 3D Jokoen trebetasunak Vibe Skills-en →
Weba 3Dra doa. Instalatu zure lehen Three.js trebetasuna Vibe Skills-en eta bidali eszena bat asteburu honetan.