Cell Architecture Studio: Explore Biology in 3D, Open Source

Smars
Open Source , Web
06 Jun, 2026

Biology textbooks have a problem.

The diagrams are flat. The organelles are labeled with arrows that point to the same location as three other arrows. The spatial relationships between structures — how the endoplasmic reticulum folds around the nucleus, how mitochondria float in the cytoplasm — are explained in paragraphs you read while staring at a static illustration.

Cell Architecture Studio solves this. It’s an interactive 3D cell biology gallery built with React and Three.js. Pick a cell type, rotate it, zoom into its organelles, switch to Focus mode to study a single structure. Everything is rendered in real time.

What It Shows

Seven specimen views, each with its own 3D model:

Plant cell — high-fidelity GLB rendering with preserved native textures
White blood cell — also GLB, detailed surface features
Animal cell — from NIH source data
Neuron — with visible axon and dendrite structures
Bacteria wall — cross-section visualization
Epithelial cell — epithelial layer architecture
Muscle cell — elongated fiber structure

Each cell type loads either a production GLB model (when available) or a procedural Three.js geometry fallback. The UI shows which is which.

Two View Modes

The app has a Mesh mode and a Focus mode. Mesh is the default — full 3D canvas view with OrbitControls. Focus mode zeros in on selected organelles, dimming the rest and surfacing biological details.

An AI Tutor panel runs alongside the 3D view. It surfaces learning prompts, tracks mastery, and lets you ask questions about what you’re seeing. The combination of 3D exploration and conversational explanation is what makes this feel less like a textbook and more like a lab visit.

Tech Stack

React 19, TypeScript, Vite. Three.js rendered through React Three Fiber and Drei. CSS modules for styling. GLB models stored in public/models/.

The highest-fidelity models — Plant Cell and White Blood Cell — are loaded from local GLB files with native texture preservation. Other specimens (Neuron, Bacteria Wall, Animal Cell) use NIH-sourced or procedural geometry. The app shows a loading overlay for large GLB files on slower networks.

A comparison mode lets you switch between cell types side by side. There’s a detail panel for organelle metadata, microscope mode filters, and specimen info.

Verification Pipeline

The project ships a Playwright-based visual verification script. npm run verify captures desktop, compact, and mobile screenshots, then checks canvas pixel metrics for blank renders or layout regressions. Current coverage:

Desktop, compact, and mobile smoke checks
Plant Cell GLB render check
White Blood Cell GLB render check
Bacteria mesh interaction check
Comparison modal check

This matters because 3D rendering is hard to test. A model that fails to load might still render — as an empty canvas. Pixel metrics catch what unit tests miss.

Who Built It

by cclank, inspired by the biology illustrator Dilum Sanjaya. It’s MIT licensed as application code, with model assets retaining their documented provenance in docs/ASSETS.md.