Kako upodabljati 3D-predmete v aplikaciji React

Uvedba 3D upodabljanja je spremenila interakcijo uporabnika z internetnimi tehnologijami. Za začetek so spletne aplikacije postale bolj poglobljene in zagotavljajo privlačno in interaktivno izkušnjo prek spletnega brskalnika.

To tehnologijo so že nestrpno sprejeli področja iger in obogatene/navidezne resničnosti. Ponuja realističen in poglobljen način interakcije z virtualnimi elementi.

Ugotovite, kako upodabljati 3D-predmete v aplikaciji React.

Osnove 3D modeliranja in programiranja

Preden začnete s 3D upodabljanjem, se morate zavedati nekaj točk:

• 3D-predmeti vsebujejo posamezne točke ali oglišča, ki določajo njihovo strukturo v treh dimenzijah. Združevanje teh točk ustvari obraze, ki tvorijo obliko predmeta na zaslonu.
• Sodobni brskalniki imajo vgrajeno možnost upodabljanja 3D z uporabo tehnologij, kot je WebGL. To storijo z uporabo moči grafične procesne enote v vašem računalniku za hitro upodabljanje 3D modelov in prizorov.
instagram viewer
• Vsak 3D-predmet, ki ga upodablja vaš brskalnik, je sestavljen iz treh glavnih komponent. To so scena, kamera in upodabljalnik in vsi igrajo ključno vlogo. Scena zagotavlja osnovno platformo za postavitev vseh vaših 3D elementov, vključno z lučmi in kamerami. Kamera omogoča ogled 3D predmeta iz različnih zornih kotov. Nazadnje upodabljalnik namesti in prikaže prizor na vrhu elementa HTML platna.

3D upodabljanje s Three.js in React Three Fiber

Three.js je knjižnica JavaScript, ki jo lahko uporabite za upodabljanje 3D-predmetov v spletnem brskalniku. Z uporabo vgrajenih komponent lahko preprosto ustvarite in upodabljate 3D-predmete v vašem brskalniku skupaj z drugimi funkcijami vaše aplikacije React.

Paket react-three-fiber deluje na Three.js. Poenostavlja postopek uporabe komponent Three.js za ustvarjanje in upodabljanje 3D-predmetov v brskalniku. Zanimivo je, da zagotavlja tudi po meri React kljuke ki pridejo prav pri ustvarjanju 3D objektov v Reactu.

Upodabljanje 3D objektov v aplikaciji React

Sledite spodnjim korakom za upodabljanje preproste 3D oblike v vašem brskalniku in 3D modela, ustvarjenega v Blenderju. Če ne poznate Blenderja, naučite se začeti kot začetnik.

Ustvarite aplikacijo React, zaženite terminal, da zaženete spodnji ukaz, in namestite zahtevane odvisnosti:

npm namestite tri @react-three/fiber @react-three/drei

Namestite pakete Three.js, react-three-fiber in react-three-drei. Knjižnica react-three-drei deluje skupaj z react-three-fiber za ustvarjanje 3D prizorov in predmetov.

Upodobite 3D obliko

V brskalniku lahko z zelo malo kode upodabljate preprosto obliko 3D škatle. Odprite src/app.js datoteko, izbrišite vso kodo Boilerplate React in dodajte naslednje:

uvoz Reagiraj od"reagirati";
uvoz {Canvas} od"@react-three/fiber";
uvoz {OrbitControls} od"@react-three/drei";
funkcijoŠkatla() {
vrnitev (
<mreža>
<boxBufferGeometrypriložiti ="geometrija" />
<meshLambertMaterialpriložiti="material"barva="hotpink" />
mreža>
 )
}
izvozprivzetofunkcijoaplikacija() {
vrnitev (
<divclassName="Aplikacija">
<divclassName="Glava aplikacije">
<Platno>
<OrbitControls />
<ambientLightintenzivnost ={0.5} />
<ospredjepoložaj={[10,15,10]} kota={0.3} />
<Škatla />
Platno>
div>
div>
 );
}

Ta koda naredi naslednje:

