Hoe 3D-objecten in een React-toepassing worden weergegeven

De introductie van 3D-rendering heeft de gebruikersinteractie met internettechnologieën getransformeerd. Om te beginnen zijn webapps meeslepender geworden en bieden ze een boeiende en interactieve ervaring via de webbrowser.

Deze technologie is al gretig overgenomen door de gaming- en augmented/virtual reality-velden. Het biedt een realistische en meeslepende manier om te communiceren met virtuele elementen.

Ontdek hoe u 3D-objecten kunt renderen in een React-toepassing.

De basisprincipes van 3D-modellering en -programmering

Voordat u aan de slag gaat met 3D-rendering, zijn er een paar punten waar u op moet letten:

• 3D-objecten bevatten individuele punten of hoekpunten die hun structuur in drie dimensies definiëren. Door deze punten samen te voegen, ontstaan ​​vlakken die de vorm van het object op het scherm vormen.
• Moderne browsers hebben de ingebouwde mogelijkheid om 3D weer te geven met behulp van technologieën zoals WebGL. Ze doen dit door gebruik te maken van de kracht van de grafische verwerkingseenheid in uw machine om snel 3D-modellen en scènes weer te geven.
  instagram viewer
• Elk 3D-object dat uw browser weergeeft, bestaat uit drie hoofdcomponenten. Dit zijn de scène, de camera en de renderer, en ze spelen allemaal een cruciale rol. De scène biedt het basisplatform om al je 3D-elementen op te zetten, inclusief lichten en camera's. Met de camera kunt u het 3D-object vanuit verschillende hoeken bekijken. Ten slotte koppelt de renderer de scène en geeft deze weer bovenop een canvas HTML-element.

3D-weergave met Three.js en React Three Fiber

Drie.js is een JavaScript-bibliotheek die u kunt gebruiken om 3D-objecten in een webbrowser weer te geven. Met behulp van de ingebouwde componenten kunt u eenvoudig 3D-objecten in uw browser maken en weergeven, naast andere functies van uw React-applicatie.

Het react-three-fiber-pakket werkt bovenop Three.js. Het vereenvoudigt het gebruik van Three.js-componenten om 3D-objecten in de browser te maken en weer te geven. Interessant is dat het ook maatwerk biedt Reageer haken die van pas komen bij het maken van 3D-objecten in React.

3D-objecten renderen in een React-toepassing

Volg de onderstaande stappen om een ​​eenvoudige 3D-vorm in uw browser weer te geven, evenals een door Blender gemaakt 3D-model. Als je Blender niet kent, leer hoe je als beginner aan de slag kunt.

Maak een React-applicatie, start uw terminal op om de onderstaande opdracht uit te voeren en installeer de vereiste afhankelijkheden:

npm installeer drie @react-three/fiber @react-three/drei

Installeer de pakketten Three.js, react-three-fiber en react-three-drei. De bibliotheek react-three-drei werkt samen met react-three-fiber om 3D-scènes en objecten te creëren.

Geef een 3D-vorm weer

U kunt met heel weinig code een eenvoudige 3D-doosvorm weergeven in een browser. Open de src/app.js bestand, verwijder alle boilerplate React-code en voeg het volgende toe:

importeren Reageer van"Reageer";
importeren {Canvas} van"@react-drie/vezel";
importeren {OrbitControls} van"@react-drie/drei";
functieDoos() {
opbrengst (
<gaas>
<boxBufferGeometrybijvoegen ="geometrie" />
<gaasLambertMateriaalbijvoegen="materiaal"kleur="felroze" />
gaas>
 )
}
exporterenstandaardfunctieapp() {
opbrengst (
<divnaam van de klasse="App">
<divnaam van de klasse="App-header">
<Canvas>
<OrbitControls />
<omgevingslichtintensiteit ={0.5} />
<spotLichtpositie={[10,15,10]} hoek={0.3} />
<Doos />
Canvas>
div>
div>
 );
}

Deze code doet het volgende:

