Jak renderować obiekty 3D w aplikacji React
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.
- 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ż niestandardowe haki React, 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 install three @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. Otwórz plik src/app.js , usuń cały szablonowy kod React i dodaj:
import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";
function Box() {
return (
<mesh>
<boxBufferGeometry attach ="geometry" />
<meshLambertMaterial attach="material" color="hotpink" />
</mesh>
)
}
export default function App() {
return (
<div className="App">
<div className="App-header">
<Canvas>
<OrbitControls />
<ambientLight intensity ={0.5} />
<spotLight position={[10, 15,10]} angle={0.3} />
<Box />
</Canvas>
</div>
</div>
);
}
Ten kod wykonuje następujące czynności:
- Komponent Box 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ść color 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ępnej w Sketchfab .
Creative Commons Uznanie autorstwa
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, Stage, PresentationControls} from "@react-three/drei"; - Utwórz komponent modelu i dodaj poniższy kod:
function Model(props){
const {scene} = useGLTF("/bmw.glb");
return <primitive object={scene} {...props} />
}
export default function App() {
return (
<div className="App">
<div className="App-header">
<Canvas
dpr={[1,2]}
shadows camera={{fav: 45}}
style={{"position": "absolute"}}
>
<PresentationControls
speed={1.5}
global zoom={0.5}
polar={[-0.1, Math.PI / 4]}
>
<Stage environment={null}>
<Model scale={0.01} />
</Stage>
</PresentationControls>
</Canvas>
</div>
</div>
);
} - 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.
Dodaj komentarz