Cum să randați obiecte 3D într-o aplicație React

Introducerea randării 3D a transformat interacțiunea utilizatorului cu tehnologiile de internet. Pentru început, aplicațiile web au devenit mai captivante, oferind o experiență captivantă și interactivă prin intermediul browserului web.

Această tehnologie a fost deja adoptată cu entuziasm de domeniul jocurilor și al realității augmentate/virtuale. Oferă o modalitate realistă și captivantă de a interacționa cu elemente virtuale.

Aflați cum să randați obiecte 3D într-o aplicație React.

Bazele modelării și programării 3D

Înainte de a începe cu randarea 3D, există câteva puncte de care trebuie să fii conștient:

• Obiectele 3D conțin puncte individuale, sau vârfuri, care își definesc structura în trei dimensiuni. Unirea acestor puncte creează fețe care alcătuiesc forma obiectului pe ecran.
• Browserele moderne au capacitatea încorporată de a reda 3D folosind tehnologii precum WebGL. Ei fac acest lucru utilizând puterea unității de procesare grafică din mașina dvs. pentru a reda rapid modelele și scenele 3D.
  instagram viewer
• Orice obiect 3D pe care îl redă browserul dvs. este format din trei componente principale. Acestea sunt scena, camera și redarea și toate joacă un rol crucial. Scena oferă platforma de bază pentru a vă configura toate elementele 3D, inclusiv lumini și camere. Camera vă permite să vizualizați obiectul 3D din diferite unghiuri. În cele din urmă, redarea se montează și afișează scena deasupra unui element HTML canvas.

Redare 3D cu Three.js și React Three Fiber

Trei.js este o bibliotecă JavaScript pe care o puteți folosi pentru a reda obiecte 3D într-un browser web. Folosind componentele sale încorporate, puteți crea și reda cu ușurință obiecte 3D în browser, alături de alte caracteristici ale aplicației dvs. React.

Pachetul react-three-fibre funcționează peste Three.js. Simplifică procesul de utilizare a componentelor Three.js pentru a crea și a reda obiecte 3D în browser. Interesant este că oferă și personalizare Cârlige de reacție care sunt utile în timp ce creați obiecte 3D în React.

Redarea obiectelor 3D într-o aplicație React

Urmați pașii de mai jos pentru a reda o formă 3D simplă în browser, precum și un model 3D creat de Blender. Dacă nu sunteți familiarizat cu Blender, învață cum să începi ca începător.

Creați o aplicație React, porniți terminalul pentru a rula comanda de mai jos și instalați dependențele necesare:

npm instalează trei @react-three/fibre @react-three/drei

Instalați pachetele Three.js, react-three-fibre și react-three-drei. Biblioteca react-three-drei funcționează alături de react-three-fiber pentru a crea scene și obiecte 3D.

Redați o formă 3D

Puteți reda o formă simplă de cutie 3D într-un browser cu foarte puțin cod. Deschide src/app.js fișier, ștergeți tot codul boilerplate React și adăugați următoarele:

import Reacţiona din"reacţiona";
import {Canvas} din„@react-trei/fibră”;
import {OrbitControls} din„@react-three/drei”;
funcţieCutie() {
întoarcere (
<plasă>
<boxBufferGeometryatașați ="geometrie" />
<plasăLambertMaterialatașați="material"culoare="roz fierbinte" />
plasă>
 )
}
exportMod implicitfuncţieApp() {
întoarcere (
<divnumele clasei=„Aplicație”>
<divnumele clasei=„Aplicație antet”>
<Pânză>
<OrbitControls />
<lumină ambientalăintensitate ={0.5} />
<spotlightpoziţie={[10,15,10]} unghi={0.3} />
<Cutie />
Pânză>
div>
div>
 );
}

Acest cod face următoarele:

