Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Die Einführung von 3D-Rendering hat die Benutzerinteraktion mit Internettechnologien verändert. Zunächst einmal sind Web-Apps immersiver geworden und bieten ein fesselndes und interaktives Erlebnis über den Webbrowser.

Diese Technologie wurde bereits eifrig von den Bereichen Gaming und Augmented/Virtual Reality übernommen. Es bietet eine realistische und immersive Möglichkeit, mit virtuellen Elementen zu interagieren.

Erfahren Sie, wie Sie 3D-Objekte in einer React-Anwendung rendern.

Die Grundlagen der 3D-Modellierung und -Programmierung

Bevor Sie mit dem 3D-Rendering beginnen, müssen Sie einige Punkte beachten:

  • 3D-Objekte enthalten einzelne Punkte oder Eckpunkte, die ihre Struktur in drei Dimensionen definieren. Durch das Verbinden dieser Punkte entstehen Flächen, die die Form des Objekts auf dem Bildschirm ausmachen.
  • Moderne Browser verfügen über die integrierte Fähigkeit, 3D mithilfe von Technologien wie WebGL zu rendern. Sie tun dies, indem sie die Leistung der grafischen Verarbeitungseinheit in Ihrem Computer nutzen, um 3D-Modelle und Szenen schnell zu rendern.
    instagram viewer
  • Jedes 3D-Objekt, das Ihr Browser darstellt, besteht aus drei Hauptkomponenten. Dies sind die Szene, die Kamera und der Renderer, und sie alle spielen eine entscheidende Rolle. Die Szene bietet die Basisplattform zum Einrichten all Ihrer 3D-Elemente, einschließlich Lichter und Kameras. Mit der Kamera können Sie das 3D-Objekt aus verschiedenen Blickwinkeln betrachten. Zuletzt stellt der Renderer die Szene auf einem Canvas-HTML-Element bereit und zeigt sie an.

3D-Rendering mit Three.js und React Three Fiber

Drei.js ist eine JavaScript-Bibliothek, die Sie zum Rendern von 3D-Objekten in einem Webbrowser verwenden können. Mit den integrierten Komponenten können Sie neben anderen Funktionen Ihrer React-Anwendung problemlos 3D-Objekte in Ihrem Browser erstellen und rendern.

Das Paket „react-three-fiber“ arbeitet auf Three.js. Es vereinfacht den Prozess der Verwendung von Three.js-Komponenten zum Erstellen und Rendern von 3D-Objekten im Browser. Interessanterweise bietet es auch benutzerdefinierte Haken reagieren die sich beim Erstellen von 3D-Objekten in React als nützlich erweisen.

Rendern von 3D-Objekten in einer React-Anwendung

Befolgen Sie die nachstehenden Schritte, um eine einfache 3D-Form in Ihrem Browser sowie ein mit Blender erstelltes 3D-Modell zu rendern. Wenn Sie mit Blender nicht vertraut sind, lernen, wie man als Anfänger loslegt.

Erstellen Sie eine React-Anwendung, starten Sie Ihr Terminal, um den folgenden Befehl auszuführen, und installieren Sie die erforderlichen Abhängigkeiten:

npm installiere drei @react-three/fiber @react-three/drei

Installieren Sie die Pakete „Three.js“, „react-three-fiber“ und „react-three-drei“. Die React-Three-Drei-Bibliothek arbeitet mit React-Three-Fiber zusammen, um 3D-Szenen und -Objekte zu erstellen.

Rendern Sie eine 3D-Form

Sie können eine einfache 3D-Boxform in einem Browser mit sehr wenig Code rendern. Öffne das src/app.js Datei, löschen Sie den gesamten Boilerplate-React-Code und fügen Sie Folgendes hinzu:

importieren Reagieren aus"reagieren";
importieren {Leinwand} aus"@react-three/fiber";
importieren {OrbitControls} aus"@react-three/drei";
FunktionKasten() {
zurückkehren (
<Gittergewebe>
<boxBufferGeometryanfügen ="Geometrie" />
<meshLambertMaterialanfügen="Material"Farbe="hotpink" />
Gittergewebe>
 )
}
ExportStandardFunktionApp() {
zurückkehren (
<divKlassenname="App">
<divKlassenname="App-Header">
<Leinwand>
<OrbitControls />
<UmgebungslichtIntensität ={0.5} />
<ScheinwerferPosition={[10,15,10]} Winkel={0.3} />
<Kasten />
Leinwand>
div>
div>
 );
}