• The Škatla komponenta uporablja mrežne komponente, boxBufferGeometry in meshLambertMaterial iz react-three-fiber za upodabljanje 3D škatle. Te tri komponente delujejo z roko v roki, da ustvarijo obliko škatle.
• Komponenta boxBufferGeometry ustvari polje in ta koda nastavi lastnost barve komponente meshLambertMaterial na vročo roza.
• Nato upodobi element Canvas, v katerem je komponenta škatle z ambientalno svetlobo, reflektorjem in nastavljenimi lastnostmi komponente Orbit Controls.
• Lastnost komponente ambientalne svetlobe doda platnu mehko svetlobo. Komponenta spotLight doda fokusirano svetlobo iz določenega položaja s kotom 0,3. Končno vam komponenta OrbitControls omogoča nadzor kamere okoli 3D-predmeta.

Uvozite in upodobite komponento app.js v datoteki index.js ter zavrtite razvojni strežnik za ogled rezultatov v brskalniku na http://localhost: 3000.

Upodobite 3D model, ki ga je ustvaril Blender

Blender je odprtokodno orodje, ki ga kreativci na različnih področjih uporabljajo za ustvarjanje 3D modelov, vizualnih učinkov in interaktivnih 3D aplikacij. Blender lahko uporabite za ustvarjanje 3D modelov za vašo spletno aplikacijo.

Za to vadnico boste upodabljali 3D model BMW z zmogljivostjo SRT, ki je na voljo na Sketchfab.

Za začetek prenesite model iz Sketchfab v GLTF (GL Transmission Format). Ta oblika olajša upodabljanje 3D modelov v brskalniku. Ko je prenos končan, odprite mapo modela in premaknite datoteko modela v javni imenik v aplikaciji React.

Zdaj pa pojdite na datoteko app.js in jo napolnite s spodnjo kodo.

• Uvozite naslednje komponente:

  uvoz {useGLTF, Stage, PresentationControls} od"@react-three/drei";

• Ustvarite komponento modela in dodajte spodnjo kodo:

  funkcijoModel(rekviziti){
  konst {scena} = useGLTF("/bmw.glb");
  vrnitev<primitivenpredmet={scena} {...rekviziti} />
  }
  izvozprivzetofunkcijoaplikacija() {
  vrnitev (
  <divclassName="Aplikacija">
  <divclassName="Glava aplikacije">
   dpr={[1,2]} 
   shadows camera={{fav: 45}}
   style={{"položaj": "absolutno"}}
   >
   hitrost={1,5} 
  globalno zoom={0.5}
   polar={[-0.1, matematika.PI / 4]}
   >
  <Stopnjaokolju={nič}>
  <Modellestvica={0.01} />
  Stopnja>
  PresentationControls>
  Platno>
  div>
  div>
   );
  }
  

• Kavelj useGLTF iz knjižnice React-three-drei definira spremenljivko scene in ji dodeli vrednost datoteke modela, ki se nahaja na poti "/bmw.glb". Komponenta nato vrne primitivni objekt, ki postavi sceno za 3D model.
• Element Canvas upodablja glavne komponente, ki sestavljajo model, z določenimi lastnostmi, kot so razmerje slikovnih pik naprave (DPR), sence, kot kamere in slog.
• Nato določite lastnosti komponente PresentationControls, kot sta hitrost in globalna povečava. Te lastnosti določajo, kako boste nadzirali model na zaslonu.
• Končno konfigurirajte komponento Stage, ki namesti model na zaslon brskalnika.

Zavrtite razvojni strežnik, da posodobite spremembe v svoji aplikaciji. V brskalniku bi morali videti upodobljen model.

Upodabljanje 3D modelov v vaši spletni aplikaciji

Upodabljanje 3D-modelov v vaših spletnih aplikacijah lahko nudi številne prednosti, na primer izboljšanje uporabniške izkušnje z zagotavljanjem bolj realističnega in interaktivnega 3D-občutka. Posledično lahko uporabniki bolje sodelujejo z izdelkom.

Vendar pa ima upodabljanje 3D elementov lahko slabe strani, kot je negativen vpliv na delovanje aplikacije. 3D modeli zahtevajo več virov za upodabljanje, kar lahko povzroči počasnejše nalaganje vaše aplikacije.