Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

3D-renderduse kasutuselevõtt on muutnud kasutajate suhtlust Interneti-tehnoloogiatega. Alustuseks on veebirakendused muutunud kaasahaaravamaks, pakkudes veebibrauseri kaudu kaasahaaravat ja interaktiivset kogemust.

Seda tehnoloogiat on mängu- ja liit-/virtuaalreaalsuse valdkond juba innukalt omaks võtnud. See pakub realistlikku ja kaasahaaravat viisi virtuaalsete elementidega suhtlemiseks.

Siit saate teada, kuidas renderdada 3D-objekte Reacti rakenduses.

3D-modelleerimise ja programmeerimise põhitõed

Enne 3D-renderdamisega alustamist peate teadma mõnda punkti.

  • 3D-objektid sisaldavad üksikuid punkte ehk tippe, mis määravad nende struktuuri kolmemõõtmeliselt. Nende punktide ühendamine loob näod, mis moodustavad ekraanil objekti kuju.
  • Kaasaegsetel brauseritel on sisseehitatud võimalus 3D-kujundamiseks, kasutades selliseid tehnoloogiaid nagu WebGL. Nad kasutavad seda teie masina graafilise töötlusüksuse võimsust kasutades, et 3D-mudeleid ja stseene kiiresti renderdada.
    instagram viewer
  • Kõik 3D-objektid, mida teie brauser renderdab, koosneb kolmest põhikomponendist. Need on stseen, kaamera ja renderdaja ning neil kõigil on oluline roll. Stseen pakub baasplatvormi kõigi 3D-elementide, sealhulgas tulede ja kaamerate seadistamiseks. Kaamera võimaldab vaadata 3D-objekti erinevate nurkade alt. Lõpuks paigaldab ja kuvab renderdaja stseeni lõuendi HTML-elemendi peal.

3D-renderdamine Three.js ja React Three Fiber abil

Three.js on JavaScripti teek, mida saate kasutada 3D-objektide renderdamiseks veebibrauseris. Selle sisseehitatud komponentide abil saate hõlpsasti luua ja renderdada oma brauseris 3D-objekte koos Reacti rakenduse muude funktsioonidega.

React-three-fiber pakett töötab Three.js-i peal. See lihtsustab Three.js-i komponentide kasutamist brauseris 3D-objektide loomiseks ja renderdamiseks. Huvitav on see, et see pakub ka kohandatud Reageeri konksud mis tulevad kasuks Reactis 3D-objektide loomisel.

3D-objektide renderdamine React-rakenduses

Järgige allolevaid samme, et renderdada brauseris lihtsat 3D-kujundit ja ka Blenderi loodud 3D-mudelit. Kui te pole Blenderiga tuttav, õppige, kuidas algajana alustada.

Looge rakendus React, käivitage oma terminal alloleva käsu käivitamiseks ja installige vajalikud sõltuvused:

npm installi kolm @react-three/fiber @react-three/drei

Installige paketid Three.js, react-three-fiber ja react-three-drei. React-three-drei teek töötab koos react-three-fiber'iga, et luua 3D-stseene ja -objekte.

3D-kujundi renderdamine

Saate brauseris väga vähese koodiga renderdada lihtsa 3D-kasti kujundi. Ava src/app.js faili, kustutage kogu reageerimiskood ja lisage järgmine:

importida Reageerige alates"reageerida";
importida {Canvas} alates"@react-three/fiber";
importida {OrbitControls} alates"@react-three/drei";
funktsiooniKast() {
tagasi (
<võrk>
<boxBufferGeomeetriakinnitada ="geomeetria" />
<võrkLambertMaterjalkinnitada="materjal"värvi="soe roosa" />
võrk>
 )
}
eksportidavaikimisifunktsiooniRakendus() {
tagasi (
<divklassi nimi="Rakendus">
<divklassi nimi="Rakenduse päis">
<Lõuend>
<OrbitControls />
<ambientLightintensiivsusega ={0.5} />
<kohtvalguspositsiooni={[10,15,10]} nurk={0.3} />
<Kast />
Lõuend>
div>
div>
 );
}