Dieser Code macht Folgendes:

  • Der Kasten -Komponente verwendet die Komponenten mesh, boxBufferGeometry und meshLambertMaterial von React-Three-Fiber, um eine 3D-Box zu rendern. Diese drei Komponenten arbeiten Hand in Hand, um die Form der Schachtel zu erzeugen.
  • Die boxBufferGeometry-Komponente erstellt die Box und dieser Code setzt die color-Eigenschaft der meshLambertMaterial-Komponente auf Hot Pink.
  • Anschließend wird das Canvas-Element, in dem sich die Box-Komponente befindet, mit Umgebungslicht, einem Scheinwerfer und dem Eigenschaftensatz der Orbit Controls-Komponente gerendert.
  • Die Eigenschaft Umgebungslichtkomponente fügt der Leinwand ein weiches Licht hinzu. Die spotLight-Komponente fügt ein fokussiertes Licht von einer bestimmten Position mit einem Winkel von 0,3 hinzu. Schließlich können Sie mit der OrbitControls-Komponente die Kamera um das 3D-Objekt herum steuern.

Importieren und rendern Sie die app.js-Komponente in der index.js-Datei und starten Sie einen Entwicklungsserver, um die Ergebnisse in Ihrem Browser anzuzeigen http://localhost: 3000.

Rendern Sie ein mit Blender erstelltes 3D-Modell

Blender ist ein Open-Source-Tool, das von Kreativen in verschiedenen Bereichen verwendet wird, um 3D-Modelle, visuelle Effekte und interaktive 3D-Anwendungen zu erstellen. Sie können Blender verwenden, um 3D-Modelle für Ihre Webanwendung zu erstellen.

Für dieses Tutorial stellen Sie sich ein BMW 3D-Modell von SRT Performance zur Verfügung Sketchfab.

Bildnachweis: RadeonGamer/ Sketchfab
Creative Commons Namensnennung

Laden Sie zunächst das Modell von Sketchfab im GLTF (GL Transmission Format) herunter. Dieses Format erleichtert das Rendern von 3D-Modellen im Browser. Sobald der Download abgeschlossen ist, öffnen Sie den Ordner des Modells und verschieben Sie die Datei des Modells in das öffentliche Verzeichnis Ihrer React-Anwendung.

Gehen Sie jetzt zu Ihrer app.js-Datei und füllen Sie sie mit dem folgenden Code aus.

  • Importieren Sie die folgenden Komponenten: 
    importieren {useGLTF, Stage, PresentationControls} aus"@react-three/drei";
  • Erstellen Sie die Modellkomponente und fügen Sie den folgenden Code hinzu: 
    FunktionModell(Requisiten){
    konst {Szene} = useGLTF("/bmw.glb");
    zurückkehren<PrimitiveObjekt={Szene} {...Requisiten} />
    }
    ExportStandardFunktionApp() {
    zurückkehren (
    <divKlassenname="App">
    <divKlassenname="App-Header">
     dpr={[1,2]} 
     Schattenkamera = {{fav: 45}}
     Stil={{"Position": "absolut"}}
     >
     Geschwindigkeit = {1,5} 
    global zoom={0.5}
     polar={[-0.1, Mathematik.PI / 4]}
     >
    <BühneUmfeld={Null}>
    <ModellSkala={0.01} />
    Bühne>
    PresentationControls>
    Leinwand>
    div>
    div>
     );
    }
  • Der useGLTF-Hook aus der React-three-drei-Bibliothek definiert eine Szenenvariable und weist ihr den Wert der Modelldatei zu, die sich im Pfad "/bmw.glb" befindet. Die Komponente gibt dann ein primitives Objekt zurück, das die Szene für das 3D-Modell legt.
  • Das Canvas-Element rendert die Hauptkomponenten, aus denen das Modell besteht, mit den angegebenen Eigenschaften, wie z. B. Gerätepixelverhältnis (DPR), Schatten, Kamerawinkel und Stil.
  • Anschließend legen Sie die Eigenschaften der PresentationControls-Komponente wie Geschwindigkeit und globaler Zoom fest. Diese Eigenschaften definieren, wie Sie das Modell auf dem Bildschirm steuern.
  • Konfigurieren Sie abschließend die Stage-Komponente, die das Modell auf dem Browserbildschirm bereitstellt.

Starten Sie den Entwicklungsserver, um die Änderungen an Ihrer Anwendung zu aktualisieren. Sie sollten das Modell in Ihrem Browser gerendert sehen.

Rendern von 3D-Modellen in Ihrer Webanwendung

Das Rendern von 3D-Modellen in Ihren Webanwendungen kann mehrere Vorteile bieten, wie z. B. die Verbesserung der Benutzererfahrung durch Bereitstellung eines realistischeren und interaktiveren 3D-Gefühls. Dadurch können Benutzer besser mit dem Produkt interagieren.

Das Rendern von 3D-Elementen kann jedoch auch Nachteile haben, z. B. negative Auswirkungen auf die Leistung der Anwendung. 3D-Modelle erfordern mehr Ressourcen zum Rendern, was dazu führen kann, dass Ihre App langsamer geladen wird.