Jak vykreslit 3D objekty v aplikaci React

Zavedení 3D vykreslování změnilo interakci uživatele s internetovými technologiemi. Pro začátek se webové aplikace staly více pohlcujícími a poskytují poutavý a interaktivní zážitek prostřednictvím webového prohlížeče.

Tato technologie již byla dychtivě přijata v oblasti her a rozšířené/virtuální reality. Nabízí realistický a pohlcující způsob interakce s virtuálními prvky.

Zjistěte, jak vykreslit 3D objekty v aplikaci React.

Základy 3D modelování a programování

Než začnete s 3D vykreslováním, je třeba si uvědomit několik bodů:

• 3D objekty obsahují jednotlivé body nebo vrcholy, které definují jejich strukturu ve třech rozměrech. Spojením těchto bodů vytvoříte plochy, které tvoří tvar objektu na obrazovce.
• Moderní prohlížeče mají vestavěnou schopnost vykreslovat 3D pomocí technologií, jako je WebGL. Dělají to tak, že využívají výkon grafické procesorové jednotky ve vašem počítači k rychlému vykreslování 3D modelů a scén.
instagram viewer
• Jakýkoli 3D objekt, který váš prohlížeč vykresluje, se skládá ze tří hlavních komponent. Jedná se o scénu, kameru a renderer a všechny hrají zásadní roli. Scéna poskytuje základní platformu pro nastavení všech vašich 3D prvků, včetně světel a kamer. Kamera umožňuje sledovat 3D objekt z různých úhlů. Nakonec vykreslovací modul připojí a zobrazí scénu nad elementem HTML plátna.

3D vykreslování pomocí Three.js a React Three Fiber

Three.js je knihovna JavaScript, kterou můžete použít k vykreslování 3D objektů ve webovém prohlížeči. Pomocí jeho vestavěných komponent můžete snadno vytvářet a vykreslovat 3D objekty ve vašem prohlížeči spolu s dalšími funkcemi vaší aplikace React.

Balíček reakce-tři vlákna funguje nad Three.js. Zjednodušuje proces používání komponent Three.js k vytváření a vykreslování 3D objektů v prohlížeči. Zajímavé je, že poskytuje i vlastní Reagovat háčky které se hodí při vytváření 3D objektů v Reactu.

Vykreslování 3D objektů v aplikaci React

Chcete-li vykreslit jednoduchý 3D tvar ve svém prohlížeči, stejně jako 3D model vytvořený v Blenderu, postupujte podle následujících kroků. Pokud neznáte Blender, naučit se, jak začít jako začátečník.

Vytvořte aplikaci React, spusťte svůj terminál pro spuštění níže uvedeného příkazu a nainstalujte požadované závislosti:

npm nainstalujte tři @react-three/fiber @react-three/drei

Nainstalujte balíčky Three.js, reagovat-tři-vlákna a reagovat-tři-drei. Knihovna Reag-Three-drei funguje společně s Reag-Three-Fiber a vytváří 3D scény a objekty.

Vykreslení 3D tvaru

Jednoduchý 3D tvar krabice můžete vykreslit v prohlížeči s velmi malým množstvím kódu. Otevři src/app.js soubor, odstraňte veškerý standardní kód React a přidejte následující:

import Reagovat z"reagovat";
import {Plátno} z"@react-3/vlákno";
import {OrbitControls} z"@react-3/drei";
funkceBox() {
vrátit se (
<pletivo>
<boxBufferGeometrypřipojit ="geometrie" />
<síťovinaLambertMateriálpřipojit="materiál"barva="hotpink" />
pletivo>
 )
}
vývoznívýchozífunkceAplikace() {
vrátit se (
<divjméno třídy="Aplikace">
<divjméno třídy="Záhlaví aplikace">
<Plátno>
<OrbitControls />
<ambientLightintenzita ={0.5} />
<bodové světlopozice={[10,15,10]} úhel={0.3} />
<Box />
Plátno>
div>
div>
 );
}

Tento kód dělá následující:

