Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Wprowadzenie renderowania 3D zmieniło sposób interakcji użytkowników z technologiami internetowymi. Po pierwsze, aplikacje internetowe stały się bardziej wciągające, zapewniając wciągające i interaktywne wrażenia za pośrednictwem przeglądarki internetowej.

Technologia ta została już chętnie przyjęta w dziedzinie gier i rzeczywistości rozszerzonej/wirtualnej. Oferuje realistyczny i wciągający sposób interakcji z wirtualnymi elementami.

Dowiedz się, jak renderować obiekty 3D w aplikacji React.

Podstawy modelowania i programowania 3D

Zanim zaczniesz renderować 3D, musisz wiedzieć o kilku kwestiach:

  • Obiekty 3D zawierają pojedyncze punkty lub wierzchołki, które definiują ich strukturę w trzech wymiarach. Połączenie tych punktów tworzy twarze, które składają się na kształt obiektu na ekranie.
  • Nowoczesne przeglądarki mają wbudowaną możliwość renderowania 3D przy użyciu technologii takich jak WebGL. Robią to, wykorzystując moc procesora graficznego w twoim komputerze do szybkiego renderowania modeli 3D i scen.
    instagram viewer
  • Każdy obiekt 3D renderowany przez przeglądarkę składa się z trzech głównych elementów. Są to scena, kamera i renderer, i wszystkie one odgrywają kluczową rolę. Scena zapewnia podstawową platformę do konfigurowania wszystkich elementów 3D, w tym świateł i kamer. Kamera umożliwia oglądanie obiektu 3D pod różnymi kątami. Na koniec moduł renderowania montuje i wyświetla scenę na górze elementu HTML płótna.

Renderowanie 3D za pomocą Three.js i React Three Fibre

Three.js to biblioteka JavaScript, której można używać do renderowania obiektów 3D w przeglądarce internetowej. Korzystając z wbudowanych komponentów, możesz łatwo tworzyć i renderować obiekty 3D w swojej przeglądarce wraz z innymi funkcjami aplikacji React.

Pakiet react-three-fiber działa na Three.js. Upraszcza proces używania komponentów Three.js do tworzenia i renderowania obiektów 3D w przeglądarce. Co ciekawe, zapewnia również custom Haki reakcji które przydają się podczas tworzenia obiektów 3D w React.

Renderowanie obiektów 3D w aplikacji React

Wykonaj poniższe czynności, aby wyrenderować prosty kształt 3D w przeglądarce, a także model 3D utworzony w Blenderze. Jeśli nie znasz Blendera, dowiedz się, jak zacząć jako początkujący.

Utwórz aplikację React, uruchom terminal, aby uruchomić poniższe polecenie i zainstaluj wymagane zależności:

npm zainstaluj trzy @react-three/fiber @react-three/drei

Zainstaluj pakiety Three.js, react-three-fiber i react-three-drei. Biblioteka React-Three-Drei współpracuje z React-Three-Fiber do tworzenia scen i obiektów 3D.

Renderuj kształt 3D

Możesz renderować prosty kształt pudełka 3D w przeglądarce z bardzo małą ilością kodu. Otworzyć źródło/aplikacja.js plik, usuń cały kocioł kodu React i dodaj:

import Reagować z"reagować";
import {Płótno} z"@react-three/włókno";
import {Elementy sterowania orbitą} z"@react-three/drei";
funkcjonowaćSkrzynka() {
powrót (
<siatka>
<boxBufferGeometryprzytwierdzać ="geometria" />
<siatkaLambertMateriałprzytwierdzać="materiał"kolor="gorący róż" />
siatka>
 )
}
eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
<dzNazwa klasy=„Aplikacja”>
<dzNazwa klasy=„Nagłówek aplikacji”>
<Płótno>
<Sterowanie orbitą />
<światła otoczeniaintensywność ={0.5} />
<reflektorpozycja={[10,15,10]} kąt={0.3} />
<Skrzynka />
Płótno>
dz>
dz>
 );
}

