Ein tiefer Einblick in React und Three.js mithilfe von „React-Three-Fiber“.

Heute lernen wir, wie Sie React react-three-fiber zum Erstellen und Anzeigen von 3D-Modellen und -Animationen in React- und React-Native-Anwendungen konfigurieren und verwenden.

Dieses Tutorial richtet sich an Entwickler, die mehr über 3D react-three-fiber Modellanimationen im Web mit React erfahren möchten, und an alle, die mit click Einschränkungen hatten, wie z react-three-fiber kommt mit diesen Methoden. Wir werden ein 3D-Modell erstellen, um besser zu verstehen, wie Three.js-3D-Modelle mithilfe von „ react-three-fiber “ erstellt werden.

Erste Schritte mit react-three-fiber

Three.js ist eine Bibliothek, die das Erstellen von 3D-Grafiken im Browser erleichtert, sie verwendet eine Leinwand + WebGL, um die 3D-Modelle und Animationen anzuzeigen, Sie können hier mehr erfahren.

React-Three-Fiber ist ein React-Renderer für Three.js im Web und React-native, es erhöht die Geschwindigkeit, mit der Sie 3D-Modelle und -Animationen mit Three.js erstellen, einige Beispiele für Websites mit 3D-Modellen und -Animationen finden Sie hier. react-three-fiber reduziert den Zeitaufwand für Animationen aufgrund seiner wiederverwendbaren Komponenten, Bindungsereignisse und Renderschleifen. Schauen wir uns zunächst an, was Three.js ist.

React react-three-fiber ermöglicht es uns, Komponenten von threeJS -Code mit React-Status, Hooks und Requisiten zu erstellen, es enthält auch die folgenden Elemente:

So verwenden Sie react-three-fiber

Um „ react-three-fiber “ zu verwenden, beginnen Sie mit den folgenden Befehlen:

NPM

 npm i three react-three-fiber

GARN

 yarn add three react-three-fiber

Hinweis : Damit react-three-fiber funktioniert, müssen Sie three (Three.js) installieren, wie wir es oben getan haben.

Erstellen eines React 3D Ludo Dice-Modells und Animationsprojekts

Hier werden wir ein 3D-Ludo-Würfelmodell mit react-three-fiber bauen, wie wir es im Video unten haben.

Wir werden create-react-app verwenden, um unser Projekt zu initialisieren, dazu führen wir den folgenden Befehl auf unserem Terminal aus.

 create-react-app react-three-fiber-ludo-model

Der obige Befehl initialisiert ein React-Projekt auf unserem lokalen Rechner, als nächstes lasst uns in das Verzeichnis cd und unsere Pakete react-three-fiber und three installieren.

 cd react-three-fiber-ludo-model npm i three react-three-fiber

Sobald die Pakete installiert sind, starten wir unseren Entwicklungsserver mit dem Befehl

 npm start

Der obige Befehl sollte unseren Projektentwicklungsserver in unserem Browser starten. Als nächstes öffnen wir unser Projekt in unserem Texteditor unserer Wahl, löschen in unserem Projekt- src -Ordner die folgenden Dateien: App.css , App.test.js , serviceWorker.js und setupTests.js . Als Nächstes löschen wir den gesamten Code, der auf die gelöschten Dateien in unserer App.js .

Für dieses Projekt benötigen wir eine Box -Komponente für unsere Ludo-Würfel und unsere App -Komponente, die von React bereitgestellt wird.

Erstellen der Box -Komponente

Die Box -Komponente enthält die Form für unsere Ludo-Würfel, ein Bild eines Ludo-Würfels und einen Zustand, um ihn immer in Rotation zu halten. Lassen Sie uns zunächst alle Pakete importieren, die wir für unsere Box -Komponente unten benötigen.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

Im obigen Code importieren wir useRef , useState und useMemo . Wir verwenden den useRef Hook, um auf das Netz der Würfel zuzugreifen, und den useState Hook, um den aktiven Zustand der Ludo-Würfel zu überprüfen. useMemo Hook wird verwendet, um die Zahl auf den Würfeln zurückzugeben. Als nächstes importieren wir Canvas und useFrame aus respond react-three-fiber , die canvas wird verwendet, um die Grafiken im Browser zu zeichnen, während useFrame es Komponenten ermöglicht, sich in die Render-Schleife einzuklinken, wodurch eine Komponente gerendert werden kann den Inhalt eines anderen. Als nächstes importierten wir das three -Paket und dann importierten wir ein statisches Bild eines Ludo-Würfels.

Als Nächstes schreiben wir Logik für unsere Box Komponente. Zuerst beginnen wir mit dem Erstellen einer funktionalen Komponente und fügen unserer Komponente einen Status hinzu, wie unten beschrieben.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

Im obigen Code erstellen wir eine Box -Komponente mit Requisiten. Als Nächstes erstellen wir eine Referenz namens mesh mit dem useRef Hook. Wir haben dies getan, damit wir jedes Mal dasselbe Mesh zurückgeben können.

Ein Mesh ist ein visuelles Element in einer Szene, es ist ein 3D-Objekt, das ein dreieckiges Polygon bildet, es wird normalerweise mit einer Geometrie erstellt, die verwendet wird, um die Form des Modells zu definieren, und einem Material , das das Erscheinungsbild des Modells definiert Erfahren Sie hier mehr über ein Mesh. Sie können auch hier mehr über den useRef Hook erfahren.

Nach der Initialisierung eines mesh müssen wir einen Zustand für unsere Anwendung mit dem useState initialisieren, hier setzen wir den schwebenden und aktiven Zustand der Anwendung auf „false“.

