Share
De la introducerea sa, grafica 3D în browser a fost un subiect popular. Dar dacă v-ați crea aplicațiile utilizând WebGL simplu, ar dura foarte mult. Dar acum avem câteva biblioteci destul de utile pe care le putem profita, cum ar fi Three.js. Astfel, în această serie vă voi arăta cum să creați experiențe 3D uimitoare pentru browser.
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..
Vom începe cu codul din partea anterioară a acestei serii. De asemenea, apucați activele pe care le-am furnizat și le-ați pus în același folder ca și aplicația dvs. Acum, deoarece vom folosi imaginile aici, va trebui să puneți aplicația pe un server static (poate fi local), pentru că dacă nu porniți browserul cu acces fișier activat din fișiere (de exemplu, utilizând --permite-file-acces la fișiere- în Chrome) CORS nu vă va permite să le încărcați din fișier. Asta e tot ce trebuie să faceți înainte de a continua.
Dacă v-ați plictisit vreodată că ați făcut ceva folosind OpenGL pur, probabil că vă amintiți cât durere este să încărcați o textură. Din fericire, Three.js vine cu o functie placuta care va incarca si aranja textura pentru noi. Adăugați această linie înainte de definirea materialului cubului nostru:
Accentsconagua
var cubeTexture = THREE.ImageUtils.loadTexture ('./ box.png'); Este într-adevăr tot ce trebuie să faceți pentru a vă încărca textura.
Într-o aplicație din lumea reală, va trebui să preîncărcați textura ca orice imagine obișnuită și să arătați utilizatorilor o anumită bara de încărcare fantezie pentru a le spune că încărcați (Three.js va folosi imaginea cache).
Acum vom aplica textura în cubul nostru. Acest lucru este, de asemenea, ușor, trebuie doar să înlocuiți definiția culorii în materialul cubului pentru a arăta astfel:
var cubeMaterial = nou THREE.MeshLambertMaterial (map: cubeTexture);
Hartă atributul stabilește textura. Acum puteți deschide browserul și ar trebui să vedeți un cub rotativ, texturat:
Puteți, de asemenea, colorați textura, adăugați doar culoare definiție în opțiunile materialului, cum ar fi:
var cubeMaterial = nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0x28c0ec);
Și acum cubul devine albastru:
În acest fel puteți avea mai multe obiecte diferite cu aceeași textură, dacă se modifică numai culoarea.
Puteți seta diferite materiale pentru fiecare față a cubului. Pentru a realiza acest lucru, trebuie să modificați definiția întregului material. Mai întâi, definiți materiale matrice. Fiecare element din matrice va corespunde materialului unei fețe. Ei merg în această ordine: dreapta, stânga, sus, jos, față și spate:
var materiale = []; materials.push (nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0xff0000)); // materiale față dreapta.push (nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0xffff00)); // materiale de stânga față.push (nou THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffffff)); // top face materials.push (nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0x00ffff)); // bottom face materials.push (nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0x0000ff)); // front materials materials.push (nou THREE.MeshLambertMaterial (map: cubeTexture, culoare: 0xff00ff)); // fața înapoi
După cum puteți vedea fiecare față are propriul material, astfel încât să puteți seta diferite texturi, culori și alte atribute pentru fiecare. Apoi, schimbați tipul materialului cubului THREE.MeshFaceMaterial:
var cubeMaterial = nou material THREE.MeshFace (materiale);
Trebuie doar să treci materiale array ca parametru. În browser trebuie să observați că fiecare parte a cubului are o culoare diferită:
Să presupunem că doriți să creați un efect de rotire a fulgilor de zăpadă în aplicația dvs. Dacă ați face fiecare fulg de zăpadă ca pe o plasă, veți obține foarte puțin fps. Aici particulele intră în joc. Ele sunt mult mai puțin complicate, iar desenarea lor ca un sistem de particule întregi le face cu adevărat eficiente.
Începeți cu crearea unei geometrii pentru particulele noastre:
particulele de var = noua GESTometrie;
THREE.Geometry este un obiect de geometrie de bază, fără nici o formă. Acum trebuie să definim poziția fiecărei particule în sistem. Să fie complet aleatoriu:
pentru (var p = 0; p < 2000; p++) var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250); particles.vertices.push(particle);
Această bucla va crea 2000 de particule plasate aleatoriu și le va pune în geometrie. Apoi, trebuie să definiți materialul particulelor:
var particleMaterial = nou material tripartit de bază (culoare: 0xeeeeee, dimensiune: 2);
Observați că folosim THREE.ParticleBasicMaterial, care este doar pentru particule. În opțiuni, definim numai culoarea și dimensiunea fiecărei particule. În cele din urmă, puteți crea sistemul de particule și îl puteți adăuga la scenă:
var particleSystem = nou sistem de particule TREI (particule, particuleMaterial); scene.add (particleSystem);
Acum, pentru a face scena să arate mai bine să rotim particulele în direcția opusă celei pe care cubul se rotește în (schimbați face funcția de a arăta astfel):
funcția rendere () requestAnimationFrame (render); var delta = ceas.getDelta (); cube.rotation.y - = delta; particleSystem.rotation.y + = delta; renderer.render (scenă, cameră);
Am mutat clock.getDelta la variabila, pentru că dacă o folosești așa:
cube.rotation.y - = ceas.getDelta (); particleSystem.rotation.y + = ceas.getDelta ();
Sistemul de particule nu s-ar roti, deoarece al doilea apel va întoarce un număr apropiat de zero (amintiți-vă că primește timpul de la ultimul apel).
Acum, deschideți browserul și ar trebui să vedeți un cub și particule care se rotesc:
Să combinăm ambele lucruri pe care le-ai învățat în acest tutorial și să transformi acele pătrate albe urât în fulgi de zăpadă reali. În primul rând, încărcați textura fulg de zăpadă:
var particleTexture = THREE.ImageUtils.loadTexture ('./ snowflake.png'); Acum, schimbați materialul particulelor pentru a utiliza textura. De asemenea, permiteți transparența și faceți particulele mai mari, astfel încât să vedem forma:
var particleMaterial = nou THREE.ParticleBasicMaterial (map: particleTexture, transparent: true, size: 5);
Dacă deschideți browserul, ar trebui să vedeți niște fulgi de zăpadă care curg în jurul cubului:
Efectul de fum este destul de ușor de realizat și arată frumos. Începeți prin crearea geometriei, la fel ca și fulgii de zăpadă:
var smokeParticles = nou THREE.Geometrie; pentru (var i = 0; i < 300; i++) var particle = new THREE.Vector3(Math.random() * 32 - 16, Math.random() * 230, Math.random() * 32 - 16); smokeParticles.vertices.push(particle);
Singura diferență este că alegem poziția dintr-o prismă dreptunghiulară cu dimensiunile 32x32x230. Acum, să încărcăm textura și să definim materialul:
var smokeTexture = THREE.ImageUtils.loadTexture ('./ smoke.png'); var smokeMaterial = nou THREE.ParticleBasicMaterial (map: smokeTexture, transparent: true, blending: THREE.AdditiveBlending, dimensiune: 50, culoare: 0x111111); În definiția materială, există a amestecare opțiune. Aceasta îi spune redaretorului cum ar trebui să facă un obiect pe altul. Cu THREE.AdditiveBlending se adaugă valori de culoare suprapuse, ceea ce va duce la un fum mai strălucitor în zonele cu o densitate mai mare a particulelor. De asemenea, setăm culoarea aproape neagră, astfel încât fumul pare mai natural.
În cele din urmă, creați sistemul de particule, mutați-l puțin în stânga și adăugați-l la scenă:
varf de fum = nou sistem de particule THREE.Particle (smokeParticles, smokeMaterial); smoke.sortParticles = adevărat; smoke.position.x = -150; scene.add (fum);
De asemenea, trebuie să setați smoke.sortParticles la adevărat. Când este fals, fundalul sprite poate fi desenat ca negru. Dacă deschideți browserul ar trebui să vedeți un stâlp de fum în apropierea cubului:
Pentru a anima fumul, trebuie să-l buclem prin toate particulele și să le mișcăm puțin. Adăugați acest cod la face funcţie:
var particleCount = smokeParticles.versions.length; în timp ce (particleCount--) var particle = smokeParticles.vertices [particleCount]; particle.y + = delta * 50; dacă (particle.y> = 230) particle.y = Math.random () * 16; particle.x = Math.random () * 32 - 16; particle.z = Math.random () * 32 - 16; smokeParticles .__ dirtyVertices = true;
În bucla pe care o adăugăm delta * 50 la poziția y a particulei. Apoi verificăm dacă particula este mai mare de 230, dacă alegem aleator o nouă poziție undeva în partea inferioară a stâlpului de fum. În cele din urmă, cel mai important lucru: setarea geometriei __dirtyVertices flag to true.
Pentru a îmbunătăți performanța, Three.js cachează obiectele pentru a evita construirea tuturor apelurilor WebGL din nou în fiecare cadru, așa că dacă schimbăm ceva în geometria obiectului, trebuie să-l lăsăm pe redarer să știe că sa schimbat. În principiu,
__dirtyVerticessteagul va ajunge la element.
Dacă deschideți browser-ul acum, ar trebui să vedeți un fum animat lin, lângă cub.
În acest tutorial ați învățat cum să utilizați texturi și particule. Ca și înainte, nu vă fie frică să experimentați un pic cu aplicația dvs. Dacă aveți probleme, aruncați o privire la documentație. În următorul articol vă voi învăța cum să încărcați modele și să le animați.
