Ein Biologie-Lehrbuch zum Leben erwecken mit React und Three.js

Erinnern Sie sich an diese langweiligen Zellendiagramme in Schulbüchern? Flache Bilder mit Pfeilen, in denen Mitochondrien wie Hausschuhe aussehen und der Zellkern nur ein gewöhnlicher Kreis ist. Irgendwann wird einem klar, dass statische Bilder einfach nicht vermitteln können, wie alles in drei Dimensionen angeordnet ist. Entwickler cclank hat dieses Problem gelöst, indem er Cell Architecture Studio geschaffen hat – eine interaktive Galerie, die das Studium der Zytologie in das Erkunden von 3D-Modellen direkt im Browser verwandelt.

Was es ist

Das Projekt ist ein interaktives Studio, in dem Sie sieben Zelltypen untersuchen können: von Neuronen und Bakterien bis zu Pflanzenzellen und Leukozyten. Dies ist nicht nur ein 3D-Dateibetrachter. Der Autor hat eine vollwertige Bildungs-App-Oberfläche mit detaillierten Beschreibungen von Organellen, Vergleichsmodi und sogar den Anfängen eines KI-Tutors entwickelt.

Warum sollte uns das als Entwickler interessieren? Erstens ist es ein großartiges Beispiel dafür, wie man React 19 mit rechenintensiver Three.js-Grafik kombiniert. Zweitens gibt es hier eine interessante Implementierung von visuellem Testen. Wenn Sie schon einmal eine 3D-Szene nach einem Style-Update beschädigt haben, werden Sie im Quellcode etwas Interessantes finden.

Was das Studio kann

Die App hat mehrere Funktionen, die sie von gewöhnlichen Demo-Szenen unterscheiden.

Detail- und Ansichtsmodi

Die detailliertesten Modelle sind die Pflanzenzelle und der Leukozyt. Sie werden im GLB-Format mit erhaltenen nativen Texturen geladen. Es gibt zwei Hauptmodi:

1. Mesh: Standardmodellansicht mit allen Details.
2. Focus: Ein Modus, der bestimmte Organellen hervorhebt und unnötige visuelle Ablenkungen entfernt. Dies ist nützlich, wenn Sie zum Beispiel nur den Golgi-Apparat studieren möchten.

Intelligente Oberfläche

Das Projekt enthält einen AI Tutor. Für jetzt ist es eher ein Konzept mit vordefinierten Prompts und Fortschrittsverfolgung, aber es zeigt die Richtung, in die Bildungssoftware sich entwickelt. Es gibt ein Vergleichspanel, in dem Sie die Struktur verschiedener Zellen vergleichen können, sowie detaillierte Metadatenkarten für jedes Objekt.

Responsives 3D

Entwickler haben oft Probleme damit, Canvas in mobile Layouts einzupassen. Hier wurden drei Layout-Varianten implementiert: Desktop, Compact und Mobile. Und das wird nicht nur „nach Augenmaß" getestet – es wird mit automatisierten Screenshots verifiziert.

Technischer Stack unter der Haube

Das Projekt basiert auf einem modernen Stack, kein Legacy-Code:

• React 19 und TypeScript: die neueste Grundlage.
• Vite: für schnelle Builds.
• Three.js + React Three Fiber (R3F): der De-facto-Standard für 3D im Web.
• Drei: eine Hilfsbibliothek für R3F, die Routineaufgaben wie das Laden von Modellen übernimmt.
• Playwright Core: wird für visuelle Verifikation verwendet.

Interessanter Punkt: Wenn der Benutzer langsames Internet hat und ein schweres GLB-Modell noch nicht fertig heruntergeladen wurde, stürzt die App nicht ab und zeigt keinen leeren Bildschirm. Stattdessen wird ein prozeduraler Fallback aktiviert – vereinfachte Geometrie wird mit reinem Three.js generiert, während die Haupt-Assets laden.

Wie man die visuelle Integrität verifiziert

Normalerweise überprüfen Tests Logik, aber bei 3D-Projekten ist es wichtig, dass das Bild nicht „driftet". Es gibt ein Script verify.mjs im Repository. Es startet Playwright, macht Screenshots in verschiedenen Auflösungen und vergleicht Pixelmetriken im Canvas. So können Sie Fehler erkennen, wenn ein Modell nicht rendert oder die UI wichtige Steuerungen überlagert.

Um die Verifikation selbst auszuführen:

1. Starten Sie einen lokalen Server: npm run dev
2. In einem anderen Terminal ausführen: npm run verify

Das Script überprüft das Pflanzenzell-Rendering, den Leukozyten und die Modal-Fenster-Funktionalität. Dies ist ein gutes Beispiel dafür, wie man QA in Grafikanwendungen automatisiert.

Für wen ist dieses Projekt interessant

Ich würde empfehlen, den Code in zwei Fällen anzuschauen. Wenn Sie gerade erst mit React Three Fiber beginnen, können Sie sich die richtige Komponentenstruktur und Ereignisbehandlung innerhalb der Szene aneignen. Und wenn Sie an EdTech-Projekten arbeiten, ist Cell Architecture Studio eine fertige Referenz dafür, wie ein modernes digitales Lehrbuch aussehen sollte.

Natürlich befindet sich das Projekt noch im Prototyp-Status. Nicht alle Zellen haben hochwertige Modelle bereit, und die Dokumentation ist stellenweise knapp. Aber als Grundlage für eine Bildungsplattform oder ein Beispiel für die Integration von komplexem 3D in eine React-App – das ist sehr solide Arbeit.

Sie können die Live-Demo hier ausprobieren, und der Quellcode befindet sich im Repository von cclank.