Cell Architecture Studio: a React and Three.js cell gallery for the browser

What Cell Architecture Studio actually solves

Most 3D biology demos on the web are a single rotating mesh with a caption. Cell Architecture Studio takes the opposite position: it treats the specimen as one panel in a larger study interface. The README lists seven specimen views (plant cell, white blood cell, neuron, epithelial cell, bacteria cell, animal cell, muscle cell) and pairs each with a detail panel for organelles, microscope modes, specimen metadata and a comparison workflow. On top of that sit quiz modes, flashcards, a searchable gallery, a favorites library and study notebooks, with local XP progression and daily challenges.

The audience is therefore narrow but real. It is for someone building an educational biology interface who needs a reference implementation of the rendering plus the surrounding chrome, not for a student who wants a finished revision app. The status badge in the README says local prototype, and that label should be taken literally: this is a codebase to read and fork, not a hosted course.

How the rendering pipeline is put together

The stack is React 19 with TypeScript and Vite, and the 3D layer is Three.js through React Three Fiber and Drei. CSS modules live in src/styles.css and icons come from Lucide. The interesting part is the asset split. High-fidelity specimens load from public/models/ and are configured in src/data/cells.ts. The README names five files: plant-cell-first001.glb, white-blood-cell-user.glb, animal-cell-nih.glb, neuron-nih.glb and bacteria-wall-nih.glb. The plant cell and white blood cell are described as the highest fidelity, with native texture preservation.

Everything else falls back to procedural Three.js geometry, which is why the README ships a Model loading overlay for large GLB assets on slower networks. Transparent PNGs in public/cell-renders-transparent/ serve as thumbnails and model previews. There are two preview modes, Mesh and Focus; Mesh is the default and loads GLB models or procedural geometry, while Focus emphasizes selected organelles. A verification script, scripts/verify.mjs, captures screenshots and checks canvas pixel metrics to catch blank renders. That pixel check is the most transferable idea in the repository: it catches the failure mode that unit tests on a 3D canvas never see.

Installing Cell Architecture Studio and loading your first specimen

The README gives a standard Vite workflow. Clone the repository, then install dependencies with npm. The package is not published to a registry, so there is no global install step.

npm install

Start the development server with the dev script. The README states the app opens at http://127.0.0.1:5173/, which is Vite's default port.

npm run dev

For a production bundle, the build script runs the TypeScript compiler in build mode before Vite bundles the app, so type errors stop the build rather than being stripped.

npm run build

The visual verification step is separate from the unit tests and expects the app to already be running, because it drives a real browser rather than a headless DOM. It uses Google Chrome through Playwright Core.

npm run dev
APP_URL=http://127.0.0.1:5174/ npm run verify

The APP_URL override matters when Vite picks a different port because 5173 is occupied. If Chrome lives somewhere non-standard, the README documents CHROME_PATH for the executable. To add a specimen, the README points at src/data/cells.ts for configuration and public/models/ for the asset itself.

The asset provenance problem is the real limitation

The MIT licence covers the application code. The README is explicit that included GLB models and image assets retain their documented provenance in docs/ASSETS.md, which means the licence on the repository does not automatically grant you rights to redistribute the meshes. If you fork this for a commercial course platform, that distinction is the first thing to resolve, and the roadmap concedes the point by listing add asset license metadata directly into the UI as unfinished work.

The second limitation is coverage. Five specimens have named GLB files, but the README also states that procedural fallback geometry is used for specimens that do not yet have production GLB assets. A procedural shape is a placeholder, not a model of the organelle structure, and the roadmap lists production quality GLB models for the remaining specimens as the first item. So the visual quality you see depends heavily on which specimen you open.

Third, this is a browser application. There is no server component, no database and no multi-user sync. XP progression, achievements, favorites and notebooks are local. Anything resembling classroom tracking would have to be built, and the README does not describe an export format for that data. There are no retrieved releases either, so version 0.1.0 in package.json is the only version signal available.

Cell Architecture Studio compared with BioDigital and similar viewers

The obvious alternative class is commercial anatomy viewers such as BioDigital Human, which ship curated, medically reviewed models behind an API and a licence fee. The difference in approach is not the renderer, it is who owns the asset pipeline. A commercial viewer hands you finished meshes and takes on the provenance work; Cell Architecture Studio hands you the loader, the fallback path and the interface, and leaves you to source or build the GLB files yourself.

There is a second, less obvious alternative: writing the Three.js scene directly without React Three Fiber. That gives you tighter control over render loops and bundle splitting, and the roadmap here acknowledges the cost of the React layer by listing further reduce and lazy-load the 3D vendor bundles as an open item. If your only goal is to display one rotating GLB, the React Three Fiber and Drei dependencies plus the study-tool code are weight you will not use. The project earns its keep when you want the surrounding educational interface, not when you want a single model viewer.

Maintenance cost and what upgrading involves

The last push to the default branch was on 2026-07-19, so the repository has recent activity, though there are no retrieved releases to indicate a tagged versioning cadence. The dependency set is the maintenance surface: React 19, Three.js 0.181, Vite 7, React Three Fiber 9, Drei 10 and meshoptimizer. Three.js and the React Three Fiber ecosystem both move quickly and occasionally break at the API level, so a major Three.js bump is the upgrade that will cost you the most time.

On the positive side, the test story reduces upgrade risk. The test script runs Vitest against jsdom and then node --test over scripts/*.test.mjs, and npm run verify adds browser screenshots with canvas pixel metrics. That combination means a Three.js upgrade that silently breaks rendering has a chance of being caught by the pixel check rather than by a user. Licence-wise, the MIT terms on the code are permissive, but the GLB and image assets sit outside that grant, so treat docs/ASSETS.md as the file to read before any redistribution. Nothing here is legal advice; the provenance document is simply the source of truth the README points to.

Editorial conclusion

Adopt Cell Architecture Studio if you want a working React Three.js reference for loading GLB biology assets with a procedural fallback path, or if you are building a teaching interface and want a study-tool layer to copy. Do not adopt it as a finished educational product: the status badge reads local prototype, several specimens still fall back to procedural geometry, and the roadmap itself lists production GLB models and asset license metadata in the UI as open work. Before you build on it, open docs/ASSETS.md and confirm the provenance and licence of every GLB in public/models/, since the MIT licence covers the application code and not those files.

Frequently asked questions

Official sources

1. cclank/cell-architecture-studio on GitHub
2. Issues
3. License: MIT
4. Project website
5. README