Share
Three.js este o bibliotecă JavaScript / API open-source care se utilizează pentru a crea și a afișa grafica 3D animată pe un browser web, compatibil cu elementul canvas HTML5, WebGL și SVG. În acest articol despre cum să învăț, vom explora capabilitățile acestui motor și vom împărtăși resurse și sugestii pentru a vă ajuta să începeți să dezvoltați jocuri cu el imediat.
Deoarece a fost lansat pentru prima dată de Ricardo Cabello de către Three.js la GitHub în 2010, baza de cod a fost menținută și îmbunătățită continuu de o comunitate în creștere și de susținere. Setul de caracteristici încorporate este extins și include:
Peste 100 de exemple care ilustrează aceste caracteristici (și mai mult) sunt incluse în depozitul principal și multe alte site-uri oferă colecții de exemple cu codul sursă disponibil. În plus, deoarece biblioteca este scrisă în Javascript, este ușor să te ridici și să fugi, precum și să îți desfășurezi munca.
Un joc de curse futurist creat de Thibaut Despoulain:
Un joc de curse auto creat de Jasmine Kent:
Articole de dezvoltare similare pot fi găsite pe blogul Jasmine Gamasutra.
Un platformer 2.5D redat în 3D, cu un editor de nivel live, creat de Mario Gonzalez:
Un joc de marmură / fotbal creat de Jerome Etienne:
Un joc de labirint creat de Rye Terrell:
Un joc 3D de ping-pong care încorporează chat-ul video în cadrul jocului, creat de Google:
Mai multe informații pot fi găsite pe pagina Experimente Chrome și pe acest articol din spatele scenei.
O călătorie interactivă creată de Walt Disney și UNIT9
Mai multe informații sunt disponibile pe pagina Experimente Chrome.
Din moment ce Three.js este o bibliotecă Javascript, configurarea mediului de dezvoltare este foarte ușoară: singurele cerințe sunt un editor de text și un browser web. Acestea fiind spuse, editorii de texte cu caracteristici cum ar fi evidențierea / plierea sintaxelor, potrivirea cu brațul, o hartă a documentelor și așa mai departe - cum ar fi Notepad ++ sau Sublime Text - vor oferi o experiență de codare mai bună.
În ceea ce privește browserele web, atât Google Chrome cât și Mozilla Firefox au suport WebGL excelent. Google Chrome are un set extrem de util de instrumente integrate pentru dezvoltatori, care pot simplifica foarte mult procesul de lucru, cum ar fi o consolă care poate fi folosită pentru depanarea și inspectarea valorilor și obiectelor Javascript și setările spațiului de lucru care vă permit să editați și să salvați fișierele sursă din browser. Mai multe detalii pot fi găsite pe site-ul Chrome DevTools.
Bacsis: Este, de asemenea, posibil să scrieți codul utilizând Three.js în întregime online, utilizând servicii cum ar fi jsFiddle, așa cum este demonstrat în acest exemplu. Cu toate acestea, această opțiune este, de obicei, utilizată doar pentru partajarea de exemple sau demonstrații cu cantități mici de cod.
Pentru a configura Trei.js, mergeți mai întâi la repo GitHub. Va exista un buton care spune "Descărcați ZIP", care vă va permite să descărcați întregul cod din depozit ca fișier ZIP. (Există și alte alternative, cum ar fi clonarea sau frământarea depozitului folosind Git, care nu sunt necesare pentru utilizatorul mediu - aceste opțiuni sunt în primul rând utile numai dacă intenționați să contribuiți la codul sursă sau la documentația online.)
postări asemănatoareOdată ce ați descărcat și dezarhivat fișierul într-un director pe care îl alegeți, rămâne un pas mai important înainte de a putea vedea cele mai multe exemple de pe propriul computer. Multe proiecte Three.js implică încărcarea conținutului din fișiere externe (cum ar fi imagini), dar, din motive de securitate, browserele web restricționează acest comportament în mod implicit. Cele două opțiuni pentru rezolvarea acestei probleme sunt fie modificarea setărilor de securitate în browserul dvs. web, fie rularea fișierelor de pe un server local.
Prima opțiune este cea mai simplă (de exemplu, modificarea setărilor pentru Google Chrome în Windows poate fi realizată prin crearea unei comenzi rapide pentru Chrome și editarea căii pentru a include steagul --permite-file-acces la fișiere-). Instrucțiunile pentru ambele opțiuni pot fi găsite în wiki-ul oficial, în pagina cu titlul Cum se execută lucrurile pe plan local.
Three.js este scris în Javascript, deci vă recomandăm să aveți o cunoaștere activă a acestei limbi. Există o multitudine de resurse disponibile gratuit pe internet pentru acest lucru; două resurse interactive interactive deosebite sunt:
Pentru a afla cum să creați o scenă de bază în Three.js (inclusiv o discuție despre scene, camere, redare, ochiuri și buclă de animație, vizitați: manualul oficial.) O altă mare introducere în crearea unei scene de bază este articolul Getting Started cu Three.js de Paul Lewis
Un sondaj introductiv mai amănunțit al capabilităților lui Three.js este prezentarea excelentă a lui James Williams (video și prezentare) la Introducere în WebGL și Three.js.
Documentația Three.js, disponibilă la http://threejs.org/docs/, este o lucrare în desfășurare, dar este un prim loc bun pentru a obține o idee pentru multe dintre funcțiile disponibile.
Un mod mai cuprinzător de a învăța despre funcționarea interioară a bibliotecii este să răsfoiți codul sursă al colecției oficiale de exemple de la http://threejs.org/examples/, care sunt adesea denumite după aspectul bibliotecii pe care o compun cel mai mult caracteristică proeminentă. O altă resursă, compusă din exemple simplificate și bine comentate, scrisă pentru începători, este colecția de pe http://stemkoski.github.io/Three.js/. De asemenea, multe proiecte Three.js sunt anunțate pe Twitter cu hashtag #ThreeJS sau pe subreversul Three.js.
Două colecții deosebit de impresionante și de inspirație ale proiectelor avansate Three.js sunt:
Unele site-uri web și bloguri care discută despre dezvoltare și care prezintă în mod frecvent proiecte Three.js includ:
Pentru a afla mai multe despre fundamentele graficii 3D pe calculator, consultați Interactive 3D Graphics, un curs online gratuit, susținut de Eric Haines, care oferă cursuri video și exerciții interactive de programare folosind Three.js.
Dacă trebuie să includeți funcționalități dincolo de cele furnizate de Three.js, este ușor (și practică obișnuită) să includeți biblioteci suplimentare de Javascript, cum ar fi:
Dacă doriți să creați efecte grafice avansate dincolo de cele care sunt incluse în Three.js, va trebui să învățați să scrieți shadere, care sunt funcții care rulează direct pe GPU. Două introduceri excelente la shadere, scrise în mod special pentru utilizatorii lui Three.js, sunt:
În cele din urmă, dacă sunteți interesat de implementarea proiectului dvs. pentru Android sau iOS, CocoonJS de la Ludei este o platformă care face exact acest lucru. Procesul este bine documentat și relativ ușor, deoarece majoritatea lucrărilor sunt automatizate de sistemul de compilare a norilor CocoonJS.
Dacă aveți o întrebare pe care nu o puteți găsi prin analizarea exemplelor sau a resurselor de mai sus, locul pentru a obține ajutor este Stack Overflow, site-ul de întrebări și răspunsuri premier pentru programatori profesioniști și entuziaști. În primul rând, căutați pentru a vedea dacă întrebarea dvs. a fost deja întrebată; dacă nu, înregistrați-vă un cont și întrebați-l acolo!
Cu aceste resurse la dispoziția dumneavoastră, este timpul să începeți să creați! Three.js are o comunitate activă și vibrantă, așa că trebuie să fii mereu liber să pui întrebări, să te alături discuțiilor și să-ți prezinți munca. Cel mai bun noroc pentru tine în eforturile tale!
Accentsconagua