Ten kod wykonuje następujące czynności:

  • The Skrzynka Component wykorzystuje komponenty mesh, boxBufferGeometry i meshLambertMaterial z react-three-fiber do renderowania pudełka 3D. Te trzy elementy współpracują ze sobą, tworząc kształt pudełka.
  • Komponent boxBufferGeometry tworzy pudełko, a ten kod ustawia właściwość koloru komponentu meshLambertMaterial na gorący róż.
  • Następnie renderuje element Canvas, w którym znajduje się komponent pudełkowy, ze światłem otoczenia, reflektorem i zestawem właściwości komponentu Orbit Controls.
  • Właściwość komponentu światła otoczenia dodaje miękkie światło do płótna. Komponent spotLight dodaje skupione światło z określonej pozycji pod kątem 0,3. Wreszcie komponent OrbitControls pozwala sterować kamerą wokół obiektu 3D.

Zaimportuj i wyrenderuj komponent app.js w pliku index.js i uruchom serwer programistyczny, aby wyświetlić wyniki w przeglądarce pod adresem http://localhost: 3000.

Renderuj model 3D utworzony w Blenderze

Blender to narzędzie typu open source używane przez twórców z różnych dziedzin do tworzenia modeli 3D, efektów wizualnych i interaktywnych aplikacji 3D. Możesz użyć Blendera do tworzenia modeli 3D dla swojej aplikacji internetowej.

W tym samouczku wyrenderujesz model 3D BMW według wydajności SRT dostępny na Sketchfab.

Źródło: RadeonGamer/ Sketchfab
Uznanie autorstwa Creative Commons

Aby rozpocząć, pobierz model ze Sketchfab w formacie GLTF (GL Transmission Format). Ten format ułatwia renderowanie modeli 3D w przeglądarce. Po zakończeniu pobierania otwórz folder modelu i przenieś plik modelu do katalogu publicznego w aplikacji React.

Teraz przejdź do pliku app.js i wypełnij go poniższym kodem.

  • Zaimportuj następujące komponenty: 
    import {useGLTF, scena, sterowanie prezentacją} z"@react-three/drei";
  • Utwórz komponent modelu i dodaj poniższy kod: 
    funkcjonowaćModel(rekwizyty){
    konst {scena} = użyjGLTF("/bmw.glb");
    powrót<prymitywnyobiekt={scena} {...rekwizyty} />
    }
    eksportdomyślnyfunkcjonowaćAplikacja() {
    powrót (
    <dzNazwa klasy=„Aplikacja”>
    <dzNazwa klasy=„Nagłówek aplikacji”>
     dpr={[1,2]} 
     kamera cieni={{ulubiona: 45}}
     styl={{"pozycja": "absolutny"}}
     >
     prędkość={1.5} 
    światowy zoom={0.5}
     polarny={[-0.1, Matematyka.LICZBA PI / 4]}
     >
    <Scenaśrodowisko={zero}>
    <Modelskala={0.01} />
    Scena>
    Elementy sterujące prezentacji>
    Płótno>
    dz>
    dz>
     );
    }
  • Haczyk useGLTF z biblioteki React-three-drei definiuje zmienną sceny i przypisuje jej wartość pliku modelu znajdującego się w ścieżce „/bmw.glb”. Następnie komponent zwraca prymitywny obiekt, który tworzy scenę dla modelu 3D.
  • Element Canvas renderuje główne składniki tworzące model z określonymi właściwościami, takimi jak współczynnik pikseli urządzenia (DPR), cienie, kąt kamery i styl.
  • Następnie określasz właściwości składnika PresentationControls, takie jak szybkość i globalny zoom. Te właściwości określają, w jaki sposób będziesz sterować modelem na ekranie.
  • Na koniec skonfiguruj komponent Stage, który montuje model na ekranie przeglądarki.

Uruchom serwer deweloperski, aby zaktualizować zmiany w aplikacji. Powinieneś zobaczyć model wyrenderowany w przeglądarce.

Renderowanie modeli 3D w Twojej aplikacji internetowej

Renderowanie modeli 3D w aplikacjach internetowych może przynieść kilka korzyści, takich jak poprawa doświadczenia użytkownika poprzez zapewnienie bardziej realistycznego i interaktywnego wrażenia 3D. W rezultacie użytkownicy mogą lepiej angażować się w produkt.

Jednak renderowanie elementów 3D może mieć swoje wady, takie jak negatywny wpływ na wydajność aplikacji. Modele 3D wymagają więcej zasobów do renderowania, co może powodować wolniejsze ładowanie aplikacji.