• The Box komponenta používá k vykreslení 3D boxu komponenty mesh, boxBufferGeometry a meshLambertMaterial z Reag-3-vlákna. Tyto tři komponenty pracují ruku v ruce na vytvoření tvaru krabice.
• Komponenta boxBufferGeometry vytvoří rámeček a tento kód nastaví vlastnost barvy komponenty meshLambertMaterial na růžovou.
• Poté vykreslí prvek Canvas, ve kterém je umístěna komponenta boxu, pomocí okolního světla, reflektoru a sady vlastností komponenty Orbit Controls.
• Vlastnost komponenty okolního světla dodává plátnu měkké světlo. Komponenta spotLight přidává zaostřené světlo z konkrétní pozice s úhlem 0,3. A konečně, komponenta OrbitControls vám umožňuje ovládat kameru kolem 3D objektu.

Importujte a vykreslujte komponentu app.js v souboru index.js a roztočte vývojový server, abyste si mohli prohlédnout výsledky ve svém prohlížeči na adrese http://localhost: 3000.

Renderujte 3D model vytvořený v Blenderu

Blender je open-source nástroj, který používají kreativci v různých oblastech k vytváření 3D modelů, vizuálních efektů a interaktivních 3D aplikací. Blender můžete použít k vytváření 3D modelů pro vaši webovou aplikaci.

V tomto tutoriálu vykreslíte 3D model BMW podle výkonu SRT dostupný na Sketchfab.

Chcete-li začít, stáhněte si model ze Sketchfab ve formátu GLTF (GL Transmission Format). Tento formát usnadňuje vykreslování 3D modelů v prohlížeči. Po dokončení stahování otevřete složku modelu a přesuňte soubor modelu do veřejného adresáře v aplikaci React.

Nyní přejděte ke svému souboru app.js a vyplňte jej níže uvedeným kódem.

• Importujte následující komponenty:

  import {useGLTF, Stage, PresentationControls} z"@react-3/drei";

• Vytvořte komponentu modelu a přidejte níže uvedený kód:

  funkceModelka(rekvizity){
  konst {scéna} = useGLTF("/bmw.glb");
  vrátit se<primitivníobjekt={scéna} {...rekvizity} />
  }
  vývoznívýchozífunkceAplikace() {
  vrátit se (
  <divjméno třídy="Aplikace">
  <divjméno třídy="Záhlaví aplikace">
   dpr={[1,2]} 
   shadows camera={{fav: 45}}
   styl={{"pozice": "absolutní"}}
   >
   rychlost={1,5} 
  globální zoom={0.5}
   polární={[-0.1, Matematika.PI / 4]}
   >
  <Etapaživotní prostředí={nula}>
  <Modelkaměřítko={0.01} />
  Etapa>
  PresentationControls>
  Plátno>
  div>
  div>
   );
  }
  

• Hák useGLTF z knihovny React-three-drei definuje proměnnou scény a přiřadí jí hodnotu souboru modelu umístěného na cestě "/bmw.glb". Komponenta pak vrátí primitivní objekt, který položí scénu pro 3D model.
• Prvek Canvas vykresluje hlavní komponenty, které tvoří model, se zadanými vlastnostmi, jako je poměr pixelů zařízení (DPR), stíny, úhel kamery a styl.
• Poté určíte vlastnosti komponenty PresentationControls, jako je rychlost a globální zoom. Tyto vlastnosti definují, jak budete model ovládat na obrazovce.
• Nakonec nakonfigurujte komponentu Stage, která připojí model na obrazovku prohlížeče.

Roztočte vývojový server a aktualizujte změny ve vaší aplikaci. Měli byste vidět model vykreslený ve vašem prohlížeči.

Vykreslování 3D modelů ve vaší webové aplikaci

Vykreslování 3D modelů ve vašich webových aplikacích může nabídnout několik výhod, jako je zlepšení uživatelského zážitku poskytnutím realističtějšího a interaktivnějšího 3D pocitu. Díky tomu mohou uživatelé s produktem lépe pracovat.

Vykreslování 3D prvků však může mít své stinné stránky, jako je negativní ovlivnění výkonu aplikace. 3D modely vyžadují k vykreslení více prostředků, což může způsobit pomalejší načítání aplikace.