Ako vykresliť 3D objekty v aplikácii React

Zavedenie 3D vykresľovania zmenilo interakciu používateľa s internetovými technológiami. Na začiatok sa webové aplikácie stali pôsobivejšími a poskytujú pútavý a interaktívny zážitok prostredníctvom webového prehliadača.

Táto technológia už bola s nadšením prijatá v oblasti hier a rozšírenej/virtuálnej reality. Ponúka realistický a pohlcujúci spôsob interakcie s virtuálnymi prvkami.

Zistite, ako vykresliť 3D objekty v aplikácii React.

Základy 3D modelovania a programovania

Predtým, ako začnete s 3D vykresľovaním, je potrebné si uvedomiť niekoľko bodov:

• 3D objekty obsahujú jednotlivé body alebo vrcholy, ktoré definujú ich štruktúru v troch rozmeroch. Spojenie týchto bodov vytvorí tváre, ktoré tvoria tvar objektu na obrazovke.
• Moderné prehliadače majú vstavanú schopnosť vykresľovať 3D pomocou technológií ako WebGL. Robia to tak, že využívajú výkon jednotky grafického spracovania vo vašom stroji na rýchle vykreslenie 3D modelov a scén.
instagram viewer
• Každý 3D objekt, ktorý váš prehliadač vykresľuje, pozostáva z troch hlavných komponentov. Sú to scéna, kamera a vykresľovač a všetky zohrávajú kľúčovú úlohu. Scéna poskytuje základnú platformu na nastavenie všetkých vašich 3D prvkov, vrátane svetiel a kamier. Kamera umožňuje sledovať 3D objekt z rôznych uhlov. Nakoniec vykresľovací modul pripojí a zobrazí scénu na vrch prvku HTML plátna.

3D vykresľovanie s Three.js a React Three Fiber

Three.js je knižnica JavaScript, ktorú môžete použiť na vykreslenie 3D objektov vo webovom prehliadači. Pomocou jeho vstavaných komponentov môžete jednoducho vytvárať a vykresľovať 3D objekty vo vašom prehliadači spolu s ďalšími funkciami vašej aplikácie React.

Balíček reakčných troch vlákien funguje nad súborom Three.js. Zjednodušuje proces používania komponentov Three.js na vytváranie a vykresľovanie 3D objektov v prehliadači. Zaujímavé je, že poskytuje aj zvyk Reagovať háčiky ktoré sa hodia pri vytváraní 3D objektov v Reacte.

Vykresľovanie 3D objektov v aplikácii React

Ak chcete vykresliť jednoduchý 3D tvar vo svojom prehliadači, ako aj 3D model vytvorený Blenderom, postupujte podľa nižšie uvedených krokov. Ak nepoznáte Blender, naučiť sa, ako začať ako začiatočník.

Vytvorte aplikáciu React, spustite svoj terminál na spustenie príkazu nižšie a nainštalujte požadované závislosti:

npm nainštalujte tri @react-three/fiber @react-three/drei

Nainštalujte balíky Three.js, response-three-fiber a respond-three-drei. Knižnica reag-tri-drei funguje spolu s reag-tri-fibre na vytváranie 3D scén a objektov.

Renderujte 3D tvar

Jednoduchý tvar 3D boxu môžete vykresliť v prehliadači s veľmi malým množstvom kódu. Otvor src/app.js súbor, odstráňte všetok štandardný kód React a pridajte nasledujúce:

importovať Reagovať od"reagovať";
importovať {Plátno} od"@react-tri/fiber";
importovať {OrbitControls} od"@react-tri/drei";
funkciuBox() {
vrátiť (
<pletivo>
<boxBufferGeometrypriložiť ="geometria" />
<sieťovinaLambertMateriálpriložiť="materiál"farba="hotpink" />
pletivo>
 )
}
exportpredvolenáfunkciuApp() {
vrátiť (
<divclassName="aplikácia">
<divclassName="Hlavička aplikácie">
<Plátno>
<OrbitControls />
<ambientLightintenzita ={0.5} />
<bodové svetlopozíciu={[10,15,10]} uhol={0.3} />
<Box />
Plátno>
div>
div>
 );
}

Tento kód robí nasledovné:

