Share
3D-grafikk i nettleseren har vært et hett emne helt siden det først ble introdusert. Men hvis du skulle lage apps ved hjelp av vanlig WebGL, ville det ta aldre. Dette er nettopp derfor noen virkelig nyttige biblioteker har nylig kommet fram. Three.js er en av de mest populære, og i denne serien vil jeg vise deg hvordan du skal bruke den for å skape fantastiske 3D-opplevelser for brukerne dine.
Før vi begynner, forventer jeg 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..
Først opprett tre filer: index.html, main.js og style.css. Last ned Three.js (hele zip-filen med eksempler og kilde, eller JavaScript-filen alene, ditt valg). Nå åpen index.html og sett inn denne koden:
Det er alt du trenger i denne filen. Bare en erklæring om skript og stilark. All den magiske vil skje i main.js, men før vi kommer til det trenger vi enda et triks for å få appen til å se bra ut. Åpen style.css og sett inn denne koden:
lerret posisjon: fast; topp: 0; venstre: 0;
Dette vil plassere lerretet i venstre hjørne, fordi standard som standard kropp vil ha 8px av margin. Nå kan vi fortsette med JavaScript-koden.
Three.js bruker begrepet en visningsliste. Det betyr at alle objekter blir lagret i listen og deretter trukket til skjermen.
Three.js bruker begrepet en visningsliste. Dette betyr at alle objekter blir lagret i listen og deretter trukket til skjermen. Her er dette en THREE.Scene gjenstand. Du må legge til et objekt du vil bli tegnet på skjermen til scenen. Du kan ha så mange scener som du vil, men en renderer kan kun tegne en scene samtidig (selvfølgelig kan du bytte scene som vises).
Gjenstanderen trekker ganske enkelt alt fra scenen til WebGL-lerretet. Three.js støtter også tegning på SVG eller 2D Canvas, men vi vil fokusere på WebGL.
For å komme i gang, kan vi lagre vinduets bredde og høyde i variabler, vi bruker det senere:
var width = window.innerWidth; var height = window.innerHeight;
Definer nå gjengivelsen og scenen:
var renderer = nytt THREE.WebGLRenderer (antialias: true); renderer.setSize (bredde, høyde); document.body.appendChild (renderer.domElement); var scene = nytt THREE.Scene;
Den første linjen definerer WebGL-gjengivelsen. Du kan overføre gjengivelsesalternativene i det første argumentet som et kart. Her satte vi antialias til ekte, fordi vi vil at kantene på objektene skal være glatte, ikke tippede.
Den andre linjen setter gjengivelsesstørrelsen til størrelsen på vinduet, og i den tredje legger vi til rendererens lerret element til dokumentet (du kan også gjøre dette ved hjelp av et bibliotek, som jQuery: $ ( 'Body'). Append (renderer.domElement)).
Den siste definerer scenen, ingen argumenter som trengs.
Nå kan vi legge til noe som skal tegnes. La det være en terning, siden det er det enkleste 3D-objektet. I Three.js blir gjenstandene som blir tegnet på skjermen kalt masker. Hvert nett må ha sin egen geometri og materiale. Geometri er et sett med poeng som må kobles for å skape objektet. Materiell er bare malingen (eller maleriet, men det er ikke emnet for denne opplæringen) som vil dekke objektet. Så, la oss lage kuben vår. Heldigvis for oss er det noen hjelpefunksjoner i Three.js for å lage primitiver (enkle former):
var cubeGeometry = nytt THREE.CubeGeometry (100, 100, 100); var cubeMaterial = nytt THREE.MeshLambertMaterial (color: 0x1ec876); var kube = nytt THREE.Mesh (cubeGeometry, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (terning);
Som du kan se, lager vi først geometrien. Argumentene definerer en størrelse av kuben: bredden, høyden og dybden.
Deretter definerer vi kubens materiale. Det finnes noen materialtyper i Three.js, men denne gangen bruker vi THREE.MeshLambertMaterial, siden vi vil ha litt belysning senere (dette materialet bruker Lamberts algoritme til lysberegninger). Du kan passere alternativene i det første argumentet som et kart, det samme som med rendereren - dette er ganske mye en regel for mer komplekse objekter i Three.js. Her bruker vi bare farge, som er bestått som et heksadesimalt tall.
På den tredje linjen lager vi et nett med geometrien og materialet som er opprettet tidligere. Deretter roterer vi kuben med 45 grader på Y-aksen, slik at den ser bedre ut. Vi må endre grader til radianer, som håndteres av ligningen du sannsynligvis husker fra din videregående skole fysikk klasse: Math.PI * 45/180. Til slutt blir kuben lagt til scenen.
Nå kan du åpne index.html i nettleseren din for å se resultatene, men du vil ikke se noe fordi scenen ikke gjengis ennå.
For å gjøre noe, må vi først legge kameraet til scenen, så gjengivaren vet fra hvilket synspunkt det skal gjøre ting. Det finnes noen få typer kameraer i Three.js, men du vil nok bare bruke THREE.PerspectiveCamera. Denne typen kamera presenterer scenen som vi ser vår verden. Lar skape en:
var kamera = nytt THREE.PerspectiveCamera (45, bredde / høyde, 0,1, 10000);
"For å gjøre noe, må vi først legge kameraet til scenen, så gjengivaren vet fra hvilket synspunkt det skal gjøre ting."
Å lage kameraet er litt mer komplisert enn resten av tingene vi har gjort hittil. Det første argumentet definerer FOV (synsfelt), vinkelen som kan ses fra hvor kameraet er. En FOV på 45 grader ser naturlig ut. Deretter definerer vi kameraets forhold. Dette er alltid bredden på rendereren delt med sin høyde, med mindre du vil oppnå noen spesielle effekter. De to siste tallene definerer hvor nær og hvor langt objektet kan være til kameraet som skal tegnes.
Nå må vi flytte kameraet tilbake og opp litt, ettersom alle objektene som er opprettet i Three.js, har sin posisjon i midten av scenen (x: 0, y: 0, z: 0) som standard:
camera.position.y = 160; camera.position.z = 400;
De z koordinat er positiv i retning av betrakteren, så objekter med høyere z posisjonen vil vises nærmere deg (i dette tilfellet, siden vi flyttet kameraet, vises alle objekter lenger unna deg).
Nå kan vi legge kameraet til scenen og gjengi det:
scene.add (kamera); renderer.render (scene, kamera);
Du legger til kameraet akkurat som du la til kuben. Neste linje gjør scenen ved hjelp av dette kameraet. Nå kan du åpne nettleseren og du bør se følgende:
Du bør bare kunne se toppen av terningen. Dette er fordi vi flyttet kameraet opp og det er fortsatt ser rett foran den. Dette kan løses ved å la kameraet vite hvilken posisjon den skal se. Legg til denne linjen etter at linjene har innstilt kameraets posisjon:
camera.lookAt (cube.position);
Det eneste argumentet som går inn i er en posisjon som kameraet vil se ut. Nå ser scenen bedre ut, men kuben er fortsatt svart, uansett hvilken farge du har satt når du lager den:
Kuben er svart, fordi det ikke er lys på scenen, så det er som et helt svart rom. Du ser en hvit bakgrunn fordi det ikke er noe å trekke fra kuben. For å unngå det, bruker vi en teknikk som kalles skybox. I utgangspunktet vil vi legge til en stor terning som vil vise bakgrunnen til scenen (vanligvis litt langt terreng hvis det er åpent rom). Så la oss lage boksen. Denne koden skal gå før renderer.render anrop:
var skyboxGeometry = nytt THREE.CubeGeometry (10000, 10000, 10000); var skyboxMaterial = nytt THREE.MeshBasicMaterial (color: 0x000000, side: THREE.BackSide); var skybox = nytt THREE.Mesh (skyboxGeometry, skyboxMaterial); scene.add (skybox);
Denne koden ligner den som lager kuben. Men denne gangen er geometrien mye større. Vi har også brukt THREE.MeshBasicMaterial siden vi ikke trenger å lyse skyboxen. Legg også merke til det ekstra argumentet som sendes til materialet: side: THREE.BackSide. Siden kuben skal vises fra innsiden, må vi endre siden som blir trukket (normalt trekker Tre.js bare yttervegger).
Nå er den gjengitte scenen helt svart. For å fikse det må vi legge til lys på scenen. Vi vil bruke THREE.PointLight, som avgir lyset som en pære. Legg til disse linjene etter skyboxen:
var pointLight = nytt THREE.PointLight (0xffffff); pointLight.position.set (0, 300, 200); scene.add (pointLight);
Som du ser, har vi opprettet punktlampen med hvit farge, så setter vi posisjonen til å være opp og tilbake litt for å lyse fronten og toppen av terningen. Til slutt blir lyset lagt til scenen som noe annet objekt. Åpne nettleseren, og du bør se en farget, skyggelagt terning:
Men terningen er fortsatt ganske kjedelig. La oss legge til litt bevegelse til det.
Nå vil vi legge til litt bevegelse til scenen. La oss gjøre kuben rotere rundt Y-aksen. Men først må vi endre måten vi gjør på scenen. En renderer.render ring, gjengir den nåværende tilstanden til scenen en gang. Så selv om vi animerer kuben på en eller annen måte, vil vi ikke se det flytte. For å endre det må vi legge til gjengeløkken til vår app. Dette kan oppnås ved å bruke renderAnimationFrame funksjon, som ble opprettet spesielt for det formålet. Den støttes i de fleste av de store nettleserne, og for de som ikke støtter den, kommer Three.js med sin egen polypfyll. Så, la oss endre dette:
renderer.render (scene, kamera);
til dette:
funksjon gjengivelse () renderer.render (scene, kamera); requestAnimationFrame (render); gjengivelse ();
Faktisk er det ingen sløyfe der inne, fordi det ville fryse nettleseren. De requestAnimationFrame funksjon oppfører seg litt som setTimeout, men det kaller funksjonen gått så fort som nettleseren er klar. Så, ingenting forandret seg i den viste scenen, og kuben beveger seg fortsatt ikke. Vi kan fikse det. Three.js kommer med THREE.Clock som kan brukes til å oppnå jevn animasjon av objekter. Først skal du initialisere den før gjengi Funksjonsdefinisjon:
var klokke = nytt THREE.Clock;
Nå, hver gang du ringer clock.getDelta Det kommer tilbake tiden siden siste samtalen, i millisekunder. Dette kan brukes til å rotere terningen slik:
cube.rotation.y - = clock.getDelta ();
Legg denne linjen mellom renderer.render og requestAnimationFrame samtaler i gjengi funksjon. Det er ganske enkelt å trekke tiden som går fra kubens rotasjon på Y-aksen (husk at den er i radianer) for å rotere terningen med klokken. Nå åpner nettleseren, og du bør se at kuben roterer med klokken jevnt.
I denne delen av serien lærte du å forberede scenen, legge til objekter og lys, og hvordan å animere ting. Du kan eksperimentere med appen, legge til flere eller forskjellige objekter, lys. Det er opp til deg. Neste gang vil jeg vise deg hvordan du bruker teksturer og hvordan du lager noen fine effekter med partikler. Ikke glem å se på dokumentasjonen hvis du har problemer.
Accentsconagua