Ein React-Renderer für Three.js (Web- und React-Native)

Blog

Ein React-Renderer für Three.js (Web- und React-Native)

reagieren-drei-faser

React-Three-Faser ist ein React Renderer für Threejs im Web und reaktiv-nativ.



npm install three react-three-fiber

Diese Demos sind echt, Sie können sie anklicken! Sie enthalten auch den vollständigen Code.



Wieso den?

Das deklarative Erstellen dynamischer Szenendiagramme mit wiederverwendbaren Komponenten erleichtert den Umgang mit Threejs und bringt Ordnung und Klarheit in Ihre Codebasis. Diese Komponenten reagieren auf Zustandsänderungen, sind sofort interaktiv und können das unendliche Ökosystem von React anzapfen.

Hat es Einschränkungen?

Keiner. Alles, was in Threejs funktioniert, wird hier funktionieren. Im Gegensatz zu Bindungen, bei denen eine Bibliothek Dutzende von Wrapper-Komponenten ausliefert/unterhält, rendert sie JSX nur dynamisch in Threejs: |_+_| einfach ist ein anderer Ausdruck für |_+_|. Es kennt oder zielt nicht auf eine bestimmte Threejs-Version ab und benötigt auch keine Updates für geänderte, hinzugefügte oder entfernte Upstream-Funktionen.



Ist es langsamer als rohe Threejs?

Nein. Die Rendering-Leistung beträgt bis zu drei js und die GPU. Komponenten nehmen außerhalb von React am Renderloop teil, ohne zusätzlichen Overhead. React ist ansonsten sehr effizient beim Erstellen und Verwalten von Komponentenbäumen, es könnte möglicherweise manuelle/unerlässliche Apps in großem Maßstab übertreffen.

Wie sieht es aus?

| Lassen Sie uns eine wiederverwendbare Komponente erstellen, die einen eigenen Status hat, auf Benutzereingaben reagiert und an der Render-Schleife teilnimmt. ( Live-Demo ). | |

TypeScript-Beispiel anzeigen

new THREE.Mesh()

FEUER

Grundlagen

  1. Stellen Sie sicher, dass Sie eine Grundkenntnisse von Threejs . Halten Sie diese Website geöffnet.
  2. Wenn Sie wissen, was eine Szene ist, eine Kamera, ein Netz, eine Geometrie, ein Material, eine Gabelung Demo oben .
  3. Schau hoch die JSX-Elemente, die Sie sehen (Mesh, ambientLight usw.), alle Threejs-Exporte stammen aus drei Fasern.
  4. Versuchen Sie, einige Werte zu ändern, scrollen Sie durch unsere Feuer um zu sehen, was die verschiedenen Einstellungen und Hooks bewirken.

Etwas Lesestoff:

Ökosystem

Download-Details:

Autor: pmndrs

Demo: https://github.com/pmndrs/react-three-fiber/discussions

Quellcode: https://github.com/pmndrs/react-three-fiber

#reagieren #reagieren-native #mobile-apps