See kood teeb järgmist:

  • The Kast komponent kasutab 3D-kasti renderdamiseks react-three-fiber komponente võrgusilma, boxBufferGeometry ja meshLambertMaterial. Need kolm komponenti töötavad käsikäes, et luua karbi kuju.
  • Komponent boxBufferGeometry loob kasti ja see kood määrab komponendi meshLambertMaterial värviomaduse kuumaks roosaks.
  • Seejärel renderdab see elemendi Canvas, mis sisaldab kasti komponenti koos ümbritseva valguse, prožektori ja komponendi atribuutide komplektiga Orbit Controls.
  • Ümbritseva valguse komponendi omadus lisab lõuendile pehmet valgust. SpotLighti komponent lisab fokuseeritud valgust konkreetsest positsioonist nurgaga 0,3. Lõpuks võimaldab OrbitControlsi komponent teil juhtida kaamerat 3D-objekti ümber.

Importige ja renderdage failis index.js komponent app.js ning looge arendusserver, et vaadata tulemusi brauseris aadressil http://localhost: 3000.

Renderdage Blenderis loodud 3D-mudel

Blender on avatud lähtekoodiga tööriist, mida eri valdkondade loojad kasutavad 3D-mudelite, visuaalsete efektide ja interaktiivsete 3D-rakenduste loomiseks. Blenderi abil saate luua oma veebirakenduse jaoks 3D-mudeleid.

Selle õpetuse jaoks muudate BMW 3D mudeli SRT jõudluse järgi kättesaadavaks: Sketchfab.

Krediit: RadeonGamer/ Sketchfab
Creative Commonsi omistamine

Alustuseks laadige mudel Sketchfabist alla GLTF-is (GL Transmission Format). See vorming muudab 3D-mudelite brauseris renderdamise lihtsaks. Kui allalaadimine on lõppenud, avage mudeli kaust ja teisaldage mudeli fail oma Reacti rakenduses avalikku kataloogi.

Nüüd minge oma faili app.js juurde ja sisestage see alloleva koodiga.

  • Importige järgmised komponendid: 
    importida {useGLTF, Stage, PresentationControls} alates"@react-three/drei";
  • Looge mudeli komponent ja lisage allolev kood: 
    funktsiooniMudel(rekvisiidid){
    konst {scene} = useGLTF("/bmw.glb");
    tagasi<primitiivneobjektiks={stseen} {...rekvisiidid} />
    }
    eksportidavaikimisifunktsiooniRakendus() {
    tagasi (
    <divklassi nimi="Rakendus">
    <divklassi nimi="Rakenduse päis">
     dpr={[1,2]} 
     shadows camera={{lemmik: 45}}
     style={{"positsioon": "absoluutne"}}
     >
     kiirus={1,5} 
    globaalne zoom={0.5}
     polar={[-0.1, matemaatika.PI / 4]}
     >
    <Lavakeskkond={null}>
    <Mudelkaal={0.01} />
    Lava>
    PresentationControls>
    Lõuend>
    div>
    div>
     );
    }
  • Teegi React-three-drei konks useGLTF määrab stseenimuutuja ja määrab sellele teel "/bmw.glb" asuva mudelifaili väärtuse. Seejärel tagastab komponent primitiivse objekti, mis loob 3D-mudeli stseeni.
  • Element Canvas renderdab peamised komponendid, mis moodustavad mudeli koos määratud omadustega, nagu seadme pikslite suhe (DPR), varjud, kaamera nurk ja stiil.
  • Seejärel määrate komponendi PresentationControls atribuudid, nagu kiirus ja globaalne suum. Need atribuudid määravad, kuidas mudelit ekraanil juhtida.
  • Lõpuks konfigureerige Stage'i komponent, mis mudeli brauseriekraanile kinnitab.

Rakenduse muudatuste värskendamiseks keerake arendusserver üles. Peaksite nägema oma brauseris renderdatud mudelit.

3D-mudelite renderdamine teie veebirakenduses

3D-mudelite renderdamine veebirakendustes võib pakkuda mitmeid eeliseid, nagu näiteks kasutajakogemuse parandamine, pakkudes realistlikumat ja interaktiivsemat 3D-tunnet. Selle tulemusena saavad kasutajad tootega paremini suhelda.

3D-elementide renderdamisel võib aga olla ka oma varjukülg, näiteks võib see rakenduse jõudlust negatiivselt mõjutada. 3D-mudelite renderdamiseks on vaja rohkem ressursse, mistõttu võib teie rakendus aeglasemalt laadida.