Share
Webens kompleksitet skifter daglig og dets muligheter vokser like raskt; spesielt med 3D-rendering. WebGL (Web Graphics Library) er en JavaScript API for å gjengi interaktiv 3D og 2D grafikk. Three.js av Ricardo Cabello er et bibliotek bygget på toppen av WebGL, noe som sikrer at forfatterkode er kompatibel over ulike nettlesere.
Three.js er for WebGL hva jQuery er for JavaScript, og tilbyr declarative syntax elsket av så mange, og abstraherer hodepine for 3D i nettleseren. La oss se gjennom det, få en generell oversikt over syntaks og se hvordan du kommer i gang hvis du er ny i spillet 3D.
Ta en titt på følgende demonstrasjon på CodePen; bruk musepekeren til å dra modellen rundt, zoome inn og ut med mushjulet.
Vi skal jobbe i CodePen for enkelhets skyld. begynn med å koble til Three.js (CDN 126Kb) fra JS-fanen din.
Vi begynner med å lage en scene, akkurat som du starter med et lerret i Photoshop. En scene er definert med en variabel før noen ytterligere kode er skrevet. Så, legg til i JS-panelet ditt:
var scene = nytt THREE.Scene ();
Med gardinene oppe og klare for vår ytelse, trenger vi en måte å se vår awesomeness-tid for å introdusere et kamera. Det finnes en rekke kameraer som Three.js kommer med, for eksempel PerspectiveCamera, StereoCamera, OrthographicCamera og CubeCamera. For våre formål bruker vi PerspectiveCamera som den er designet for å etterligne måten det menneskelige øye ser. Akkurat som vi definerer en scene med en variabel, gjør vi det samme for å definere et kamera:
var kamera = nytt THREE.PerspectiveCamera ();
Vår PerspectiveCamera godtar fire argumenter: FOV, aspektet, nær og langt.
Accentsconagua
FOV (synsfelt) er hvor mye du kan se rundt kameraets senter. Tenk på en vidvinkelobjektiv på et kamera i forhold til en standard linse. aspektet er forholdet mellom FOV, eller med andre ord bredden til høyden på en skjerm (for eksempel 4: 5, 16: 9). nær og langt, er planetene av et solidt. Sammen kontrollerer de om et objekt blir gjengitt basert på avstanden fra kameraet. nær er det nærmeste et objekt eller en del av et objekt kan være til kameraet mens det fremdeles blir gjort, langt er det lengste som en gjenstand kan være fra kameraet og fortsatt bli gjengitt. Sammen definerer disse kameraets visningsfrø.
Ser frustumHer er et eksempel på PerspectiveCamera argumenter:
var kamera = nytt THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0,1, 1000);
Det er ikke viktig å forstå hver verdi på dette punktet, bortsett fra å være klar over verdiene som kan bli bestått. Ved å fortsette må vi sette kameraets posisjon.
camera.position.set (x, y, z);
Denne linjen er objektets lokale posisjon. Dette setter x, y og z koordinatene til vektoren. Uten det vil kameraet ikke se noe.
Den neste viktige ingrediensen i oppskriften vår er å skape en WebGLRenderer. Dette er stykket som er ansvarlig for magien til å vise skapelsen.
var renderer = nytt THREE.WebGLRenderer ();
De WebGLRenderer kan også akseptere egenskaper og verdier som er sendt inn som et objekt.
var renderer = nytt THREE.WebGLRenderer (ala: true // fjern lerret 'bg farge);
Det er ganske mange Eiendomsverdi par som kan brukes - de er oppført i dokumentene, bør du bestemme deg for å dykke dypere på et senere tidspunkt (noe jeg oppfordrer sterkt).
Med gjengivelsen definert kan vi sette metoder for å tilpasse vår opprettelse som for eksempel setSize; en metode du vil bruke i nesten hvert Three.js prosjekt.
// Lag scene renderer størrelsen på skjermen renderer.setSize (window.innerWidth, window.innerHeight);
Det er mange flere metoder du kan bruke, men for vårt formål vil vi holde oss til setSize ().
Nå som vår ønskede størrelse er definert, trenger vi en måte å knytte den til DOM.
document.body.appendChild (renderer.domElement);
Dette domElement eiendom er hvor rendereren trekker sin produksjon og vil være i form av a lerret element. Selv om jeg bruker document.body du kan legge til eller prepend den lerret element hvor du vil. Det er virkelig opp til deg hvor du ønsker plasseringen basert på dine spesifikke prosjektbehov.
For neste trinn må vi lage et objekt - siden alt vi har gjort opp til dette punktet, erklærer en scene, et kamera og en renderer. For demoformål tar vi en mobiltelefon fra 3D Warehouse, slik at vi kan bygge en produktforhåndsvisning for folk som kjøper en iPhone på nettet.
iPhone 6 + av Jeremie PVanligvis kan du bruke programmer som SketchUp eller Blender til å tegne 3D-objekter, men det er en høy læringskurve for 3D tegneapplikasjoner - en kurve som absolutt er utenfor rammen av denne artikkelen..
For å sette inn vårt 3D-objekt til scenen må vi bruke ColladaLoader. Det skal nevnes at en grafikk du bestemmer deg for å bruke, skal generelt være under 1-2Mb og må være en Collada-fil for å kunne brukes med Three.js: disse er filer som slutter med .dae forlengelse. Hvis du åpner en Collada-fil, ser du at den faktisk er skrevet i XML.
Vi starter med å definere ColladaLoader bruker en variabel og kaller metoden sammen med å definere en annen variabel for å representere 3D-grafikken for referanse på et senere tidspunkt.
var dager, // grafisk laster = nytt THREE.ColladaLoader (); // loader
Dette er en god start, men vi har litt mer arbeid å gjøre for at vi skal kunne vise telefonen. La oss lage en funksjon som vil gjøre nettopp det:
funksjon loadCollada (collada) dager = collada.scene; scene.add (dae);
For neste trinn bruker vi laste metode, send URL til vår Collada-fil, og ring deretter vår funksjon etter navn som det andre argumentet:
loader.load ('http://myurl.com/file/iphone6.dae', loadCollada);Hvis du vil vite mer om ColladaLoader Du kan grave gjennom kildekoden på GitHub.
Med vår laster og grafikk endelig på plass er det et siste skritt; vi trenger å lage det som kalles en "render loop". Dette skyldes at vi ikke faktisk gjør noe enda.
Denne "render loop" er det som vil føre til at rendereren trekker scenen seksti ganger per sekund. Følgende funksjon vil gjøre vår etablering levende (den beste delen av hele prosessen).
funksjon renderPhone () requestAnimationFrame (renderPhone); renderer.render (scene, kamera); renderPhone ();
requestAnimationFrame har en rekke fordeler. Det viktigste er at det pause når brukeren navigerer til en annen nettleserfane, og slipper ikke å bruke prosessorkraft og batterilevetid.
Resultatet av alt dette arbeidet er en søt gjengivelse av en 3D iPhone som du kan snurre, rotere og zoome inn og ut av:
Det er noen flere biter som gikk inn i den endelige opprettelsen, så jeg oppfordrer deg til å dykke dypere inn i JavaScript-panelet i demoen.
For eksempel; Belysning (Omgivelseslys, HemisphereLight, PointLight), TrackballControls, AxisHelper og et vindu for omforming av vinduer. Noen av disse nevnte elementer inneholder ikke dokumentasjon som TrackballControls, men du finner alle egenskapene som er tilgjengelige i kjernen JS-filen på GitHub. Det finnes andre veldig kule kontroller du kan bruke, som også er oppført på GitHub.
Noen ganger trenger du litt inspirasjon for å få "ol hjernen til å brenne ideer i et raskt tempo. Følgende er noen av mine favorittdemoer ved hjelp av Three.js som gjør drømmer til virkelighet.
https://paperplanes.world
https://throughthedark.withgoogle.com (ta tak i hodetelefonene dine)
http://carvisualizer.plus360degrees.com/threejsRachel Smith skrev en god artikkel om CodePen om WebGL, og jeg anbefaler på det sterkeste å gi det en lesning når du har fritid. Opplæringen er fylt med enkelt språk og er en grundig forklaring på Three.js som diskuterer scene, geometri, belysning, materialer og animasjon som jeg sikkert ikke kunne dekke i dette korte innlegget..
Du kan også nyte:
Denne artikkelen ville ikke vært mulig uten den sjenerøse hjelpen fra Animation at Work Slack Community, så jeg vil gjerne takke (i ingen bestemt rekkefølge) Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch og Chris Johnson.
