10 exemple uimitoare de sursă deschisă de Three.js în acțiune

Poate părea nebunesc, dar puteți construi obiecte 3D cu JavaScript. Majoritatea dezvoltatorilor web se bazează pe biblioteci precum Three.js pentru a realiza acest lucru.

Dar este un proces atât de detaliat încât nu toată lumea se deranjează să se uite la el. Acum, dacă ești curios despre chestii 3D JS, cel mai bun mod de a învăța este studiul altora. Tocmai de aceea am făcut această galerie.

Acestea sunt unele dintre cele mai bune proiecte Three.js pe care le-am putut găsi găzduite pe CodePen. Acestea prezintă o grămadă de stiluri și trăsături diferite care vă vor stimula motorul creativ.

1. Low Poly Earth

Cu un singur element HTML și câteva zeci de linii de CSS/JS, avem acest Low Poly Earth al dezvoltatorului Sam Saccone.

S-ar putea să nu pară mult la început. Dar este una dintre cele mai proeminente idei pe care le-am văzut și chiar folosește un efect de animație personalizat. Masele de uscat chiar se lipesc de Pământ, dându-i un aspect mult mai realist.

Oricine a folosit Three.js înainte ar trebui să știe cât de minunat este.

Este cu siguranță un salt înaintea proiectelor similare – mai ales pentru baza de cod mai mică.

2. Sfere

Acest proiect ciudat asemănător planetei folosește și Three.js cu un efect destul de îngrijit. Spheres rulează pe preprocesorul Stylus, pe care îl puteți vedea importat în CSS.

De asemenea, rulează fără HTML - ceea ce face ca acest lucru să fie o priveliște de văzut. Este totul JS, totul 3D și rulează perfect în fiecare browser modern.

Sferele mai mici alunecă peste globul mai mare folosind funcții geometrice din biblioteca JS. Pare nebunesc că acest lucru este chiar posibil, dar este o dovadă a cât de departe am ajuns cu CSS.

3. Rotația planetei

Intrând în alte idei planetoide, avem această galaxie rotativă nebună creată de dezvoltatorul Bryan Jones.

De asemenea, nu folosește decât Three.js și câteva CSS de bază pentru a stila și organiza planetele. Trebuie să spun că efectele 3D sunt surprinzătoare. Încă nu pot să-mi înțeleg faptul că aceste lucruri sunt posibile într-un browser web obișnuit!

Dar nu se poate nega că acest fragment CodePen este un ajutor excelent de studiu dacă abia începi pe teritoriul Three.js.

4. Logo-ul Treehouse în Three.js

Resursa de învățare online Treehouse este pur și simplu fenomenală – mai ales pentru începători. Unul dintre instructorii lor, Nick Pettit, a creat de fapt un logo complet Treehouse folosind Three.js.

Și lasă-mă să spun că acest lucru este minunat! Nu am mai văzut o astfel de configurație și rar văd pixuri care au comentarii atât de detaliate. Codul lui Nick face mult mai ușor să cercetezi, să găsești funcții pe care nu le înțelegi și apoi să apeși pe Google pentru răspunsuri.

Totul despre acest logo 3D ar trebui să demonstreze că JS modern este departe de a fi învechit.

Sugestie: încercați să faceți clic + să trageți peste ecran pentru a roti sigla. Chestii distractive!

5. Butoi de lemn

Iată un alt fragment nebun dezvoltat de Nick Pettit folosind doar cod JS pur. Fără HTML, fără CSS - totul este redat prin limbajul JavaScript.

Desigur, aceasta se bazează pe elementul canvas, pe care îl puteți genera în JavaScript. L-am folosit puțin și eu, dar niciodată până la acest nivel. Acesta arată cât de mult poți face cu o bibliotecă 3D solidă.

Și demonstrează, de asemenea, că Nick chiar știe să predea. Acesta este doar unul dintre multele mostre din contul său CodePen – toate au comentarii ușor de citit pentru a învăța pe măsură ce mergi.

