Share
Grafica 3D în browser a fost un subiect fierbinte de când a fost introdus pentru prima oară. Dar dacă v-ați crea aplicațiile utilizând WebGL simplu, ar dura vechime. Acesta este motivul pentru care au apărut recent unele biblioteci cu adevărat utile. Three.js este unul dintre cele mai populare și în această serie vă voi arăta cât de bine să o utilizați pentru a crea experiențe 3D uimitoare pentru utilizatorii dvs..
Înainte de a începe, mă aștept să aveți o înțelegere de bază a spațiului 3D înainte de a începe să citiți acest tutorial, deoarece nu voi explica lucruri precum coordonate, vectori etc..
Mai întâi, creați trei fișiere: index.html, main.js și style.css. Acum, descărcați Three.js (întregul fișier zip cu exemple și sursă, sau doar fișierul JavaScript, alegerea dvs.). Acum deschis index.html și introduceți acest cod:
Asta e tot ce ai nevoie în acest fișier. Doar o declarație de scripturi și o foaie de stil. Toată magia se va întâmpla main.js, dar înainte de a ajunge la asta avem nevoie de încă un truc pentru ca aplicația să arate bine. Deschis style.css și introduceți acest cod:
panza poziție: fixă; top: 0; stânga: 0;
Aceasta va poziționa pânza în colțul din stânga-sus, deoarece, în mod implicit, corp va avea o marjă de 8 pixeli. Acum putem continua cu codul JavaScript.
Three.js utilizează conceptul unei liste de afișare. Aceasta înseamnă că toate obiectele sunt stocate în listă și apoi desenate pe ecran.
Three.js utilizează conceptul unei liste de afișare. Aceasta înseamnă că toate obiectele sunt stocate în listă și apoi desenate pe ecran. Aici este a THREE.Scene obiect. Trebuie să adăugați pe scena orice obiect pe care doriți să îl desenați pe ecran. Puteți să aveți cât mai multe scene pe care le doriți, dar un redarer poate desena o singură scenă simultan (desigur, puteți schimba scena afișată).
Renderul trage totul de la scenă la pânza WebGL. Three.js acceptă, de asemenea, desen pe SVG sau 2D Canvas, dar ne vom concentra pe WebGL.
Pentru a începe, permiteți stocarea lățimii și înălțimii ferestrei în variabile, vom folosi mai târziu:
var lățimea = window.innerWidth; var înălțime = window.innerHeight;
Acum definiți randarea și scena:
var renderer = nou THREE.WebGLRenderer (antialias: true); renderer.setSize (lățime, înălțime); document.body.appendChild (renderer.domElement); var scena = nouă Trilul;
Prima linie defineste randarea WebGL. Puteți parcurge opțiunile de randare în primul argument ca o hartă. Aici, am setat AntiAlias la adevărat, pentru că vrem ca marginile obiectelor să fie netede, nu zimțate.
A doua linie stabilește dimensiunea randatorului la dimensiunea ferestrei, iar în al treilea adăugăm randarea pânză element în document (puteți face acest lucru și utilizând o bibliotecă, cum ar fi jQuery: $ ( 'Organism'). Append (renderer.domElement)).
Ultimul definește scena, nu sunt necesare argumente.
Acum permiteți adăugarea de elemente pentru a fi desenate. Lăsați-l să fie un cub, deoarece este cel mai simplu obiect 3D. În Trei obiecte care sunt desenate pe ecran se numesc ochiuri. Fiecare plasă trebuie să aibă propria geometrie și material. Geometria este un set de puncte care trebuie conectate pentru a crea obiectul. Materialul este pur și simplu vopseaua (sau pictura, dar nu este subiectul acestui tutorial) care va acoperi obiectul. Deci, vă permite să creați cubul nostru. Din fericire pentru noi există câteva funcții helper în Three.js pentru a crea primitive (forme simple):
var cubeGeometrie = nouă TEGie.Celometrie (100, 100, 100); var cubeMaterial = nou THREE.MeshLambertMaterial (culoare: 0x1ec876); var cube = nou TREI.Mesh (cubeGeometrie, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (cub);
După cum puteți vedea, mai întâi vom crea geometria. Argumentele definesc o dimensiune a cubului: lățimea, înălțimea și adâncimea.
Apoi, definim materialul cubului. Există câteva tipuri de materiale în Three.js, dar de data aceasta vom folosi THREE.MeshLambertMaterial, deoarece vrem să avem o iluminare mai târziu (acest material folosește algoritmul Lambert pentru calculele de lumină). Puteți parcurge opțiunile din primul argument ca o hartă, la fel ca și în cazul rendererului - aceasta este aproape o regulă pentru obiecte mai complexe în Three.js. Aici folosim numai culoarea, care este trecut ca un număr hexazecimal.
Pe a treia linie, creăm o plasă folosind geometria și materialul creat mai devreme. Apoi, rotim cubul cu 45 de grade pe axa Y, pentru ca acesta să arate mai bine. Trebuie să schimbăm gradele la radiani, lucru care este tratat de ecuația pe care probabil o ții minte din clasa fizică de liceu: Math.PI * 45/180. În cele din urmă, cubul este adăugat la scenă.
Acum poți deschide index.html în browser-ul dvs. pentru a vedea rezultatele, dar nu veți vedea nimic pentru că scena nu este redată încă.
Pentru a face ceva, mai întâi trebuie să adăugăm camera la scenă, astfel încât redarerele știe din ce punct de vedere ar trebui să facă lucruri. Există câteva tipuri de camere în Trei.js, dar probabil veți folosi doar THREE.PerspectiveCamera. Acest tip de aparat foto prezintă scena așa cum vedem lumea noastră. Vă permite să creați unul:
var camera = noua cameră tripartită (45, lățime / înălțime, 0,1, 10000);
"Pentru a face ceva, mai intai trebuie sa adaugam camera la scena, astfel ca redactorul sa stie din ce punct de vedere ar trebui sa faca lucruri".
Crearea camerei este ceva mai complicată decât restul lucrurilor pe care le-am făcut până acum. Primul argument definește FOV (câmpul de vedere), unghiul care poate fi văzut de unde este camera. Un FOV de 45 de grade pare natural. Apoi, definim raportul camerei. Aceasta este întotdeauna lățimea rendererului împărțită la înălțimea sa, dacă nu doriți să obțineți anumite efecte speciale. Ultimele două numere definesc cât de aproape și cât de departe poate fi obiectul aparatului de fotografiat.
Acum trebuie să mișcăm camera înapoi și puțin, deoarece toate obiectele create în Trei.js au poziția lor setată în mijlocul scenei (x: 0, y: 0, z: 0) în mod implicit:
camera.position.y = 160; camera.position.z = 400;
z coordonata este pozitivă în direcția privitorului, deci obiectele cu un nivel superior z poziția va apărea mai aproape de dvs. (în acest caz, deoarece am mutat camera, toate obiectele vor apărea mai departe de dvs.).
Acum, permiteți adăugarea camerei la scenă și renderarea acesteia:
scene.add (aparat foto); renderer.render (scenă, cameră);
Adăugați camera așa cum ați adăugat cubul. Următoarea linie face scena folosind această cameră. Acum puteți deschide browserul și ar trebui să vedeți următoarele:
Ar trebui să puteți vedea numai partea de sus a cubului. Acest lucru se datorează faptului că am mutat camera și este în continuare in cautarea direct în fața lui. Acest lucru poate fi stabilit prin permițând camerei să afle în ce poziție ar trebui să o facă uite. Adăugați această linie după liniile care stabilesc poziția camerei:
camera.lookAt (cube.position);
Singurul argument înaintat este o poziție pe care camera va arăta. Scena pare mai bine, dar cubul este încă negru, indiferent de culoarea pe care ați setat-o când creați-o:
Cubul este negru, deoarece nu există lumini pe scenă, deci este ca o cameră complet neagră. Vedeți un fundal alb pentru că nu există nimic de desenat în afara cubului. Pentru a evita acest lucru, vom folosi o tehnică numită skybox. Practic, vom adăuga un cub mare care va afișa fundalul scenei (de obicei, un teren în afara spațiului în cazul în care este spațiu liber). Deci, vă permite să creați caseta. Acest cod ar trebui să meargă înainte de renderer.render apel:
var skyboxGeometrie = nouă Tabel 3D (10000, 10000, 10000); var skyboxMaterial = nou THREE.MeshBasicMaterial (culoare: 0x000000, partea: THREE.BackSide); var skybox = nou TRE.Mesh (skyboxGeometrie, skyboxMaterial); scene.add (Skybox);
Acest cod este similar cu cel care creează cubul. Dar de data aceasta geometria este mult mai mare. De asemenea, am folosit THREE.MeshBasicMaterial deoarece nu este nevoie să aprindem cerul. De asemenea, observați argumentul suplimentar transmis materialului: parte: THREE.BackSide. Din moment ce cubul va fi afișat din interior, trebuie să schimbăm partea care este trasă (în mod normal, Three.js desenează numai pereții exteriori).
Scena redată este complet neagră. Pentru a repara că trebuie să adăugăm lumină la scenă. Noi vom folosi THREE.PointLight, care emite lumina ca un bec. Adăugați aceste linii după cerc:
var pointLight = nou THREE.PointLight (0xffffff); punctul luminos (0, 300, 200); scene.add (pointLight);
După cum puteți vedea, am creat lumina punctului cu culoarea albă, apoi ne-am stabilit poziția să fie în sus și înapoi puțin, pentru a lumina partea din față și partea superioară a cubului. În cele din urmă, lumina este adăugată la scenă ca orice alt obiect. Deschideți browserul și ar trebui să vedeți un cub colorat și umbros:
Dar cubul este încă destul de plictisitor. Să adăugăm o mișcare.
Acum vom adăuga o mișcare la scenă. Faceți ca cubul să se rotească în jurul axei Y. Dar, în primul rând, trebuie să schimbăm modul în care facem scena. unu renderer.render apel, face o dată starea curentă a scenei. Deci, chiar dacă animăm cubul într-un fel, nu vom vedea că se mișcă. Pentru a schimba acest lucru, trebuie să adăugăm bucla de randare aplicației noastre. Acest lucru se poate realiza folosind renderAnimationFrame care a fost creată special în acest scop. Este susținută în majoritatea browserelor majore, iar pentru cei care nu o suportă, Three.js vine cu un polyfill propriu. Deci, permiteți modificarea acestei:
renderer.render (scenă, cameră);
la acest:
funcția rendere () renderer.render (scena, camera); requestAnimationFrame (da); render ();
De fapt, nu există nicio buclă acolo, pentru că ar îngheța browserul. requestAnimationFrame funcția se comportă un pic asemănător setTimeout, dar sună funcția trecută la fel de rapidă cât browserul este gata. Deci, nimic nu sa schimbat cu adevărat în scena afișată și cubul încă nu se mișcă. Să rezolvăm asta. Cu trei.js vine THREE.Clock care pot fi folosite pentru a realiza o animație lină a obiectelor. Mai întâi, inițializați-l înainte de face Definiția funcției:
var ceas = nou THREE.Clock;
Acum, de fiecare dată când suni clock.getDelta va reveni timpul de la ultimul apel, în milisecunde. Acest lucru poate fi folosit pentru a roti cubul astfel:
cube.rotation.y - = ceas.getDelta ();
Adăugați această linie între renderer.render si requestAnimationFrame apeluri în face funcţie. Este pur și simplu scăderea timpului trecut de rotația cubului pe axa Y (amintiți-vă că este în radiani) pentru a roti cubul în sensul acelor de ceasornic. Acum, deschideți browserul și ar trebui să vedeți cubul rotit în sensul acelor de ceasornic fără probleme.
În această parte a seriei ați învățat cum să pregătiți scena, să adăugați obiecte și lumini și cum să animați lucrurile. Puteți experimenta cu aplicația, puteți adăuga mai multe obiecte sau alte obiecte, lumini. Depinde de tine. Data viitoare vă voi arăta cum să folosiți texturi și cum să creați niște efecte frumoase cu particule. Nu uitați să consultați documentația dacă aveți probleme.
Accentsconagua