3D-objektien renderöiminen React-sovelluksessa

3D-renderöinnin käyttöönotto on muuttanut käyttäjien vuorovaikutusta internetteknologioiden kanssa. Ensinnäkin verkkosovelluksista on tullut entistä mukaansatempaavampia, ja ne tarjoavat mukaansatempaavan ja interaktiivisen kokemuksen verkkoselaimen kautta.

Tämä tekniikka on jo otettu innokkaasti käyttöön pelien ja lisätyn/virtuaalitodellisuuden alalla. Se tarjoaa realistisen ja mukaansatempaavan tavan olla vuorovaikutuksessa virtuaalisten elementtien kanssa.

Tutustu 3D-objektien hahmontamiseen React-sovelluksessa.

3D-mallinnuksen ja ohjelmoinnin perusteet

Ennen kuin aloitat 3D-renderöinnin, sinun on tiedettävä muutama seikka:

• 3D-objektit sisältävät yksittäisiä pisteitä tai pisteitä, jotka määrittävät niiden rakenteen kolmessa ulottuvuudessa. Näiden pisteiden yhdistäminen luo kasvoja, jotka muodostavat objektin muodon näytöllä.
• Nykyaikaisissa selaimissa on sisäänrakennettu kyky renderoida 3D käyttämällä WebGL: n kaltaisia ​​teknologioita. He tekevät sen hyödyntämällä koneen graafisen käsittelyyksikön tehoa 3D-mallien ja kohtausten hahmontamiseen nopeasti.
  instagram viewer
• Mikä tahansa selaimesi hahmontama 3D-objekti koostuu kolmesta pääkomponentista. Nämä ovat kohtaus, kamera ja renderöija, ja niillä kaikilla on ratkaiseva rooli. Kohtaus tarjoaa perustan kaikkien 3D-elementtisi, mukaan lukien valot ja kamerat, asettamiseen. Kameran avulla voit katsella 3D-objektia eri kulmista. Lopuksi renderöijä asentaa ja näyttää kohtauksen kanvas-HTML-elementin päällä.

3D-renderöinti Three.js: n ja React Three Fiberin avulla

Three.js on JavaScript-kirjasto, jota voit käyttää 3D-objektien hahmontamiseen verkkoselaimessa. Sen sisäänrakennettujen komponenttien avulla voit helposti luoda ja hahmontaa 3D-objekteja selaimessasi React-sovelluksesi muiden ominaisuuksien ohella.

React-three-fiber -paketti toimii Three.js: n päällä. Se yksinkertaistaa Three.js-komponenttien käyttöä 3D-objektien luomiseen ja hahmontamiseen selaimessa. Mielenkiintoista on, että se tarjoaa myös mukautettuja Reagoi koukut jotka ovat hyödyllisiä luotaessa 3D-objekteja Reactissa.

3D-objektien renderöiminen React-sovelluksessa

Seuraa alla olevia ohjeita hahmontaaksesi yksinkertaisen 3D-muodon selaimessasi sekä Blenderin luoman 3D-mallin. Jos et tunne Blenderia, oppia pääsemään alkuun aloittelijana.

Luo React-sovellus, käynnistä terminaali suorittaaksesi alla olevan komennon ja asenna tarvittavat riippuvuudet:

npm asenna kolme @react-three/fiber @react-three/drei

Asenna Three.js-, react-three-fiber- ja react-three-drei-paketit. React-three-drei -kirjasto toimii react-tree-fiberin rinnalla luoden 3D-kohtauksia ja -objekteja.

Piirrä 3D-muoto

Voit hahmontaa yksinkertaisen 3D-laatikon muodon selaimessa hyvin pienellä koodilla. Avaa src/app.js tiedosto, poista kaikki tiivistelmä React-koodi ja lisää seuraava:

tuonti Reagoi alkaen"reagoi";
tuonti {Kangas} alkaen"@react-three/fiber";
tuonti {OrbitControls} alkaen"@react-three/drei";
toimintoLaatikko() {
palata (
<verkko>
<boxBufferGeometryliittää ="geometria" />
<meshLambertMateriaaliliittää="materiaali"väri="kuuma pinkki" />
verkko>
 )
}
viedäoletuksenatoimintoSovellus() {
palata (
<divluokan nimi="Sovellus">
<divluokan nimi="Sovelluksen otsikko">
<Kangas>
<OrbitControls />
<tunnelmavalointensiteetti ={0.5} />
<kohdevaloasema={[10,15,10]} kulma={0.3} />
<Laatikko />
Kangas>
div>
div>
 );
}

Tämä koodi tekee seuraavaa:

• The Laatikko komponentti käyttää verkko-, boxBufferGeometry- ja meshLambertMaterial-komponentteja react-three-fiberista 3D-laatikon hahmontamiseen. Nämä kolme komponenttia toimivat käsi kädessä luoden laatikon muodon.
• boxBufferGeometry-komponentti luo laatikon ja tämä koodi asettaa meshLambertMaterial-komponentin väriominaisuuden kuuman vaaleanpunaiseksi.
• Sitten se renderöi laatikkokomponentin sisältävän Canvas-elementin ympäristön valolla, kohdevalolla ja Orbit Controls -komponentin ominaisuusjoukolla.
• Ympäristön valokomponenttiominaisuus lisää pehmeää valoa kankaalle. SpotLight-komponentti lisää tarkennettua valoa tietystä paikasta 0,3 kulmalla. Lopuksi OrbitControls-komponentin avulla voit ohjata kameraa 3D-objektin ympärillä.

Tuo ja renderöi app.js-komponentti index.js-tiedostossa ja käynnistä kehityspalvelin nähdäksesi tulokset selaimessasi osoitteessa http://localhost: 3000.

Renderöi Blenderin luoma 3D-malli

Blender on avoimen lähdekoodin työkalu, jota eri alojen luovat luovat 3D-malleja, visuaalisia tehosteita ja interaktiivisia 3D-sovelluksia käyttävät. Voit käyttää Blenderia luodaksesi 3D-malleja verkkosovelluksellesi.

Tässä opetusohjelmassa saat BMW 3D -mallin SRT-suorituskyvyn mukaan saataville Sketchfab.

Aloita lataamalla malli Sketchfabista GLTF-muodossa (GL Transmission Format). Tämä muoto helpottaa 3D-mallien hahmontamista selaimessa. Kun lataus on valmis, avaa mallin kansio ja siirrä mallin tiedosto julkiseen hakemistoon React-sovelluksessasi.

Siirry nyt app.js-tiedostoosi ja täytä se alla olevalla koodilla.

• Tuo seuraavat komponentit:

  tuonti {useGLTF, Stage, PresentationControls} alkaen"@react-three/drei";

• Luo mallikomponentti ja lisää alla oleva koodi:

  toimintoMalli(rekvisiitta){
  konst {kohtaus} = useGLTF("/bmw.glb");
  palata<primitiivinenesine={näkymä} {...rekvisiitta} />
  }
  viedäoletuksenatoimintoSovellus() {
  palata (
  <divluokan nimi="Sovellus">
  <divluokan nimi="Sovelluksen otsikko">
   dpr={[1,2]} 
   shadows camera={{suosikki: 45}}
   tyyli={{"sijainti": "absoluuttinen"}}
   >
   nopeus={1,5} 
  maailmanlaajuisesti zoom={0.5}
   polaarinen={[-0.1, Matematiikka.PI / 4]}
   >
  <Vaiheympäristöön={tyhjä}>
  <Mallimittakaavassa={0.01} />
  Vaihe>
  PresentationControls>
  Kangas>
  div>
  div>
   );
  }
  

• UseGLTF-koukku React-three-drei-kirjastosta määrittää kohtausmuuttujan ja määrittää sille polussa "/bmw.glb" olevan mallitiedoston arvon. Komponentti palauttaa sitten primitiivisen objektin, joka luo 3D-mallin kohtauksen.
• Canvas-elementti renderöi mallin muodostavat pääkomponentit määritetyillä ominaisuuksilla, kuten laitteen pikselisuhteella (DPR), varjoilla, kamerakulmalla ja tyylillä.
• Tämän jälkeen määrität PresentationControls-komponentin ominaisuudet, kuten nopeuden ja yleisen zoomauksen. Nämä ominaisuudet määrittävät, kuinka mallia ohjataan näytöllä.
• Määritä lopuksi Stage-komponentti, joka kiinnittää mallin selaimen näytölle.

Pyöritä kehityspalvelinta päivittääksesi sovelluksesi muutokset. Mallin pitäisi näkyä selaimessasi.

3D-mallien renderöiminen verkkosovelluksessasi

3D-mallien renderöiminen verkkosovelluksissa voi tarjota useita etuja, kuten parantaa käyttökokemusta tarjoamalla realistisemman ja interaktiivisemman 3D-tuntuman. Tämän seurauksena käyttäjät voivat paremmin sitoutua tuotteeseen.

3D-elementtien renderöinnillä voi kuitenkin olla haittapuolensa, kuten negatiivinen vaikutus sovelluksen suorituskykyyn. 3D-mallien hahmontamiseen tarvitaan enemmän resursseja, mikä voi saada sovelluksesi latautumaan hitaammin.