Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A 3D renderelés bevezetése átalakította a felhasználói interakciót az internetes technológiákkal. Kezdetben a webalkalmazások magával ragadóbbakká váltak, vonzó és interaktív élményt nyújtva a webböngészőn keresztül.

Ezt a technológiát már mohón átvette a játék és a kiterjesztett/virtuális valóság területe. Valósághű és magával ragadó módot kínál a virtuális elemekkel való interakcióhoz.

Ismerje meg, hogyan lehet 3D objektumokat renderelni egy React alkalmazásban.

A 3D modellezés és programozás alapjai

Mielőtt elkezdené a 3D-s renderelést, van néhány pont, amelyet tisztában kell lennie:

  • A 3D objektumok egyedi pontokat vagy csúcsokat tartalmaznak, amelyek három dimenzióban határozzák meg szerkezetüket. E pontok összekapcsolása olyan arcokat hoz létre, amelyek az objektum alakját alkotják a képernyőn.
  • A modern böngészők beépített képességgel rendelkeznek a 3D megjelenítésére olyan technológiák használatával, mint a WebGL. Ezt úgy teszik, hogy kihasználják a gép grafikus feldolgozóegységének erejét a 3D modellek és jelenetek gyors renderelésére.
    instagram viewer
  • A böngésző által megjelenített bármely 3D objektum három fő összetevőből áll. Ezek a jelenet, a kamera és a renderer, és ezek mind döntő szerepet játszanak. A jelenet alapplatformot biztosít az összes 3D-s elem beállításához, beleértve a fényeket és a kamerákat is. A kamera lehetővé teszi a 3D objektum különböző szögekből történő megtekintését. Végül a megjelenítő felszereli és megjeleníti a jelenetet egy vászon HTML-elem tetején.

3D renderelés Three.js és React Three Fiber segítségével

Three.js egy JavaScript-könyvtár, amelyet 3D objektumok webböngészőben történő megjelenítésére használhat. Beépített összetevőinek segítségével könnyedén hozhat létre és renderelhet 3D objektumokat a böngészőben a React alkalmazás egyéb funkciói mellett.

A react-three-fiber csomag a Three.js tetején működik. Leegyszerűsíti a Three.js összetevők használatának folyamatát 3D objektumok létrehozásához és megjelenítéséhez a böngészőben. Érdekes módon egyedit is biztosít Reagálás horgok amelyek jól jöhetnek a React 3D objektumok létrehozása során.

3D objektumok renderelése React alkalmazásban

Kövesse az alábbi lépéseket egy egyszerű 3D alakzat megjelenítéséhez a böngészőjében, valamint egy Blender által létrehozott 3D modellt. Ha nem ismeri a Blendert, tanulja meg, hogyan kezdje el kezdőként.

Hozzon létre egy React alkalmazást, indítsa el a terminált az alábbi parancs futtatásához, és telepítse a szükséges függőségeket:

npm három @react-three/fiber @react-three/drei telepítése

Telepítse a Three.js, a react-three-fiber és a react-three-drei csomagokat. A react-three-drei könyvtár a react-three-fiber mellett működik 3D jelenetek és objektumok létrehozásához.

3D-s alakzat megjelenítése

Egy egyszerű 3D-s doboz alakzatot renderelhet egy böngészőben nagyon kevés kóddal. Nyissa meg a src/app.js fájlt, törölje az összes React kódot, és adja hozzá a következőket:

import Reagál tól től"reagál";
import {Vászon} tól től"@react-three/fiber";
import {OrbitControls} tól től"@react-three/drei";
funkcióDoboz() {
Visszatérés (
<háló>
<boxBufferGeometrycsatolni ="geometria" />
<meshLambertMaterialcsatolni="anyag"szín="dögös rózsaszín" />
háló>
 )
}
exportalapértelmezettfunkcióApp() {
Visszatérés (
<divosztály név="Alkalmazás">
<divosztály név="Alkalmazás fejléc">
<Vászon>
<OrbitControls />
<háttérvilágításintenzitás ={0.5} />
<reflektorfénypozíció={[10,15,10]} szög={0.3} />
<Doboz />
Vászon>
div>
div>
 );
}

