Share
Siden introduksjonen har 3D-grafikk i nettleseren vært et populært emne. Men hvis du skulle lage appene dine ved å bruke vanlig gammel WebGL, ville det ta svært lang tid. Men nå har vi noen ganske nyttige biblioteker som vi kan dra nytte av, som Three.js. Så i denne serien vil jeg vise deg hvordan du lager fantastiske 3D-opplevelser for nettleseren.
Jeg forventer at du skal ha en grunnleggende forståelse av 3D-plass før du begynner å lese denne opplæringen, da jeg ikke vil forklare ting som koordinater, vektorer osv..
Vi starter med koden fra forrige del av denne serien. Også, ta tak i aktivaene jeg oppgav, og legg dem i samme mappe som appen din. Nå, siden vi skal bruke bilder her, må du sette appen din på en statisk server (kan være lokal), fordi med mindre du starter nettleseren med aktivert filtilgang fra filer (for eksempel ved hjelp av --allow-fil-access-fra-filer flagg i Chrome) CORS vil ikke la deg laste dem fra filen. Det er alt du trenger å gjøre før du fortsetter.
Hvis du noen gang har fått deg så kjedelig at du gikk med å skape noe ved hjelp av ren OpenGL, husker du sannsynligvis hvor mye smerte det er å laste en tekstur. Heldigvis, Three.js kommer med en fin funksjon som vil laste og sette opp tekstur for oss. Legg til denne linjen før definisjonen av kubens materiale:
Accentsconagua
var cubeTexture = THREE.ImageUtils.loadTexture ('./box.png'); Det er egentlig alt du trenger å gjøre for å få tekstur lastet.
I en app i sannverdi må du forplaste teksten som et vanlig bilde, og vise brukerne noen fancy lastebar for å la dem få vite at du laster inn (Three.js vil bruke det cached bildet da).
Nå skal vi bruke tekstur til kuben vår. Dette er også enkelt, du trenger bare å erstatte fargedefinisjonen i kubens materiale for å se slik ut:
var cubeMaterial = nytt THREE.MeshLambertMaterial (map: cubeTexture);
De kart Attributt setter tekstur. Nå kan du åpne nettleseren, og du bør se en roterende, strukturert terning:
Du kan også fargelegge tekstur, bare legge til farge definisjon i materialets alternativer, slik:
var cubeMaterial = nytt THREE.MeshLambertMaterial (map: cubeTexture, farge: 0x28c0ec);
Og nå blir kuben blå:
På denne måten kan du ha flere forskjellige objekter med samme tekstur hvis bare fargen endres.
Du kan angi forskjellige materialer for hvert ansikt på kuben. For å oppnå det må du endre hele materialets definisjon. Definer først materialer array. Hvert element i gruppen vil svare til materialet i ett ansikt. De går i denne rekkefølgen: høyre, venstre, topp, bunn, foran og bak:
var materialer = []; materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0xff0000)); // right face materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffff00)); // left face materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0xffffff)); // top face materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0x00ffff)); // bottom face materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0x0000ff)); // front face materials.push (nytt THREE.MeshLambertMaterial (map: cubeTexture, color: 0xff00ff)); // tilbake ansiktet
Som du kan se, har hvert ansikt sitt eget materiale, slik at du kan sette forskjellige teksturer, farger og andre attributter for hver enkelt. Deretter endrer du typen av kubens materiale til THREE.MeshFaceMaterial:
var cubeMaterial = nytt THREE.MeshFaceMaterial (materialer);
Du trenger bare å passere materialer array som parameter. I nettleseren bør du se at hver side av kuben har forskjellig farge:
La oss si at du vil skape en effekt av å snurre snøflak i appen din. Hvis du skulle gjengis hver snøfnugg som et nett, vil du få svært lave fps. Det er der partikler kommer inn i spill. De er langt mindre kompliserte, og å tegne dem som et helt partikkelsystem gjør dem veldig effektive.
Begynn med å skape en geometri for partiklene våre:
var partikler = nye THREE.Geometry;
THREE.Geometry er en basis geometri objekt, uten noen form. Nå må vi definere posisjonen til hver partikkel i systemet. La det være helt tilfeldig:
for (var p = 0; s < 2000; p++) var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250); particles.vertices.push(particle);
Denne sløyfen vil skape 2000 tilfeldig plasserte partikler og sette dem alle i geometrien. Deretter må du definere partikkelmateriale:
var particleMaterial = nytt THREE.ParticleBasicMaterial (color: 0xeeeeee, size: 2);
Legg merke til at vi bruker THREE.ParticleBasicMaterial, som bare er for partikler. I tillegg definerer vi bare fargen og størrelsen på hver partikkel. Til slutt kan du lage partikkelsystemet og legge det til scenen:
var particleSystem = nytt THREE.ParticleSystem (partikler, partikkelmateriale); scene.add (particleSystem);
Nå, for å få scenen til å se bedre, la vi rotere partiklene i retning motsatt den som kuben roterer inn (endre gjengi funksjon for å se slik ut):
funksjon gjengivelse () requestAnimationFrame (render); var delta = klokke.getDelta (); cube.rotation.y - = delta; particleSystem.rotation.y + = delta; renderer.render (scene, kamera);
Vi flyttet clock.getDelta til variabelen, fordi hvis du vil bruke det slik:
cube.rotation.y - = clock.getDelta (); particleSystem.rotation.y + = clock.getDelta ();
Partikkelsystemet ville ikke rotere, fordi det andre anropet vil returnere et tall nær null (husk at det kommer tid fra det siste anropet).
Nå åpner du nettleseren, og du bør se en kube og partikler som roterer:
La oss kombinere begge tingene du har lært i denne opplæringen, og slå de stygge hvite torgene til ekte snøflak. Først legger du snøflaktekstur:
var particleTexture = THREE.ImageUtils.loadTexture ('./ snowflake.png'); Nå, bytt partikkens materiale for å bruke tekstur. Aktiver også gjennomsiktighet og gjør partiklene større slik at vi kan se formen:
var particleMaterial = nytt THREE.ParticleBasicMaterial (map: particleTexture, transparent: true, size: 5);
Hvis du åpner nettleseren, bør du se noen fine snøflak som flyter rundt kuben:
Røk effekt er ganske enkelt å oppnå, og det ser fint ut. Begynn med å lage geometrien, akkurat som med snøfnuggene:
var smokeParticles = new THREE.Geometry; for (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);
Den eneste forskjellen er at vi velger posisjonen fra et rektangulært prisme med dimensjoner 32x32x230. La oss nå laste tekstur og definere materialet:
var smokeTexture = THREE.ImageUtils.loadTexture ('./ smoke.png'); var smokeMaterial = new THREE.ParticleBasicMaterial (map: smokeTexture, transparent: true, blending: THREE.AdditiveBlending, size: 50, color: 0x111111); I materiell definisjon er det a blending alternativ. Det forteller gjengivaren hvordan den skal gjengi ett objekt på en annen. Med THREE.AdditiveBlending Overlappende fargeverdier vil bli tilsatt til hverandre, noe som vil resultere i en lysere røyk i områdene med høyere partikkeldensitet. Vi setter også fargen til nesten svart, slik at røyken ser mer naturlig ut.
Endelig lager partikkelsystemet, flytt det litt til venstre og legg det til scenen:
var røyk = nytt THREE.ParticleSystem (smokeParticles, smokeMaterial); smoke.sortParticles = true; smoke.position.x = -150; scene.add (smoke);
Du må også sette smoke.sortParticles til sant. Når det er feil, kan bakgrunnen til sprite bli tegnet som svart. Hvis du åpner nettleseren, bør du se en stille søyle ved siden av terningen:
For å animere røyken må vi løpe gjennom alle partiklene og flytte dem opp litt. Legg til denne koden til gjengi funksjon:
var particleCount = smokeParticles.vertices.length; mens (particleCount--) var partikkel = smokeParticles.vertices [particleCount]; partikkel.y + = delta * 50; hvis (particle.y> = 230) particle.y = Math.random () * 16; particle.x = Math.random () * 32 - 16; particle.z = Math.random () * 32 - 16; smokeParticles .__ dirtyVertices = true;
I løkken legger vi til delta * 50 til y-posisjonen til partikkelen. Deretter sjekker vi om partikkelen er høyere enn 230, hvis så velger vi tilfeldigvis sin nye posisjon et sted i bunnen av røykstøtten. Til slutt, det viktigste: å sette geometrien __dirtyVertices flagg til sant.
For å forbedre ytelsen treffer Three.js objekter for å unngå å bygge alle WebGL-samtalene igjen hver ramme, så hvis vi endrer noe i objektets geometri, må vi gi gjengivaren beskjed om at den har endret seg. I utgangspunktet er det
__dirtyVerticesflagget vil bare nå elementet.
Hvis du åpner nettleseren, bør du se en smidig animert røyk ved siden av terningen.
I denne opplæringen har du lært hvordan du bruker teksturer og partikler. Som før, vær ikke redd for å eksperimentere litt med appen din. Hvis du har problemer, ta en titt på dokumentasjonen. I neste artikkel vil jeg lære deg hvordan du laster inn modeller og animerer dem.