Als Nächstes verwenden wir den useFrame -Hook von React react-three-fiber , um das Netz (Ludo-Würfel) zu drehen, indem wir den folgenden Code verwenden

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Hier drehen wir die aktuelle Position des Netzes alle 0,01 Sekunden, um der Drehung eine gute Animation zu verleihen.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

Im obigen Code erstellen wir eine Konstante namens texture und übergeben einen useMemo Hook als Funktion zum Laden eines neuen Würfelwurfs, hier useMemo , um das Würfelbild und seine Nummer zu speichern. Hier erfahren Sie mehr über den useMemo Hook.

Als Nächstes möchten wir die Box Komponente im Browser rendern und unsere Ereignisse hinzufügen, das tun wir unten

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

Im obigen Code geben wir unsere Box -Komponente zurück und packen sie in das mesh ein. Wir haben alle Eigenschaften der Box -Komponente mit dem Spread-Operator übergeben und dann mit dem useRef Hook auf das Mesh verwiesen. Als Nächstes verwenden wir die Eigenschaft scale von Three.js, um die Größe des Würfelfelds auf 2 festzulegen, wenn es aktiv ist, und auf 1,5, wenn es nicht aktiv ist. Zu guter Letzt haben wir ein onClick -Ereignis hinzugefügt, um den state auf active zu setzen, wenn er nicht auf Standard gesetzt ist.

 <boxBufferGeometry args={[1, 1, 1]} />

Um die Würfelbox zu rendern, haben wir die boxBufferGeometry Komponente aus Three.js gerendert, boxBufferGeometry hilft uns beim Zeichnen von Linien und Punkten wie Boxen, wir haben das args -Argument verwendet, um Konstruktoren wie die Größe der Boxgeometrie zu übergeben.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

Das meshBasicMaterial von Three.js, dient zum Zeichnen von Geometrien in einfacher Form. Hier haben wir das attach -Attribut und eine THREE.DoubleSide Requisite an das side Attribut übergeben. Die THREE.DoubleSide definiert die Seiten oder Zwischenräume, die von „ react-three-fiber “ gerendert werden sollen.

 <primitive attach="map" object={texture} />

Die primitive Komponente von Three.js wird zum Zeichnen von 3D-Graphen verwendet. Wir haben die Map-Eigenschaft hinzugefügt, um die ursprüngliche Form der Ludo-Würfel beizubehalten. Als Nächstes rendern wir unsere Box -Komponente in der App.js -Datei und vervollständigen unsere 3D-Ludo-Würfelbox. Ihre Komponente sollte dem Bild unten ähneln.

Rendern von 3D-Ludo-Würfelbox

In diesem Abschnitt werden wir unsere Box -Komponente in unserer App.js und unsere 3D-Ludo-Box vervollständigen. Um das zuerst zu tun, erstellen wir eine App -Komponente und hüllen sie mit einem Canvas -Tag ein, um unsere 3D-Modelle zu rendern. machen wir das unten.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Als nächstes fügen wir den Boxen ein Licht hinzu. react-three-fiber stellt uns drei Komponenten zur Verfügung, um unsere Modelle zu beleuchten, sie sind wie folgt

• ambientLight
  Dies wird verwendet, um alle Objekte in einer Szene oder einem Modell gleichmäßig zu beleuchten, es akzeptiert Requisiten wie die Intensität des Lichts, dies wird den Körper des Ludo-Würfels beleuchten.
• spotLight
  Dieses Licht wird aus einer einzigen Richtung emittiert und nimmt mit zunehmender Größe des Objekts zu, wodurch die Punkte der Ludo-Würfel beleuchtet werden.
• pointLight
  Dies funktioniert ähnlich wie das Licht einer Glühbirne, Licht wird von einem einzigen Punkt in alle Richtungen abgegeben, dies wird für den aktiven Zustand unserer Anwendung benötigt.

Lassen Sie uns das Obige in unserer Anwendung unten implementieren.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

Im obigen Code haben wir die ambientLight -Komponente aus „ react-three-fiber “ importiert und ihr eine Intensität von 0,5 hinzugefügt. Als nächstes haben wir unserer spotLight und pointLight Komponente eine Position und einen Winkel hinzugefügt. Der letzte Schritt unserer Anwendung ist das Rendern unserer Box-Komponente und das Hinzufügen einer Position zu den Ludo-Würfelboxen, wir würden dies im folgenden Code tun

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

Wenn Sie fertig sind, sollten Ihre Ludo-3D-Würfel ähnlich wie das Bild unten aussehen:

Eine funktionierende Demo ist auf CodeSandbox verfügbar.

Fazit

React react-three-fiber hat das Rendern von 3D-Modellen und -Animationen für React- und React-Native-Anwendungen einfacher erstellt. Durch den Bau unserer 3D-Ludo-Würfelbox haben wir die Grundlagen von Three.js sowie seine Komponenten und Vorteile von react-three-fiber sowie seine Verwendung kennengelernt.

Sie können dies weiterführen, indem Sie 3D-Modelle und -Animationen in Ihren React- und Native-Anwendungen erstellen, indem Sie React react-three-fiber selbst verwenden. Ich würde mich freuen, zu sehen, was für neue Dinge Sie sich einfallen lassen!

Weitere Informationen zu Three.js und react-three-fiber finden Sie in den folgenden Referenzen.

Ähnliche Resourcen

• Three.js-Dokumentation
• Three.js-Grundlagen
• React-Three-fiber GitHub Repo von Poimandres
• reagieren-Drei-Faser-Dokumentation
• React Hooks (useState, useMemo usw.) offizielle Dokumentation