Wie Sie einfaches ThreeJS in Ihren React-Apps verwenden können.

Integrieren Sie ThreeJS-Code in eine React-Anwendung, ohne auf React Bindings zurückgreifen zu müssen.

In diesem Beitrag werden wir ein einfaches Beispiel für die Integration zwischen einfachem ThreeJS und ReactJS zeigen. Wir werden React-Bindings nicht für ThreeJS verwenden, weil ThreeJS einfach mehr Flexibilität bietet und einfacher zu bedienen ist.

Wir werden den ThreeJS-Code nach dem hier vorgestellten Entity/Component-Muster strukturieren, aber Sie müssen nicht wissen, wie das funktioniert, um diesen Beitrag verstehen zu können.

Sie können ThreeJS von npm herunterladen und es mit npm install three zu Ihrer Anwendung hinzufügen oder mit yarn add three (wenn Sie yarn statt npm verwenden).

React-Komponente.

Zuerst müssen wir die React-Komponente erstellen, die die Canvas und ThreeJS-Anwendung hostet.

Das div-Element wird der Container vom Canvas sein (es ist vorteilhaft, das Canvas aus JavaScript zu erstellen, es ermöglicht mehr Flexibilität).

Zudem verwenden wir das ref-Attribut, um eine Referenz auf das div-Element zu erhalten.

Wir überlassen dieses .threeRootElement (die Referenz auf das div) der Funktion threeEntryPoint(). Diese Funktion wird aufgerufen, wenn die Funktion componentDidMount() automatisch von React aufgerufen wird, wenn die Komponente eingebunden wird.

Nun lassen Sie uns sehen, was threeEntryPoint eigentlich ist.

Verlassen der React-Welt.

ThreeEntryPoint ist eine Funktion, die außerhalb von React lebt und sich nicht darum kümmert. Für das, was es weiß, könnte es von jeder Web-App aufgerufen werden, gebaut mit einem beliebigen Framework oder überhaupt keinem Framework.

ThreeEntryPoint ist eine Funktion, die ein Dom-Element als Parameter nimmt, dieses Element wird der Container des Canvas sein.

Die Funktion threeEntryPoint ist zuständig für:

1. Erstellen des Canvas.
2. Binding Events.
3. Erstellen von ThreeJS-Objekten.
4. Starten des Render-Loops.

SceneManager ist das Objekt, das für die Logik von ThreeJS verantwortlich ist. Es ist der Einstiegspunkt in den ThreeJS-Teil der App.

Sie können in resizeCanvas() sehen, dass das Canvas 100% Breite und Höhe hat. Dadurch füllt das Canvas Ihr Containerelement. Der Container kann mit CSS einfach in der Größe verändert werden, wie Sie es normalerweise in React mit jedem Element tun würden.

ThreeJS.

SceneManager ist eine Funktion, die den aktuellen ThreeJS-Code enthält.

Wie Sie im Snippet unten sehen können, nimmt diese Funktion (in diesem Fall hat die Funktion keinen Namen, aber es ist ein SceneManager) einen Canvas auf und gibt ein Objekt zurück. Das Objekt stellt die Funktionen zur Verfügung, die nach außen sichtbar sein müssen, d.h. die publiken Funktionen.

(Wir haben nicht den gesamten ThreeJS-Code kopiert, weil dieser ziemlich einfach und leicht zu verstehen ist, was jede Funktion macht, wenn man ihren Namen liest).

Dieses Muster für private und publike Funktionen ist nur eine persönliche Wahl. Vielleicht ist es einfacher zu visualisieren, wenn man sich das folgende Snippet ansieht:

Wenn Sie es vorziehen, können Sie Klassen (oder was auch immer Ihre persönliche Präferenz ist) verwenden, um private und publike Methoden zu verwenden. Sie können sogar alles publik machen.

Schlußfolgerungen.

Mit diesem Ansatz können Sie portablen ThreeJS-Code haben, der mit jedem Framework oder ohne Framework funktionieren kann. Sie können mit ThreeJS so weiterarbeiten, wie Sie es von normalen HTML-Seiten gewohnt sind, und gleichzeitig die Übersichtlichkeit und Struktur genießen, die React Ihren Webanwendungen bietet.

Vielen Dank für Ihren Besuch.