Dare vita a un libro di biologia con React e Three.js

Ricordi quei noiosi diagrammi delle cellule sui libri di scuola? Immagini piatte con un sacco di frecce, dove i mitocondri sembrano pantofole e il nucleo è solo un cerchio normale. A un certo punto ti rendi conto che le immagini statiche non riescono a trasmettere come tutto è organizzato in tre dimensioni. Il developer cclank ha risolto questo problema creando Cell Architecture Studio. È una galleria interattiva che trasforma lo studio della citologia nell'esplorazione di modelli 3D direttamente nel browser.

Cos'è

Il progetto è uno studio interattivo dove puoi esaminare sette tipi di cellule: dai neuroni e batteri alle cellule vegetali e leucociti. Non è solo un visualizzatore di file 3D. L'autore ha costruito un'interfaccia completa di app educativa con descrizioni dettagliate degli organuli, modalità di confronto e persino i primi elementi di un tutor AI.

Perché dovremmo, come sviluppatori, preoccuparcene? Prima di tutto, è un ottimo esempio di come accoppiare React 19 con grafica Three. js pesante. In secondo luogo, c'è un'implementazione interessante del testing visivo qui. Se hai mai rotto una scena 3D dopo aver aggiornato gli stili, troverai qualcosa di interessante nel codice sorgente.

Cosa può fare lo studio

L'app ha diverse funzionalità che la distinguono dalle scene demo ordinarie.

Dettaglio e modalità di visualizzazione

I modelli più dettagliati sono la cellula vegetale e il leucocita. Vengono caricati in formato GLB con le texture native preservate. Ci sono due modalità principali:

1. Mesh: visualizzazione standard del modello con tutti i dettagli.
2. Focus: una modalità che evidenzia organuli specifici, rimuovendo il rumore visivo non necessario. È utile quando devi studiare, ad esempio, solo l'apparato del Golgi.

Interfaccia intelligente

Il progetto include un AI Tutor. Per ora è più un concetto con prompt pre-scritti e tracciamento dei progressi, ma mostra la direzione verso cui sta andando il software educativo. C'è un pannello di confronto dove puoi confrontare la struttura di cellule diverse, e schede di metadati dettagliate per ogni oggetto.

3D responsivo

Gli sviluppatori spesso faticano a integrare Canvas nei layout mobile. Qui sono implementate tre varianti di layout: desktop, compatto e mobile. E questo non è solo testato "a occhio" — è verificato con screenshot automatizzati.

Lo stack tecnico sotto il cofano

Il progetto è costruito su uno stack moderno, nessun codice legacy:

• React 19 e TypeScript: le fondamenta più recenti.
• Vite: per build veloci.
• Three.js + React Three Fiber (R3F): lo standard de facto per il 3D sul web.
• Drei: una libreria helper per R3F che gestisce il lavoro di routine come il caricamento dei modelli.
• Playwright Core: utilizzato per la verifica visiva.

Punto interessante: se l'utente ha una connessione lenta e un modello GLB pesante non ha ancora finito di scaricare, l'app non va in crash né mostra una schermata vuota. Invece, entra in gioco un fallback procedurale — viene generata una geometria semplificata con Three. js puro mentre le risorse principali vengono caricate.

Come verificare l'integrità visiva

Di solito i test verificano la logica, ma nei progetti 3D è importante che l'immagine non "derivi". C'è uno script verify.mjs nel repository. Lancia Playwright, acquisisce screenshot a diverse risoluzioni e confronta le metriche dei pixel in Canvas. Questo ti permette di catturare bug quando un modello non riesce a renderizzare o l'interfaccia si sovrappone ai controlli importanti.

Per eseguire la verifica tu stesso:

1. Avvia un server locale: npm run dev
2. In un altro terminale, esegui: npm run verify

Lo script verificherà il rendering della cellula vegetale, il leucocita e la funzionalità della finestra modale. Questo è un buon esempio di come automatizzare il QA nelle applicazioni grafiche.

Chi dovrebbe esplorare questo progetto

Consiglierei di guardare il codice in due casi. Se stai appena iniziando a lavorare con React Three Fiber, puoi apprendere la struttura corretta dei componenti e la gestione degli eventi nella scena. E se stai lavorando su progetti EdTech, Cell Architecture Studio è un riferimento pronto all'uso per come dovrebbe apparire un moderno libro di testo digitale.

Ovviamente, il progetto è ancora in fase di prototipo. Non tutte le cellule hanno modelli di alta qualità pronti e la documentazione è concisa in alcuni punti. Ma come base per una piattaforma educativa o come esempio di integrazione di 3D complesso in un'app React — questo è un lavoro molto solido.

Puoi provare la demo live qui, e il codice sorgente è nel repository di cclank.