Ez a kód a következőket teszi:

  • A Doboz A komponens a react-three-fiber háló, boxBufferGeometry és meshLambertMaterial összetevőit használja a 3D doboz megjelenítéséhez. Ez a három komponens kéz a kézben dolgozik a doboz alakjának kialakításában.
  • A boxBufferGeometry komponens létrehozza a dobozt, és ez a kód a meshLambertMaterial összetevő színtulajdonságát forró rózsaszínre állítja be.
  • Ezután a doboz komponenst tartalmazó Canvas elemet környezeti fénnyel, reflektorral és az Orbit Controls összetevő tulajdonságkészletével rendereli.
  • A környezeti fény összetevő tulajdonsága lágy fényt kölcsönöz a vászonnak. A spotLight komponens egy adott pozícióból fókuszált fényt ad hozzá 0,3 szögben. Végül az OrbitControls komponens lehetővé teszi a kamera vezérlését a 3D objektum körül.

Importálja és jelenítse meg az app.js összetevőt az index.js fájlban, és állítson fel egy fejlesztői kiszolgálót, hogy megtekinthesse az eredményeket a böngészőben a következő címen: http://localhost: 3000.

Rendereljen le egy Blender által létrehozott 3D-s modellt

A Blender egy nyílt forráskódú eszköz, amelyet a kreatívok különböző területeken használnak 3D modellek, vizuális effektusok és interaktív 3D alkalmazások létrehozására. A Blender segítségével 3D modelleket hozhat létre webalkalmazásához.

Ebben az oktatóanyagban egy BMW 3D modellt jelenít meg SRT teljesítmény alapján Sketchfab.

hitel: RadeonGamer/ Sketchfab
Creative Commons Nevezd meg

A kezdéshez töltse le a modellt a Sketchfab oldaláról GLTF-ben (GL Transmission Format). Ez a formátum megkönnyíti a 3D modellek megjelenítését a böngészőben. A letöltés befejezése után nyissa meg a modell mappáját, és helyezze át a modellfájlt a React alkalmazás nyilvános könyvtárába.

Most lépjen az app.js fájlba, és töltse fel az alábbi kóddal.

  • Importálja a következő összetevőket: 
    import {useGLTF, Stage, PresentationControls} tól től"@react-three/drei";
  • Hozza létre a modellkomponenst, és adja hozzá az alábbi kódot: 
    funkcióModell(kellékek){
    const {scene} = useGLTF("/bmw.glb");
    Visszatérés<primitívtárgy={színhely} {... kellékek} />
    }
    exportalapértelmezettfunkcióApp() {
    Visszatérés (
    <divosztály név="Alkalmazás">
    <divosztály név="Alkalmazás fejléc">
     dpr={[1,2]} 
     shadows camera={{kedvenc: 45}}
     style={{"pozíció": "abszolút"}}
     >
     sebesség={1,5} 
    globális zoom={0.5}
     poláris={[-0.1, Math.PI / 4]}
     >
    <Színpadkörnyezet={nulla}>
    <Modellskála={0.01} />
    Színpad>
    PresentationControls>
    Vászon>
    div>
    div>
     );
    }
  • A React-three-drei könyvtár useGLTF hookja meghatároz egy jelenetváltozót, és hozzárendeli a „/bmw.glb” elérési úton található modellfájl értékét. A komponens ezután egy primitív objektumot ad vissza, amely a 3D modell színterét fekteti le.
  • A Canvas elem a modellt alkotó fő összetevőket jeleníti meg a megadott tulajdonságokkal, például az eszköz pixelarányával (DPR), az árnyékokkal, a kamera szögével és a stílussal.
  • Ezután megadhatja a PresentationControls összetevő tulajdonságait, például a sebességet és a globális nagyítást. Ezek a tulajdonságok határozzák meg, hogyan vezérelheti a modellt a képernyőn.
  • Végül konfigurálja a Stage összetevőt, amely a modellt a böngésző képernyőjére csatlakoztatja.

Forgassa fel a fejlesztői kiszolgálót az alkalmazás módosításainak frissítéséhez. Látnia kell a modellt a böngészőjében.

3D-s modellek megjelenítése a webalkalmazásban

A 3D-s modellek webalkalmazásaiban való megjelenítése számos előnnyel járhat, például javíthatja a felhasználói élményt azáltal, hogy valósághűbb és interaktívabb 3D-s érzést nyújt. Ennek eredményeként a felhasználók jobban megismerhetik a terméket.

A 3D-s elemek megjelenítésének azonban vannak árnyoldalai is, például negatívan befolyásolhatják az alkalmazás teljesítményét. A 3D modellek megjelenítéséhez több erőforrásra van szükség, ami miatt az alkalmazás lassabban töltődik be.