Donner vie à un manuel de biologie avec React et Three.js

Vous souvenez-vous de ces ennuyeux schémas de cellules dans les manuels scolaires ? Des images plates avec une multitude de flèches, où les mitochondries ressemblent à des pantoufles et le noyau n'est qu'un simple cercle. À un moment donné, vous réalisez que les images statiques ne parviennent tout simplement pas à montrer comment tout est organisé en trois dimensions. Le développeur cclank a résolu ce problème en créant Cell Architecture Studio. C'est une galerie interactive qui transforme l'étude de la cytologie en exploration de modèles 3D directement dans le navigateur.

Ce que c'est

Le projet est un studio interactif où vous pouvez examiner sept types de cellules : des neurones et bactéries aux cellules végétales et leucocytes. Ce n'est pas qu'un simple visualiseur de fichiers 3D. L'auteur a construit une véritable application éducative avec des descriptions détaillées des organites, des modes de comparaison, et même les prémices d'un tuteur IA.

Pourquoi devrions-nous, en tant que développeurs, nous y intéresse r ? D'abord, c'est un excellent exemple de la façon d'associer React 19 à des graphiques Three.js lourds. Ensuite, il y a une implémentation intéressante des tests visuels ici. Si vous avez déjà cassé une scène 3D après une mise à jour des styles, vous trouverez quelque chose qui mérite d'être regardé dans le code source.

Ce que le studio peut faire

L'application possède plusieurs fonctionnalités qui la distinguent des scènes de démonstration ordinaires.

Détail et modes de visualisation

Les modèles les plus détaillés sont la cellule végétale et le leucocyte. Ils se chargent au format GLB avec les textures natives préservées. Il y a deux modes principaux :

1. Mesh : visualisation standard du modèle avec tous les détails.
2. Focus : un mode qui met en évidence des organites spécifiques, en supprimant le bruit visuel inutile. C'est utile quand vous avez besoin d'étudier, par exemple, uniquement l'appareil de Golgi.

Interface intelligente

Le projet inclut un Tuteur IA. Pour l'instant, c'est plutôt un concept avec des invites pré-écrites et un suivi des progrès, mais cela montre la direction vers laquelle se dirige le logiciel éducatif. Il y a un panneau de comparaison où vous pouvez comparer la structure de différentes cellules, et des fiches de métadonnées détaillées pour chaque objet.

3D adaptatif

Les développeurs ont souvent du mal à intégrer le Canvas dans les mises en page mobiles. Ici, trois variantes de mise en page sont implémentées : bureau, compact et mobile. Et ce n'est pas juste testé « à l'œil » — c'est vérifié avec des captures d'écran automatisées.

La pile technique sous le capot

Le projet est construit sur une pile moderne, aucun code legacy :

• React 19 et TypeScript : la base la plus récente.
• Vite : pour des builds rapides.
• Three.js + React Three Fiber (R3F) : la norme de facto pour la 3D sur le web.
• Drei : une bibliothèque d'aide pour R3F qui gère le travail routinier comme le chargement des modèles.
• Playwright Core : utilisé pour la vérification visuelle.

Point intéressant : si l'utilisateur a une connexion lente et qu'un modèle GLB lourd n'a pas encore fini de se télécharger, l'application ne plante pas et n'affiche pas un écran vide. À la place, un repli procédural se déclenche — une géométrie simplifiée est générée avec Three.js simple en attendant que les actifs principaux se chargent.

Comment vérifier l'intégrité visuelle

Habituellement, les tests vérifient la logique, mais dans les projets 3D, il est important que l'image ne « dérive » pas. Il y a un script verify.mjs dans le dépôt. Il lance Playwright, prend des captures d'écran à différentes résolutions, et compare les métriques de pixels dans le Canvas. Cela vous permet de détecter les bugs quand un modèle ne s'affiche pas ou que l'interface chevauche des contrôles importants.

Pour exécuter la vérification vous-même :

1. Démarrez un serveur local : npm run dev
2. Dans un autre terminal, exécutez : npm run verify

Le script vérifiera le rendu de la cellule végétale, le leucocyte, et la fonctionnalité de la fenêtre modale. C'est un bon exemple de la façon d'automatiser le QA dans les applications graphiques.

Qui devrait explorer ce projet

Je recommanderais de regarder le code dans deux cas. Si vous commencez juste à travailler avec React Three Fiber, vous pouvez reprendre la structure correcte des composants et la gestion des événements dans la scène. Et si vous travaillez sur des projets EdTech, Cell Architecture Studio est une référence prête à l'emploi pour ce qu'un manuel numérique moderne devrait ressembler.

Bien sûr, le projet est encore au stade de prototype. Tous les cellules n'ont pas de modèles de haute qualité prêts, et la documentation est concise par endroits. Mais comme base pour une plateforme éducative ou comme exemple d'intégration de 3D complexe dans une application React — c'est un travail très solide.

Vous pouvez essayer la démo en direct ici, et le code source est dans le dépôt de cclank.