Hvordan gjengi 3D-objekter i en React-applikasjon

Innføringen av 3D-gjengivelse har endret brukerinteraksjon med internettteknologier. Til å begynne med har nettapper blitt mer oppslukende, og gir en engasjerende og interaktiv opplevelse via nettleseren.

Denne teknologien har allerede blitt ivrig tatt i bruk av spill og utvidet/virtuell virkelighet. Det tilbyr en realistisk og oppslukende måte å samhandle med virtuelle elementer.

Finn ut hvordan du gjengir 3D-objekter i en React-applikasjon.

Grunnleggende om 3D-modellering og programmering

Før du kommer i gang med 3D-gjengivelse, er det noen punkter du må være klar over:

• 3D-objekter inneholder individuelle punkter, eller toppunkter, som definerer deres struktur i tre dimensjoner. Sammenføyning av disse punktene skaper ansikter som utgjør objektets form på skjermen.
• Moderne nettlesere har den innebygde muligheten til å gjengi 3D ved hjelp av teknologier som WebGL. De gjør det ved å bruke kraften til den grafiske prosessorenheten i maskinen din til å gjengi 3D-modeller og scener raskt.
  instagram viewer
• Ethvert 3D-objekt som nettleseren din gjengir består av tre hovedkomponenter. Dette er scenen, kameraet og rendereren, og de spiller alle en avgjørende rolle. Scenen gir basisplattformen for å sette opp alle 3D-elementene dine, inkludert lys og kameraer. Kameraet lar deg se 3D-objektet fra forskjellige vinkler. Til slutt monterer rendereren og viser scenen på toppen av et HTML-element på lerretet.

3D-gjengivelse med Three.js og React Three Fiber

Three.js er et JavaScript-bibliotek som du kan bruke til å gjengi 3D-objekter i en nettleser. Ved å bruke de innebygde komponentene kan du enkelt lage og gjengi 3D-objekter i nettleseren din sammen med andre funksjoner i React-applikasjonen din.

React-tre-fiber-pakken fungerer på toppen av Three.js. Det forenkler prosessen med å bruke Three.js-komponenter til å lage og gjengi 3D-objekter i nettleseren. Interessant nok gir det også tilpasset Reager kroker som kommer godt med når du lager 3D-objekter i React.

Gjengivelse av 3D-objekter i en React-applikasjon

Følg trinnene nedenfor for å gjengi en enkel 3D-form på nettleseren din, så vel som en Blender-laget 3D-modell. Hvis du ikke er kjent med Blender, lære hvordan du kommer i gang som nybegynner.

Opprett en React-applikasjon, fyr opp terminalen for å kjøre kommandoen nedenfor, og installer de nødvendige avhengighetene:

npm installer tre @react-three/fiber @react-three/drei

Installer pakkene Three.js, react-three-fiber og react-three-drei. React-three-drei-biblioteket fungerer sammen med react-three-fiber for å lage 3D-scener og objekter.

Gjengi en 3D-form

Du kan gjengi en enkel 3D-boksform i en nettleser med svært lite kode. Åpne src/app.js fil, slett all React-koden og legg til følgende:

import Reagere fra"reagere";
import {Lerret} fra"@reager-tre/fiber";
import {OrbitControls} fra"@reager-tre/drei";
funksjonEske() {
komme tilbake (
<mesh>
<boxBufferGeometrifeste ="geometri" />
<meshLambertMaterialfeste="materiale"farge="hotpink" />
mesh>
 )
}
eksportmisligholdefunksjonApp() {
komme tilbake (
<divklassenavn="App">
<divklassenavn="App-header">
<Lerret>
<OrbitControls />
<omgivelseslysintensitet ={0.5} />
<spotlightposisjon={[10,15,10]} vinkel={0.3} />
<Eske />
Lerret>
div>
div>
 );
}

Denne koden gjør følgende:

• De Eske komponenten bruker mesh-, boxBufferGeometry- og meshLambertMaterial-komponentene fra react-three-fiber for å gjengi en 3D-boks. Disse tre komponentene jobber hånd i hånd for å skape formen på boksen.
• BoxBufferGeometry-komponenten lager boksen, og denne koden setter meshLambertMaterial-komponentens fargeegenskap til varm rosa.
• Den gjengir deretter Canvas-elementet som huser bokskomponenten med omgivelseslys, en spotlight og egenskapene til Orbit Controls-komponenten.
• Egenskapen for omgivelseslyskomponenten tilfører et mykt lys til lerretet. SpotLight-komponenten legger til et fokusert lys fra en bestemt posisjon med en vinkel på 0,3. Til slutt lar OrbitControls-komponenten deg kontrollere kameraet rundt 3D-objektet.

Importer og gjengi app.js-komponenten i index.js-filen og snurr opp en utviklingsserver for å se resultatene i nettleseren din på http://localhost: 3000.

Gjengi en blender-laget 3D-modell

Blender er et åpen kildekode-verktøy som brukes av reklamer på forskjellige felt for å lage 3D-modeller, visuelle effekter og interaktive 3D-applikasjoner. Du kan bruke Blender til å lage 3D-modeller for nettapplikasjonen din.

For denne opplæringen vil du gjengi en BMW 3D-modell etter SRT-ytelse tilgjengelig på Sketchfab.

For å komme i gang, last ned modellen fra Sketchfab i GLTF (GL Transmission Format). Dette formatet gjør det enkelt å gjengi 3D-modeller i nettleseren. Når nedlastingen er fullført, åpner du modellens mappe og flytter modellens fil til den offentlige katalogen i React-applikasjonen din.

Gå nå over til app.js-filen din og fyll den med koden nedenfor.

• Importer følgende komponenter:

  import {useGLTF, Stage, PresentationControls} fra"@reager-tre/drei";

• Lag modellkomponenten og legg til koden nedenfor:

  funksjonModell(Rekvisitter){
  konst {scene} = brukGLTF("/bmw.glb");
  komme tilbake<primitivgjenstand={scene} {...Rekvisitter} />
  }
  eksportmisligholdefunksjonApp() {
  komme tilbake (
  <divklassenavn="App">
  <divklassenavn="App-header">
   dpr={[1,2]} 
   skyggekamera={{fav: 45}}
   stil={{"posisjon": "absolutt"}}
   >
   hastighet={1,5} 
  global zoom={0.5}
   polar={[-0.1, Matte.PI / 4]}
   >
  <Scenemiljø={null}>
  <Modellskala={0.01} />
  Scene>
  Presentasjonskontroller>
  Lerret>
  div>
  div>
   );
  }
  

• UseGLTF-kroken fra React-three-drei-biblioteket definerer en scenevariabel og tildeler den verdien til modellfilen som ligger på banen "/bmw.glb". Komponenten returnerer deretter et primitivt objekt som legger scenen for 3D-modellen.
• Canvas-elementet gjengir hovedkomponentene som utgjør modellen, med de spesifiserte egenskapene, for eksempel device pixel ratio (DPR), skygger, kameravinkel og stil.
• Du spesifiserer deretter egenskapene til PresentationControls-komponenten som hastighet og global zoom. Disse egenskapene definerer hvordan du vil kontrollere modellen på skjermen.
• Til slutt konfigurerer du Stage-komponenten som monterer modellen på nettleserskjermen.

Spinn opp utviklingsserveren for å oppdatere endringene på applikasjonen din. Du bør se modellen gjengitt i nettleseren din.

Gjengivelse av 3D-modeller i webapplikasjonen din

Å gjengi 3D-modeller i nettapplikasjonene dine kan tilby flere fordeler, som å forbedre brukeropplevelsen ved å gi en mer realistisk og interaktiv 3D-følelse. Som et resultat kan brukere bedre engasjere seg i produktet.

Å gjengi 3D-elementer kan imidlertid ha sine ulemper, for eksempel negativt påvirke ytelsen til applikasjonen. 3D-modeller krever mer ressurser å gjengi, noe som kan føre til at appen din laster saktere.