Jeder, der sich mit Web-3D-Technologien beschäftigt hat, hat bestimmt schon von Three.js gehört. Three.js ist ein Tool, mit dem man bequem die ganze Leistungsfähigkeit von WebGL nutzen kann, so dass eine 3D-Szene nicht nur gut aussieht, sondern auch sauber und für jeden Entwickler gut lesbar geschrieben ist. Bekannterweise werden 3D-Inhalte im WebGL-Kontext gerendert, der vom canvas DOM-Element bereitgestellt wird. Der WebGL-Kontext hat eine empirische API, während eine der beliebtesten JS UI-Bibliotheken, React, einen funktionalen, deklarativen Ansatz propagiert. Man wird sich also fragen: Kann ich auch deklarativ mit WebGL arbeiten? Seien wir keine Spielverderber - das sollte man nicht!
React Three Fiber ist im Grunde ein React-Wrapper für Three.js. Man kann einfach alles schreiben, was man auch mit Vanilla Three.js schreiben kann, während die React-Codierungsstandards und dieallgemeine Lesbarkeit auf einem hohen Niveau bleiben. Außerdem nutzt ThreeFiber alle modernen React-Entwicklungsfunktionen und bietet eine umfangreicheSchnittstelle über benutzerdefinierte Hooks und Props-Infrastruktur.
Wie funktioniert das? Wenn man bereits mit Three.js gearbeitet haben, sollten man sich daranerinnern, dass man die Szene und die Kamera erstellen muss. Dann richtet man Raycasting für die Interaktion mit Ihren 3D-Elementen ein, eineRendering-Schleife für Animationen, wahrscheinlich auch Tone Mapping und dieHandhabung der Bildschirmgröße. React Three Fiber macht das von Haus aus, wenn man ein <Canvas />-Element erstellt. Wenn man Objekte hinzufügt -Three.js macht im Grunde dasselbe. Es kompiliert den deklarativen Code im React-Stil in zwingenden nativen Three.js-Code, der dem Client zur Verfügung gestellt wird.
Um denUnterschied zu zeigen, werde ich eine kleine Szene mit React Three Fiber und normalem Three.js schreiben. Um den folgenden Code zu verstehen, sollte man mit den grundlegenden Konzepten der 3D-Modellierung und -Entwicklung vertraut sein, wie Szene, Kamera, Mesh, Geometrie und Material.
Hier ist es - nureine kleine Client-Anwendung mit zwei rotierenden Würfeln.
So sieht es miteinfachem Three.js aus:
Man kann auf diese Weise alles schreiben, was man möchte, aber das ist immer noch nicht der bequemste Weg, um mit 3D zu arbeiten. Was ist mit der React-Implementierung? So sieht es mit React aus:
Viel sauberer, denke ich. Wenn man Komplexität, wie onClickoder Hover-Aktionen zum Beispiel hinzufügen möchte - mit nativen Three.js mussman ein ziemlich kompliziertes Raycasting-System schreiben.
Wenn man jedoch ein React-Entwickler ist und React Three Fiber verwendet, kann man dies leicht mit Attributen vermeiden, die für jeden Entwickler intuitiv verständlich sind -onClick, onPointerOver und onPointerOut:
Die Verwendung von Three.js scheint der Traum eines jeden React-Entwicklers zu sein, allerdings muss man die Besonderheiten des <canvas>-Renderings berücksichtigen, wenn man React Context verwenden möchte. Three.js-Elemente mit React. Three Fiber kann die eigenen Requisiten auch von außerhalb der Canvas-Umgebung problemlos akzeptieren.
Zuallererst muss man jedoch die Konzepte der 3D-Szenenarchitektur und Three.js verstehen, um mit der Arbeit beginnen zu können. Die Art der Vorerfahrungen spielt dabei keine große Rolle. Man kann Erfahrung mit Three.js oder mit der Entwicklung von Spielen mit modernen Gamedev-Engines haben, aber man sollte ein solides Verständnis der Prinzipien der 3D-Entwicklung haben, bevor man mit React Three Fiber beginnt. Die Community ist nicht sehr umfangreich, so dass man viele Lösungen selbst finden muss.
Außerdem sollte man bedenken, dass die APIs von DOM- und WebGL-Renderern nicht miteinander verbunden sind. Das bedeutet im Grunde, dass man, wenn man React Context verwendet und seine Requisiten tiefer an React Three Fiber-Komponenten weitergeben möchte, einen Kontextanbieter innerhalb Ihrer WebGL-Umgebung unter der <Canvas />-Komponente hinzufügen muss. Wenn man versucht, es ohne einen dedizierten Provider für die Canvas-Elemente zu verwenden, wird man keine Kontextdaten erhalten.
Nicht zuletzt musst man die Optimierung im Auge behalten - am besten von Anfang an. Es gibt viele verschiedene Strategien zur Optimierung von 3D-Inhalten, z. B. On-Demand-Rendering, Auslösen manueller Frames, Wiederverwendung von Geometrie und Materialien, Leistungsskalierung, Instanzierung, Geometrie-Caching usw. Aber das ist wohl ein Thema für einen anderen Blog. Hier kann man mehr darüber lesen.
Wie man sieht, kann man mit React Three Fiber nicht nur den gleichen Funktionscode schreiben, sondern diesen auch viel sauberer halten und sich das Schreiben von Logik für eine so grundlegende Funktionalität wie Hover und Click sparen. Man sollte nicht vergessen, verschiedene Dokument- und Canvas-Kontexte zu berücksichtigen, und seiner Kreativität freien Lauf lassen um sich mit React und der beliebtesten WebGL-basierten Bibliothek auszudrücken!