6. Three.js + TweenMax

Dezvoltatorul Martand Kashyap a combinat scriptul TweenMax împreună cu Three.js pentru a face acest lucru nebun.

Este unul dintre cele mai unice stilouri din această listă, cu câteva efecte de animație grozave. Panourile arată de fapt ca suprafețe plane 2D, dar animațiile de răsturnare creează un efect 3D natural. Devine destul de nebun dacă te uiți la el suficient de mult.

Acesta s-a bazat de fapt pe un proiect motion graphic pe care Martand l-a convertit în JavaScript. Văd asta mult mai des și este al naibii de impresionant.

7. Câmpul stelelor de particule

Conceptul de mișcare pe o suprafață 2D aduce în minte tot felul de modele de paralaxă. Le veți găsi pe tot web, de multe ori folosind funcții experimentale în JavaScript.

Și acest fragment de la CodePen este mai mult decât fantastic pentru a aduna astfel de idei. Are o animație destul de nebună, cu viteze diferite de zoom, deplasare laterală și o grămadă de alte funcții conexe.

Particulele sunt generate dinamic și puteți face clic oriunde pe pagină pentru a mări. Se simte ca un gol nesfârșit de spațiu – la fel ca cel în care trăim. Dar acesta este creat cu cod JS pur.

8. Cuburi Haml

Pentru mai multă geometrie rotativă, consultați aceste cuburi Three.js. Acestea rulează pe limbajul de șabloane Haml împreună cu ~ 100 de linii de JavaScript.

Poate cea mai impresionantă parte a acestui design este efectul de umbrire. Nu vedeți acest lucru foarte des, dar este una dintre cele mai bune modalități de a crea un efect 3D realist în browser.

Din fericire, puteți gestiona totul prin Three.js - cu fragmentele potrivite. Și acesta poate funcționa ca un șablon grozav în acest scop.

9. Teseract

Mike Fey a dezvoltat acest tesseract incredibil de complex redat în spațiu 3D. De fapt, arată mai mult ca un cub desfășurat organizat în spațiu 3D – un fel ca un cub în interiorul unui cub.

Dar rețineți că această demonstrație necesită o mulțime de biblioteci pentru a funcționa. Mike are cinci scripturi JS diferite cu jQuery, jQuery UI, ThreeJS, TweenJS și un script CubeJS. Ultimele 3 sunt găzduite pe site-ul său personal și ar trebui să aibă acces liber.

Nu pot spune că acest proiect s-ar dovedi valoros în lumea reală. Dar este o resursă de învățare al naibii dacă doriți să vă scufundați în geometria spațială 3D.

10. Cioburi 3D

Dezvoltatorul Tobias Duhr a construit aceste fragmente 3D ca o mostră a ceea ce este posibil în ThreeJS. Ele funcționează ca cuburile rotative menționate mai devreme, cu excepția faptului că formele sunt diferite și umbrirea a dispărut, de asemenea.

Aș considera aceasta o introducere mai ușor de învățat ThreeJS dacă nu ești sigur de unde să începi. Desigur, acesta nu este un tutorial, așa că nu vă poate învăța ca alte resurse.

Dar, doar studiind acest cod, vei pleca cu câteva idei noi pentru munca ta.

11. Arborele Pitagora 3D

Acest arbore 3D Pitagora este pur și simplu uimitor. Dezvoltatorul Josep Llodra a creat acest proiect cu doar 150 de linii de JavaScript, alături de biblioteca Three.js.

De fapt, se bazează pe acest proiect, despre care am menționat mai devreme. Practic, structurează acele cuburi într-o singură formă definită și apoi le organizează în funcție de dimensiune și poziție.

Dacă nu ești sigur ce poți face cu Three.js, atunci sper că această galerie oferă puțină inspirație. Dar poți găsi oricând mai multe pe CodePen dacă ești dispus să te uiți în jur.