• De Doos component gebruikt de mesh-, boxBufferGeometry- en meshLambertMaterial-componenten van react-three-fiber om een ​​3D-box weer te geven. Deze drie componenten werken hand in hand om de vorm van de doos te creëren.
• De component boxBufferGeometry maakt de box en deze code stelt de kleureigenschap van de meshLambertMaterial-component in op felroze.
• Vervolgens wordt het Canvas-element gerenderd waarin de dooscomponent is ondergebracht met omgevingslicht, een schijnwerper en de eigenschappen van de component Orbit Controls.
• De eigenschap omgevingslichtcomponent voegt een zacht licht toe aan het canvas. De spotLight-component voegt gefocust licht toe vanuit een specifieke positie met een hoek van 0,3. Ten slotte kunt u met de component OrbitControls de camera rond het 3D-object besturen.

Importeer en render de app.js-component in het index.js-bestand en start een ontwikkelingsserver om de resultaten in uw browser te bekijken op http://localhost: 3000.

Render een door Blender gemaakt 3D-model

Blender is een open-source tool die door creatieven in verschillende vakgebieden wordt gebruikt om 3D-modellen, visuele effecten en interactieve 3D-toepassingen te maken. U kunt Blender gebruiken om 3D-modellen voor uw webtoepassing te maken.

Voor deze zelfstudie maakt u een BMW 3D-model door SRT-prestaties beschikbaar op schetsfab.

Download om te beginnen het model van Sketchfab in GLTF (GL Transmission Format). Dit formaat maakt het gemakkelijk om 3D-modellen in de browser weer te geven. Zodra de download is voltooid, opent u de map van het model en verplaatst u het bestand van het model naar de openbare map in uw React-applicatie.

Ga nu naar uw app.js-bestand en vul het in met de onderstaande code.

• Importeer de volgende onderdelen:

  importeren {useGLTF, Stage, PresentationControls} van"@react-drie/drei";

• Maak de modelcomponent en voeg de onderstaande code toe:

  functieModel(rekwisieten){
  const {scène} = gebruikGLTF("/bmw.glb");
  opbrengst<primitiefvoorwerp={tafereel} {...rekwisieten} />
  }
  exporterenstandaardfunctieapp() {
  opbrengst (
  <divnaam van de klasse="App">
  <divnaam van de klasse="App-header">
   dpr={[1,2]} 
   schaduwen camera={{fav: 45}}
   stijl={{"positie": "absoluut"}}
   >
   snelheid={1.5} 
  globaal zoom={0.5}
   polair={[-0.1, Wiskunde.PI / 4]}
   >
  <Faseomgeving={nul}>
  <Modelschaal={0.01} />
  Fase>
  PresentatieControls>
  Canvas>
  div>
  div>
   );
  }
  

• De useGLTF-hook uit de React-three-drei-bibliotheek definieert een scènevariabele en kent deze de waarde toe van het modelbestand dat zich op het pad "/bmw.glb" bevindt. De component retourneert vervolgens een primitief object dat de scène voor het 3D-model legt.
• Het Canvas-element geeft de hoofdcomponenten weer waaruit het model bestaat, met de opgegeven eigenschappen, zoals pixelverhouding (DPR), schaduwen, camerahoek en stijl.
• Vervolgens geeft u de eigenschappen van de PresentationControls-component op, zoals snelheid en globale zoom. Deze eigenschappen bepalen hoe u het model op het scherm bestuurt.
• Configureer ten slotte de Stage-component die het model op het browserscherm koppelt.

Start de ontwikkelingsserver om de wijzigingen in uw toepassing bij te werken. U zou het model in uw browser moeten zien.

3D-modellen renderen in uw webapplicatie

Het renderen van 3D-modellen in uw webapplicaties kan verschillende voordelen bieden, zoals het verbeteren van de gebruikerservaring door een realistischer en interactiever 3D-gevoel te bieden. Hierdoor kunnen gebruikers beter met het product omgaan.

Het renderen van 3D-elementen kan echter zijn nadelen hebben, zoals een negatieve invloed op de prestaties van de applicatie. 3D-modellen hebben meer bronnen nodig om te renderen, waardoor uw app langzamer kan laden.