• The Box komponent používa na vykreslenie 3D boxu komponenty mesh, boxBufferGeometry a meshLambertMaterial z Reag-tri-fiber. Tieto tri komponenty pracujú ruka v ruke pri vytváraní tvaru krabice.
• Komponent boxBufferGeometry vytvorí rámček a tento kód nastaví vlastnosť farby komponentu meshLambertMaterial na ružovú.
• Potom vykreslí prvok Canvas, v ktorom sa nachádza komponent boxu, s okolitým svetlom, reflektorom a sadu vlastností komponentu Orbit Controls.
• Vlastnosť komponentu okolitého svetla dodáva plátne jemné svetlo. Komponent spotLight pridáva zaostrené svetlo z konkrétnej pozície s uhlom 0,3. A nakoniec, komponent OrbitControls vám umožňuje ovládať kameru okolo 3D objektu.

Importujte a vykresľte komponent app.js v súbore index.js a spustite vývojový server na zobrazenie výsledkov vo vašom prehliadači na adrese http://localhost: 3000.

Renderujte 3D model vytvorený Blenderom

Blender je nástroj s otvoreným zdrojom, ktorý používajú kreatívci v rôznych oblastiach na vytváranie 3D modelov, vizuálnych efektov a interaktívnych 3D aplikácií. Blender môžete použiť na vytváranie 3D modelov pre vašu webovú aplikáciu.

Pre tento tutoriál vykreslíte 3D model BMW podľa výkonu SRT dostupný na Sketchfab.

Ak chcete začať, stiahnite si model zo Sketchfab vo formáte GLTF (GL Transmission Format). Tento formát uľahčuje vykresľovanie 3D modelov v prehliadači. Po dokončení sťahovania otvorte priečinok modelu a presuňte súbor modelu do verejného adresára vo vašej aplikácii React.

Teraz prejdite do súboru app.js a vyplňte ho nižšie uvedeným kódom.

• Importujte nasledujúce komponenty:

  importovať {useGLTF, Stage, PresentationControls} od"@react-tri/drei";

• Vytvorte komponent modelu a pridajte nižšie uvedený kód:

  funkciuModel(rekvizity){
  konšt {scéna} = useGLTF("/bmw.glb");
  vrátiť<primitívnyobjekt={scéna} {...rekvizity} />
  }
  exportpredvolenáfunkciuApp() {
  vrátiť (
  <divclassName="aplikácia">
  <divclassName="Hlavička aplikácie">
   dpr={[1,2]} 
   tieňová kamera={{fav: 45}}
   štýl={{"pozícia": "absolútne"}}
   >
   rýchlosť = {1,5} 
  globálne zoom={0.5}
   polárny={[-0.1, Matematika.PI / 4]}
   >
  <Etapaživotné prostredie={nulový}>
  <Modelstupnica={0.01} />
  Etapa>
  PresentationControls>
  Plátno>
  div>
  div>
   );
  }
  

• Hák useGLTF z knižnice React-three-drei definuje premennú scény a priraďuje jej hodnotu súboru modelu umiestneného na ceste "/bmw.glb". Komponent potom vráti primitívny objekt, ktorý položí scénu pre 3D model.
• Element Canvas vykresľuje hlavné komponenty, ktoré tvoria model, so špecifikovanými vlastnosťami, ako sú pomer pixelov zariadenia (DPR), tiene, uhol kamery a štýl.
• Potom určíte vlastnosti komponentu PresentationControls, ako je rýchlosť a globálne priblíženie. Tieto vlastnosti definujú, ako budete model ovládať na obrazovke.
• Nakoniec nakonfigurujte komponent Stage, ktorý pripojí model na obrazovku prehliadača.

Roztočte vývojový server, aby ste aktualizovali zmeny vo svojej aplikácii. Mali by ste vidieť model vykreslený vo vašom prehliadači.

Vykresľovanie 3D modelov vo vašej webovej aplikácii

Vykresľovanie 3D modelov vo vašich webových aplikáciách môže ponúknuť niekoľko výhod, napríklad zlepšenie používateľského zážitku poskytnutím realistickejšieho a interaktívnejšieho 3D pocitu. Vďaka tomu môžu používatelia s produktom lepšie spolupracovať.

Vykresľovanie 3D prvkov však môže mať svoje nevýhody, ako napríklad negatívny vplyv na výkon aplikácie. 3D modely vyžadujú na vykreslenie viac zdrojov, čo môže spôsobiť pomalšie načítanie vašej aplikácie.