Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Three.js galvoja daugumą 3D žiniatinklio patirčių, ir jums nebereikia rašyti jos kodą
Three.js atvaizduoja daugiau nei 70 % viso 3D turinio atvirame žiniatinklyje, nuo „Apple“ produktų puslapių iki nepriklausomų naršyklių žaidimų. Iki 2025 m. kuriant ką nors su juo, reikėjo išmokti WebGL, shaderius ir 200 puslapių dokumentacijos svetainę. Dabar dirbtinio intelekto įgūdžiai „Vibe Skills“ leidžia neprogramuotojams per savaitgalį sukurti veikiantį Three.js sceną - nereikia matematinio laipsnio, nereikia gilintis į „Stack Overflow“.
Šiame vadove parodyta, kurie dirbtinio intelekto įgūdžiai sukuria realų Three.js rezultatą, ką iš tikrųjų galite sukurti (žaidimų aplinkas, produktų peržiūras, pagrindines scenas) ir kaip pereiti nuo „Turiu idėją“ prie „ji yra aktyvi mano domene“, niekada nepalietus ranka THREE.PerspectiveCamera konstruktoriaus.
Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Kodėl Three.js anksčiau buvo neprieinamas neprogramuotojams
Three.js yra „JavaScript“ apvalkalas aplink „WebGL“, naršyklės žemo lygio 3D grafikos API. Norint jį naudoti tiesiogiai, reikėjo suprasti:
- Scenų grafikus (kameras, šviesas, tinklinius objektus ir kaip jie įdedami)
- Shaderius (viršūnių ir fragmentų programas, parašytas GLSL)
- Geometrijos matematiką (matricas, kvaternijonus, pasaulio erdvę prieš vietinę erdvę)
- Našumo biudžetus (brėžimo kvietimus, daugiakampių skaičius, tekstūros atmintį)
Tipiškas „Hello Cube“ vadovėlis prieš matant besisukantį objektą turi 800 eilutes „JavaScript“. Tikros produkcijos scenos iš tokių agentūrų kaip „Active Theory“ ar „Resn“ turi 5000 - 15000 eilučių su pasirinktiniais shaderių kanalais.
Šie barjerai laikė Three.js „WebGL“ specialistų rankose, kurie uždirbdavo 120 - 250 USD per valandą. Dizaineriai, rinkodaros specialistai, steigėjai ir studentai galėjo žavėtis darbu, bet niekada jo nepateikti.
Pokytis 2026 m.: dirbtinio intelekto kodavimo įrankiai, tokie kaip „Cursor“ ir „Claude“, dabar gali perskaityti nurodymus paprasta anglų kalba ir pateikti veikiančias react-three-fiber scenas. Dirbtinio intelekto įgūdžiai supakuoja tą darbo eigą į vieno paspaudimo įdiegimus - struktūra, apšvietimas, kameros valdikliai, našumo optimizavimas - visa tai jau paruošta.
Naršykite šimtus paruoštų įgūdžių, skirtų Claude, Cursor ir kitiems.
Ką galite sukurti su Three.js + dirbtinio intelekto įgūdžiais
Galite pateikti penkių konkrečių tipų rezultatus, nerašydami „WebGL“ ranka. Kiekvienas iš jų turi „Vibe Skills“ kategoriją, kuri supakuoja darbo eigą.
| Rezultato tipas | Realaus pasaulio pavyzdys | Kūrimo laikas (su dirbtinio intelekto įgūdžiu) | Kūrimo laikas (nuo nulio) |
|---|---|---|---|
| Žaidimų aplinka | Naršyklės lenktynių žaidimas, mini platformeris, pabėgimo kambarys | 4 - 12 valandų | 2 - 6 savaitės |
| Produkto peržiūra | 360 laipsnių sportbačiai, ausinių konfigūratorius, laikrodžio ciferblatas | 2 - 6 valandų | 1 - 3 savaitės |
| 3D pagrindinė scena | Animacinis nukreipimo puslapio fonas, 3D valdomas slinkimu | 3 - 8 valandų | 1 - 2 savaitės |
| Interaktyvi infografika | Besisukanti žemė, išardytas variklio diagramas, duomenų gaublys | 4 - 10 valandų | 2 - 4 savaitės |
| AR / bandymo žiniatinklio rodinys | Akinių peržiūra, kambario išdėstymas, mastelio modelis | 6 - 15 valandų | 3 - 6 savaitės |
Suspaudimas yra maždaug 10 - 20 kartų. Įgūdžiai tvarko papildomą kodą (scenos nustatymas, apšvietimas, valdikliai, atsakingas dydžio nustatymas), todėl jūs sutelkiate dėmesį į kūrybinę kryptį.
Dvi „Vibe Skills“ kategorijos, kurios čia aktualiausios:
- 3D žaidimai - visiškai žaidžiami 3D žaidimai per „Three.js“ (lenktynės, galvosūkis, mini platformeris, naršyklių FPS prototipai)
- Interaktyvus 3D - produktų konfigūratoriai, 3D herojai, slinkimo valdomos scenos, duomenų vizualizacijos
5 „Three.js“ dirbtinio intelekto įgūdžiai „Vibe Skills“ (nereikia „WebGL“)
3D žaidimų kategorija „Vibe Skills“ turi įgūdžių, sukurtų specialiai neprogramuotojams, norintiems Three.js rezultato. Kiekvienas iš jų tiekiamas su react-three-fiber papildomu kodu, turinio kanalu ir „Cursor“ paruoštu darbo eigų failu.
| Įgūdžio tipas | Ką jis gamina | Geriausia kam |
|---|---|---|
| 3D pagrindinės scenos kūrėjas | Slinkimo valdoma „Three.js“ scena kaip „Next.js“ komponentas | Nukreipimo puslapiai, portfelio svetainės, agentūrų pagrindiniai puslapiai |
| Naršyklės lenktynių žaidimo paleidimo priemonė | Pilnas lenktynių žaidimas su trasa, fizika, valdikliais | Žaidimų prototipai, prekės ženklų aktyvacijos, hakatono renginiai |
| Produkto konfigūratorius | 360 laipsnių žiūryklė su medžiagos / spalvos pakeitimu | El. prekybos parduotuvės, produktų pristatymai, „Kickstarter“ puslapiai |
| 3D žaidimų aplinkos paketas | Iš anksto paruoštos scenos (miškas, požemis, mokslinė fantastika, miestas) | Nepriklausomi žaidimai, mokyklos projektai, pasakojimo patirtys |
| Interaktyvus 3D logotipo atskleidimas | Logotipas kaip 3D modelis su kameros animacija | Žiniatinklio įžangos, prekės ženklų filmai, konferencijų atidarymai |
Naršykite 3D žaidimų įgūdžius „Vibe Skills“, kad pamatytumėte tiesioginius peržiūras. Kiekvienas įgūdis yra su vaizdo įrašo demonstracija, kad pamatytumėte faktinį rezultatą prieš diegdami.
Rezultatas veikia bet kokioje modernioje sistemoje: „Next.js“, „Astro“, „Vite“, paprastas HTML. Nėra tiekėjo įrišimo.
Per savaitgalį sukurkite savo pirmąją Three.js sceną
Štai praktinis kelias nuo nulio iki aktyvios Three.js scenos jūsų pačių domene.
1 žingsnis: Pasirinkite tinkamą „Vibe Skills“ įgūdį
Pradėkite nuo /category/3d-games ir filtruokite pagal rezultatų tipą. Jei norite pagrindinės scenos, pasirinkite „3D pagrindinės scenos kūrėją“. Jei norite žaidimo, pasirinkite „Naršyklės lenktynių žaidimo paleidimo priemonę“ arba „3D žaidimų aplinkos paketą“.
Perskaitykite tiesioginę peržiūrą, žiūrėkite demonstracinį vaizdo įrašą, patikrinkite sistemos suderinamumą (dauguma tiekia react-three-fiber skirta „Next.js“ / „Vite“). Įdiekite įgūdį „Cursor“ arba „Claude Code“.
2 žingsnis: Įdiekite „Cursor“ (arba „Claude Code“)
Abu įrankiai gali paleisti dirbtinio intelekto įgūdžius. „Cursor“ geriau tinka vizualiniam redagavimui su kodų peržiūros sritimi. „Claude Code“ geriau tinka terminalo valdomam darbui ir agentų darbo eigoms. Pasirinkite vieną - įdiegimas per 5 minutes.
3 žingsnis: Generuokite sceną
Atidarykite projektą savo redaktoriuje, suaktyvinkite įgūdį, apibūdinkite, ko norite, paprasta anglų kalba: „Besiginančio kristalo pagrindinė scena su tamsiai mėlynu fonu, plaukimo efektu, lėta automatine rotacija.“ Dirbtinio intelekto įgūdis pateikia visą Three.js kodą, įskaitant apšvietimą, kamerą, valdiklius ir atsakingą dydžio nustatymą.
4 žingsnis: Pakeiskite savo turinį
Įkelkite savo 3D modelius (.glb arba .gltf iš „Sketchfab“, „Polyhaven“ arba „Blender“ eksporto), tekstūras („Polyhaven“ nemokamai CC0) ir prekės ženklo spalvas. Įgūdis apima turinio vietas, todėl nereikia performatuoti scenos.
5 žingsnis: Optimizuokite mobiliesiems
Įgūdis tiekiamas su mobiliaisiais atsarginiais variantais: mažesni daugiakampiai, paprastesnis apšvietimas, apribotas kadrų dažnis silpnuose GPU. Testuokite tikru telefonu („Chrome DevTools“ mobiliojo emuliatorius praleidžia GPU problemas). Tikslas - 60 kadrų per sekundę „2 metų senumo“ „iPhone“ kaip bazinė linija.
6 žingsnis: Įdiekite
Įrašykite į „Vercel“ arba „Netlify“. Three.js scenos yra statinis „JavaScript“ - jokių serverių, jokių GPU instancijų, jokio specialaus priglobimo. Aktyvi URL per 60 sekundžių.
Naršykite „Three.js“ įgūdžius „Vibe Skills“ →
Dažnai užduodami klausimai
Ar man reikia mokėti „WebGL“, kad galėčiau naudoti „Three.js“ dirbtinio intelekto įgūdžius?
Ne. „Vibe Skills“ Vibe Skills dirbtinio intelekto įgūdžiai visiškai apima „WebGL“. Jūs apibūdinate sceną paprasta anglų kalba, įgūdis pateikia veikiantį react-three-fiber kodą, o jūs pakeičiate savo turiniu. Giliausias jūsų pasiekimas - spalvų reikšmių ir modelių failų kelių redagavimas.
Ar scena sklandžiai veiks mobiliajame telefone?
Taip, kai įgūdis apima mobiliųjų įrenginių optimizavimą. Visos „Vibe Skills“ 3D scenų kūrimo priemonės tiekia įrenginio lygio atsarginius variantus: mažo poligono tinklinius objektus silpnuose telefonuose, apribotą kadrų dažnį foniniuose skirtukuose ir atidėto įkėlimo tekstūras. Tikslas - 60 kadrų per sekundę „2 metų senumo“ „iPhone“. Prieš pateikiant, testuokite.
Ar turėčiau naudoti žalią Three.js ar react-three-fiber?
Naudokite react-three-fiber. Tai yra „React“ apvalkalas aplink „Three.js“, kuris daro kodą deklaratyvų ir 40 - 60 % trumpesnį. „Vibe Skills“ 3D įgūdžiai pagal numatytuosius nustatymus naudoja react-three-fiber, nes jis švariai sudaro su „Next.js“, „Astro“ ir „Vite“. Žalias „Three.js“ vertas tik grynųjų „JavaScript“ variklių ar ekstremalaus optimizavimo.
Ar galiu naudoti savo 3D modelius iš „Blender“ ar „Sketchfab“?
Taip. Eksportuokite kaip .glb arba .gltf iš „Blender“ arba atsisiųskite .glb failus iš „Sketchfab“ ir „Polyhaven“. Įdėkite juos į turinio aplanką, nukreipkite įgūdį į failą ir viskas. Naršykite 3D scenos įgūdžius, kad pamatytumėte turinio vietos pavyzdžius.
Kiek kainuoja „Three.js“ įgūdis, palyginti su programuotojo samdymu?
„WebGL“ laisvai samdomas darbuotojas kainuoja 120 - 250 USD per valandą, o paprasta pagrindinė scena kainuoja 2000 - 8000 USD. „Vibe Skills“ prenumerata prasideda nuo 39 USD per mėnesį ir apima neribotus 3D įgūdžius. Atsipirkimo taškas yra viena scena.
Ar galiu sukurti pilną žaidimą be kodavimo?
Taip, prototipams, daugiausia taip, laisvai parduodamiems žaidimams. „Naršyklės lenktynių žaidimo paleidimo priemonė“ ir „3D žaidimų aplinkos paketas“ „Vibe Skills“ tiekia veikiančią fiziką, valdiklius ir taškų skaičiavimą. Jūs pridedate lygius, meną ir garsą. Gamybos apdaila (daugiažaidėjus, išsaugotą būseną, analitiką) vis dar naudinga programuotojui.
Ar dirbtinio intelekto generuojamas „Three.js“ kodas bus našus?
Jei įgūdis apima našumo išankstinius nustatymus, taip. Ieškokite įgūdžių, kurie tiekia brėžimo kvietimų biudžetus, sutrikdymo iškirtimą, instancijuotus tinklinius objektus ir tekstūros suspaudimą. „Vibe Skills“ 3D įgūdžiai pagal numatytuosius nustatymus apima visus keturis. Rankiniu būdu užkoduotos pradedančiųjų scenos paprastai yra lėtesnės, nes optimizavimai yra paslėpti dokumentacijoje.
Nustokite žiūrėti 3D žiniatinklio demonstracijas. Pateikite savo.
„Three.js“ dešimtmetį buvo vartininkas į 3D žiniatinklyje. Dirbtinio intelekto įgūdžiai sulaužė vartus. Jums nebereikia „WebGL“ žinių, programuotojo samdymo ar 6 mėnesių mokymosi laikotarpio. Jums reikia aiškaus scenos aprašymo, „Vibe Skills“ įgūdžio ir savaitgalio.
Dizaineriai pateikia 3D herojus. Steigėjai pateikia produktų peržiūras. Studentai pateikia naršyklių žaidimus. Rinkodaros specialistai pateikia interaktyvias infografikas. Dabar svarbiausia yra kūrybinė kryptis, o ne GLSL sintaksė.
Naršykite „Three.js“ ir 3D žaidimų įgūdžius „Vibe Skills“ →
Žiniatinklis pereina į 3D. Įdiekite savo pirmąjį „Three.js“ įgūdį „Vibe Skills“ ir per savaitgalį pateikite sceną.