• The Cutie componenta folosește componentele mesh, boxBufferGeometry și meshLambertMaterial din react-three-fibre pentru a reda o cutie 3D. Aceste trei componente lucrează mână în mână pentru a crea forma cutiei.
• Componenta boxBufferGeometry creează caseta și acest cod setează proprietatea de culoare a componentei meshLambertMaterial la roz fierbinte.
• Apoi redă elementul Canvas care găzduiește componenta cutie cu lumină ambientală, un reflector și proprietățile componentei Orbit Controls setate.
• Proprietatea componentei luminii ambientale adaugă o lumină moale pânzei. Componenta spotLight adaugă o lumină focalizată dintr-o anumită poziție cu un unghi de 0,3. În cele din urmă, componenta OrbitControls vă permite să controlați camera în jurul obiectului 3D.

Importați și randați componenta app.js în fișierul index.js și porniți un server de dezvoltare pentru a vedea rezultatele în browser la http://localhost: 3000.

Redați un model 3D creat de Blender

Blender este un instrument open-source folosit de creativii din diferite domenii pentru a crea modele 3D, efecte vizuale și aplicații 3D interactive. Puteți utiliza Blender pentru a crea modele 3D pentru aplicația dvs. web.

Pentru acest tutorial, veți reda un model 3D BMW în funcție de performanța SRT disponibil pe Sketchfab.

Pentru a începe, descărcați modelul din Sketchfab în GLTF (GL Transmission Format). Acest format facilitează redarea modelelor 3D în browser. Odată ce descărcarea este finalizată, deschideți folderul modelului și mutați fișierul modelului în directorul public din interiorul aplicației React.

Acum, mergeți la fișierul dvs. app.js și completați-l cu codul de mai jos.

• Importă următoarele componente:

  import {useGLTF, Stage, PresentationControls} din„@react-three/drei”;

• Creați componenta modelului și adăugați codul de mai jos:

  funcţieModel(recuzită){
  const {scenă} = foloseșteGLTF(„/bmw.glb”);
  întoarcere<primitivobiect={scenă} {...recuzită} />
  }
  exportMod implicitfuncţieApp() {
  întoarcere (
  <divnumele clasei=„Aplicație”>
  <divnumele clasei=„Aplicație antet”>
   dpr={[1,2]} 
   camera umbre={{fav: 45}}
   stil={{"poziţie": "absolut"}}
   >
   viteza={1,5} 
  global zoom={0.5}
   polar={[-0.1, Matematică.PI / 4]}
   >
  <Etapămediu inconjurator={nul}>
  <Modelscară={0.01} />
  Etapă>
  Controale de prezentare>
  Pânză>
  div>
  div>
   );
  }
  

• Cârligul useGLTF din biblioteca React-three-drei definește o variabilă de scenă și îi atribuie valoarea fișierului model situat la calea „/bmw.glb”. Componenta returnează apoi un obiect primitiv care pune scena pentru modelul 3D.
• Elementul Canvas redă principalele componente care alcătuiesc modelul, cu proprietățile specificate, cum ar fi raportul pixelilor dispozitivului (DPR), umbrele, unghiul camerei și stilul.
• Apoi specificați proprietățile componentei PresentationControls, cum ar fi viteza și zoomul global. Aceste proprietăți definesc modul în care veți controla modelul pe ecran.
• În cele din urmă, configurați componenta Stage care montează modelul pe ecranul browserului.

Porniți serverul de dezvoltare pentru a actualiza modificările aplicației dvs. Ar trebui să vedeți modelul redat în browser.

Redarea modelelor 3D în aplicația dvs. web

Redarea modelelor 3D în aplicațiile dvs. web poate oferi mai multe beneficii, cum ar fi îmbunătățirea experienței utilizatorului, oferind o senzație 3D mai realistă și interactivă. Ca rezultat, utilizatorii se pot implica mai bine cu produsul.

Cu toate acestea, redarea elementelor 3D poate avea dezavantaje, cum ar fi afectarea negativă a performanței aplicației. Modelele 3D necesită mai multe resurse pentru a fi redate, ceea ce poate face ca aplicația să se încarce mai lent.