Uvođenje 3D renderiranja promijenilo je interakciju korisnika s internetskim tehnologijama. Za početak, web aplikacije postale su sveobuhvatnije, pružajući zanimljivo i interaktivno iskustvo putem web preglednika.
Ova tehnologija već je željno prihvaćena u područjima igara i proširene/virtualne stvarnosti. Nudi realističan i impresivan način interakcije s virtualnim elementima.
Saznajte kako prikazati 3D objekte u React aplikaciji.
Osnove 3D modeliranja i programiranja
Prije nego počnete s 3D renderiranjem, morate znati nekoliko točaka:
- 3D objekti sadrže pojedinačne točke ili vrhove koji definiraju njihovu strukturu u tri dimenzije. Spajanje ovih točaka stvara lica koja čine oblik objekta na zaslonu.
- Moderni preglednici imaju ugrađenu mogućnost prikazivanja 3D pomoću tehnologija kao što je WebGL. Oni to čine korištenjem snage grafičke procesorske jedinice u vašem računalu za brzo renderiranje 3D modela i scena.
- Svaki 3D objekt koji vaš preglednik prikazuje sastoji se od tri glavne komponente. To su scena, kamera i renderer, a svi igraju ključnu ulogu. Scena pruža osnovnu platformu za postavljanje svih vaših 3D elemenata, uključujući svjetla i kamere. Kamera vam omogućuje gledanje 3D objekta iz različitih kutova. Na kraju, renderer montira i prikazuje scenu na vrhu HTML elementa platna.
3D renderiranje s Three.js i React Three Fiber
Tri.js je JavaScript biblioteka koju možete koristiti za prikaz 3D objekata u web pregledniku. Koristeći njegove ugrađene komponente, možete jednostavno stvarati i renderirati 3D objekte u svom pregledniku uz ostale značajke vaše React aplikacije.
Paket react-three-fiber radi na temelju Three.js. Pojednostavljuje postupak korištenja Three.js komponenti za stvaranje i renderiranje 3D objekata u pregledniku. Zanimljivo, također pruža običaj Reagirajte kuke koji dobro dođu pri izradi 3D objekata u Reactu.
Renderiranje 3D objekata u React aplikaciji
Slijedite korake u nastavku kako biste prikazali jednostavan 3D oblik u svom pregledniku, kao i 3D model koji je izradio Blender. Ako niste upoznati s Blenderom, naučite kako započeti kao početnik.
Napravite React aplikaciju, pokrenite svoj terminal za izvođenje naredbe u nastavku i instalirajte potrebne ovisnosti:
npm instalirajte tri @react-three/fiber @react-three/drei
Instalirajte pakete Three.js, react-three-fiber i react-three-drei. Knjižnica react-three-drei radi uz react-three-fiber za stvaranje 3D scena i objekata.
Renderirajte 3D oblik
Možete prikazati jednostavan 3D oblik kutije u pregledniku s vrlo malo koda. Otvori src/app.js datoteku, izbrišite sav predložak React koda i dodajte sljedeće:
uvoz Reagirati iz"reagirati";
uvoz {Platno} iz"@react-three/fiber";
uvoz {OrbitControls} iz"@react-three/drei";funkcijaKutija() {
povratak (
<mreža>
<boxBufferGeometrypriložiti ="geometrija" />
<meshLambertMaterialpriložiti="materijal"boja="hotpink" />
mreža>
)
}
izvozzadanofunkcijaaplikacija() {
povratak (
<divnaziv klase="Aplikacija">
<divnaziv klase="Zaglavlje aplikacije">
<Platno>
<OrbitControls />
<ambijentalno svjetlointenzitet ={0.5} />
<reflektorpoložaj={[10,15,10]} kut={0.3} />
<Kutija />
Platno>
div>
div>
);
}
Ovaj kôd čini sljedeće:
- The Kutija komponenta koristi mrežu, boxBufferGeometry i meshLambertMaterial komponente iz react-three-fiber za renderiranje 3D kutije. Ove tri komponente rade ruku pod ruku kako bi stvorile oblik kutije.
- Komponenta boxBufferGeometry stvara okvir i ovaj kod postavlja svojstvo boje komponente meshLambertMaterial na žarko ružičastu.
- Zatim renderira element Canvas koji sadrži komponentu okvira s ambijentalnim svjetlom, reflektorom i skupom svojstava komponente Orbit Controls.
- Svojstvo komponente ambijentalnog svjetla dodaje meko svjetlo platnu. Komponenta spotLight dodaje fokusirano svjetlo iz određene pozicije pod kutom od 0,3. Na kraju, komponenta OrbitControls omogućuje vam upravljanje kamerom oko 3D objekta.
Uvezite i renderirajte komponentu app.js u datoteci index.js i pokrenite razvojni poslužitelj da vidite rezultate u svom pregledniku na http://localhost: 3000.
Renderirajte 3D model izrađen u Blenderu
Blender je alat otvorenog koda koji koriste kreativci u različitim poljima za stvaranje 3D modela, vizualnih efekata i interaktivnih 3D aplikacija. Možete koristiti Blender za izradu 3D modela za svoju web aplikaciju.
Za ovaj vodič, renderirat ćete BMW 3D model prema SRT izvedbi dostupnoj na Sketchfab.
Za početak preuzmite model sa Sketchfaba u GLTF (GL Transmission Format). Ovaj format olakšava renderiranje 3D modela u pregledniku. Kada je preuzimanje završeno, otvorite mapu modela i premjestite datoteku modela u javni direktorij unutar vaše React aplikacije.
Sada prijeđite na svoju datoteku app.js i popunite je kodom u nastavku.
- Uvezite sljedeće komponente:
uvoz {useGLTF, Stage, PresentationControls} iz"@react-three/drei";
- Napravite komponentu modela i dodajte kod u nastavku:
funkcijaModel(rekviziti){
konst {scena} = useGLTF("/bmw.glb");
povratak<primitivnaobjekt={scena} {...rekviziti} />
}izvozzadanofunkcijaaplikacija() {
povratak (
<divnaziv klase="Aplikacija">
<divnaziv klase="Zaglavlje aplikacije">
dpr={[1,2]}
shadows camera={{fav: 45}}
stil={{"položaj": "apsolutno"}}
>
brzina={1,5}
globalno zoom={0.5}
polarni={[-0.1, matematika.PI / 4]}
>
<Pozornicaokoliš={nula}>
<Modelmjerilo={0.01} />
Pozornica>
PresentationControls>
Platno>
div>
div>
);
} - UseGLTF kuka iz biblioteke React-three-drei definira varijablu scene i dodjeljuje joj vrijednost datoteke modela koja se nalazi na stazi "/bmw.glb". Komponenta zatim vraća primitivni objekt koji postavlja scenu za 3D model.
- Element Canvas prikazuje glavne komponente koje čine model, s određenim svojstvima, kao što su omjer piksela uređaja (DPR), sjene, kut kamere i stil.
- Zatim odredite svojstva komponente PresentationControls kao što su brzina i globalno zumiranje. Ova svojstva definiraju kako ćete kontrolirati model na zaslonu.
- Na kraju, konfigurirajte komponentu Stage koja montira model na zaslon preglednika.
Okrenite razvojni poslužitelj da ažurirate promjene na svojoj aplikaciji. Trebali biste vidjeti model prikazan u vašem pregledniku.
Prikaz 3D modela u vašoj web aplikaciji
Renderiranje 3D modela u vašim web aplikacijama može ponuditi nekoliko prednosti, poput poboljšanja korisničkog iskustva pružanjem realističnijeg i interaktivnijeg 3D dojma. Kao rezultat toga, korisnici mogu bolje komunicirati s proizvodom.
Međutim, renderiranje 3D elemenata može imati svoje nedostatke kao što je negativan utjecaj na performanse aplikacije. 3D modeli zahtijevaju više resursa za generiranje, što može uzrokovati sporije učitavanje vaše aplikacije.