Een biologiehandboek tot leven brengen met React en Three.js
Herinner je je die saaie celdiagrammen in schoolboeken? Platte plaatjes met een heleboel pijlen, waarbij mitochondriën er uitzien als pantoffels en de celkern gewoon een gewone cirkel is. Op een gegeven moment besef je dat statische afbeeldingen gewoon niet laten zien hoe alles driedimensionaal is gerangschikt. Ontwikkelaar cclank heeft dit probleem opgelost door Cell Architecture Studio te maken. Het is een interactieve galerij die de studie van celbiologie omzet in het verkennen van 3D-modellen rechtstreeks in de browser.
Wat het is
Het project is een interactieve studio waar je zeven soorten cellen kunt bekijken: van neuronen en bacteriën tot plantencellen en leukocyten. Dit is niet zomaar een 3D-bestandsviewer. De auteur heeft een volwaardige educatieve app-interface gebouwd met gedetailleerde beschrijvingen van organellen, vergelijkingsmodi en zelfs de eerste aanzet tot een AI-tutor.
Waarom zouden wij, als ontwikkelaars, hierom geven? Ten eerste is het een geweldig voorbeeld van hoe je React 19 kunt combineren met zware Three.js-graphics. Ten tweede is er een interessante implementatie van visuele testing. Als je ooit een 3D-scène hebt gebroken na het updaten van styles, dan vind je hier iets de moeite waard in de broncode.
Wat de studio kan doen
De app heeft verschillende functies die hem onderscheiden van gewone demo-scenes.
Detail- en viewmodi
De meest gedetailleerde modellen zijn de plantencel en leukocyt. Deze worden geladen in GLB-formaat met behouden native textures. Er zijn twee hoofdmodi:
- Mesh: standaard model bekijken met alle details.
- Focus: een modus die specifieke organellen uitlicht en onnodige visuele ruis verwijdert. Dit is handig wanneer je bijvoorbeeld alleen de Golgi-apparaat wilt bestuderen.
Slimme interface
Het project bevat een AI Tutor. Voor nu is het meer een concept met vooraf geschreven prompts en voortgangsregistratie, maar het toont de richting waarin educatieve software zich beweegt. Er is een vergelijkingspaneel waar je de structuur van verschillende cellen kunt vergelijken, en gedetailleerde metadatakaarten voor elk object.
Responsive 3D
Ontwikkelaars worstelen vaak met het inpassen van Canvas in mobiele layouts. Hier zijn drie layoutvarianten geïmplementeerd: desktop, compact en mobiel. En dit wordt niet zomaar "met het oog" getest — het wordt geverifieerd met geautomatiseerde screenshots.
Technische stack onder de motorkap
Het project is gebouwd op een moderne stack, geen legacy code:
- React 19 en TypeScript: de nieuwste basis.
- Vite: voor snelle builds.
- Three.js + React Three Fiber (R3F): de de facto standaard voor 3D op het web.
- Drei: een helper-bibliotheek voor R3F die routinematig werk afhandelt zoals het laden van modellen.
- Playwright Core: gebruikt voor visuele verificatie.
Interessant punt: als de gebruiker trage internet heeft en een zwaar GLB-model nog niet klaar is met downloaden, crasht de app niet of toont een zwart scherm. In plaats daarvan treedt een procedurele fallback in werking — vereenvoudigde geometrie wordt gegenereerd met plain Three.js terwijl de hoofdassets laden.
Hoe visuele integriteit verifiëren
Meestal controleren tests logica, maar in 3D-projecten is het belangrijk dat het beeld niet "drijft". Er is een script verify.mjs in de repository. Het start Playwright, maakt screenshots op verschillende resoluties en vergelijkt pixelmetrieken in Canvas. Hiermee kun je bugs opsporen wanneer een model niet rendert of de UI belangrijke controls overlapt.
Om de verificatie zelf uit te voeren:
- Start een lokale server:
npm run dev - In een andere terminal, run:
npm run verify
Het script controleert de plantencel-render, leukocyt en modal window-functionaliteit. Dit is een goed voorbeeld van hoe je QA kunt automatiseren in grafische applicaties.
Wie zou dit project moeten verkennen
Ik zou aanraden om de code te bekijken in twee gevallen. Als je net begint met werken met React Three Fiber, kun je de juiste componentstructuur en event handling binnen de scene oppikken. En als je werkt aan EdTech-projecten, is Cell Architecture Studio een kant-en-klare referentie voor hoe een modern digitaal leerboek eruit zou moeten zien.
Natuurlijk is het project nog in prototype-status. Niet alle cellen hebben hoogwaardige modellen klaar, en de documentatie is beknopt op sommige plekken. Maar als fundament voor een educatief platform of als voorbeeld van het integreren van complexe 3D in een React-app — dit is zeer solide werk.
Je kunt de live demo hier proberen, en de broncode staat in cclank's repository.
Gerelateerde projecten