Un ghid al lui Noob la trei.js

De obicei, puteți utiliza aplicații precum SketchUp sau chiar Blender pentru a desena obiectele 3D, cu toate acestea există o curbă de învățare înaltă pentru aplicațiile de desen 3D - o curbă care este cu siguranță în afara domeniului de aplicare al acestui articol.

Dacă Îți place Piña Collada

Pentru a insera obiectul 3D pe scena, trebuie sa utilizam ColladaLoader. Trebuie menționat că orice grafic pe care decideți să-l utilizați ar trebui în general să fie sub 1-2Mb și trebuie să fie un fișier Collada pentru a fi utilizat cu Three.js: acestea sunt fișiere care se termină cu .dae extensie. Dacă deschideți un fișier Collada, veți vedea că este scris de fapt în XML.

Începem prin definirea ColladaLoader folosind o variabilă și apelarea metodei împreună cu definirea unei alte variabile care să reprezinte graficul 3D pentru referire la un punct ulterior.

var dae, // încărcător grafic = nou THREE.ColladaLoader (); // încărcător

Acesta este un început minunat, dar trebuie să facem ceva mai mult de făcut pentru a afișa telefonul. Să facem o funcție care va face exact așa:

funcția loadCollada (collada) dae = collada.scene; scene.add (dae); 

Pentru următorul pas vom folosi sarcină , treceți adresa URL a fișierului nostru Collada și apoi apelați funcția noastră după nume ca al doilea argument:

loader.load ('http://myurl.com/file/iphone6.dae', loadCollada);

Dacă doriți să aflați mai multe despre ColladaLoader puteți săpe prin codul sursă pe GitHub.

4. Bucle de rulare

Cu încărcătorul și graficul în final, există un ultim pas; trebuie să creăm ceea ce se numește o "buclă de randare". Acest lucru se datorează faptului că nu mai dăm nimic încă.

Această "buclă de render" este ceea ce va determina redarea să deseneze scena de șaizeci de ori pe secundă. Următoarea funcție va face din creația noastră viu (cea mai bună parte a întregului proces).

funcția renderPhone () requestAnimationFrame (renderPhone); renderer.render (scenă, cameră);  renderPhone ();

requestAnimationFrame are o serie de avantaje. Cel mai important este că acesta se oprește când utilizatorul navighează către o altă filă de browser, în cele din urmă nu irosind puterea de procesare și durata de viață a bateriei.

Produs final

Rezultatul acestei lucrări este o redare dulce a unui iPhone 3D pe care îl puteți roti, roti și măriți și plasa din:

Există încă câțiva biți care au intrat în creația finală, așa că vă încurajez să vă aruncați mai adânc în panoul JavaScript al demo-ului.

De exemplu; Iluminat (Lumină ambientală, HemisphereLight, PointLight), TrackballControls, AxisHelper și un eveniment de redimensionare a ferestrelor. Unele dintre aceste elemente nu conțin documentație, cum ar fi TrackballControls, dar puteți găsi toate proprietățile disponibile în fișierul JS de bază pe GitHub. Există și alte controale foarte reale pe care le puteți utiliza, care sunt, de asemenea, listate pe GitHub.

Inspirație

Uneori aveți nevoie de puțină inspirație pentru a obține creierul să ardă idei într-un ritm rapid. Următoarele sunt câteva dintre demosurile mele preferate, folosind Trei.js care transformă visele în realitate. 

Citirea în continuare

Rachel Smith a scris un articol extraordinar despre CodePen despre WebGL și recomand să-i citești când ai timp liber. Tutorialul este plin de limbaj simplu si este o explicatie minutioasa a lui Three.js despre scena, geometria, iluminarea, materialele si animatia pe care cu siguranta nu le-am putut acoperi in acest scurt post.

De asemenea, vă puteți bucura:

• WebGL cu texturi și particule THREE.js
• THREE.js pentru dezvoltarea jocurilor
  
• WebGL cu baza de date THREE.js
  

credite

Acest articol nu ar fi fost posibil fără ajutorul generos din partea comunității Animation at Work Slack, așa că aș vrea să-i mulțumesc lui Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch și Chris Johnson.