Dando vida a un libro de biología con React y Three.js
¿Recuerdas esos aburridos diagramas de células en los libros de texto de la escuela? Imágenes planas con un montón de flechas, donde las mitocondrias parecen pantuflas y el núcleo es solo un círculo regular. En algún momento te das cuenta de que las imágenes estáticas simplemente no transmiten cómo está todo organizado en tres dimensiones. El desarrollador cclank resolvió este problema creando Cell Architecture Studio. Es una galería interactiva que convierte el estudio de la citología en explorar modelos 3D directamente en el navegador.
Qué es
El proyecto es un estudio interactivo donde puedes examinar siete tipos de células: desde neuronas y bacterias hasta células vegetales y leucocitos. Esto no es solo un visor de archivos 3D. El autor construyó una interfaz de aplicación educativa completa con descripciones detalladas de los orgánulos, modos de comparación e incluso los inicios de un tutor con IA.
¿Por qué deberíamos nosotros, como desarrolladores, preocuparnos? Primero, es un gran ejemplo de cómo combinar React 19 con gráficos pesados de Three.js. Segundo, hay una implementación interesante de pruebas visuales aquí. Si alguna vez has roto una escena 3D después de actualizar estilos, encontrarás algo que vale la pena ver en el código fuente.
Qué puede hacer el estudio
La aplicación tiene varias características que la distinguen de las escenas de demostración ordinarias.
Detalle y modos de visualización
Los modelos más detallados son la célula vegetal y el leucocito. Se cargan en formato GLB con texturas nativas preservadas. Hay dos modos principales:
- Malla: visualización estándar del modelo con todos los detalles.
- Enfoque: un modo que resalta orgánulos específicos, eliminando el ruido visual innecesario. Esto es útil cuando necesitas estudiar, por ejemplo, solo el aparato de Golgi.
Interfaz inteligente
El proyecto incluye un Tutor con IA. Por ahora es más un concepto con prompts preescritos y seguimiento del progreso, pero muestra la dirección hacia la que va el software educativo. Hay un panel de comparación donde puedes comparar la estructura de diferentes células, y tarjetas de metadatos detallados para cada objeto.
3D responsivo
Los desarrolladores a menudo luchan con adaptar el Canvas a los diseños móviles. Aquí se implementan tres variantes de diseño: escritorio, compacto y móvil. Y esto no se prueba "a ojo" — se verifica con capturas de pantalla automatizadas.
Pila técnica bajo el capó
El proyecto está construido con una pila moderna, sin código heredado:
- React 19 y TypeScript: la base más reciente.
- Vite: para compilaciones rápidas.
- Three.js + React Three Fiber (R3F): el estándar de facto para 3D en la web.
- Drei: una biblioteca auxiliar para R3F que maneja el trabajo rutinario como la carga de modelos.
- Playwright Core: utilizado para verificación visual.
Punto interesante: si el usuario tiene internet lento y un modelo GLB pesado aún no ha terminado de descargarse, la aplicación no se bloquea ni muestra una pantalla en blanco. En su lugar, entra en acción un fallback procedimental — se genera geometría simplificada con Three.js simple mientras se cargan los recursos principales.
Cómo verificar la integridad visual
Por lo general, las pruebas verifican la lógica, pero en proyectos 3D es importante que la imagen no "derive". Hay un script verify.mjs en el repositorio. Lanza Playwright, toma capturas de pantalla en diferentes resoluciones y compara las métricas de píxeles en el Canvas. Esto te permite detectar errores cuando un modelo no se renderiza o la interfaz superpone controles importantes.
Para ejecutar la verificación tú mismo:
- Inicia un servidor local:
npm run dev - En otra terminal, ejecuta:
npm run verify
El script verificará la renderización de la célula vegetal, leucocito y la funcionalidad de la ventana modal. Este es un buen ejemplo de cómo automatizar el QA en aplicaciones gráficas.
Quién debería explorar este proyecto
Recomendaría ver el código en dos casos. Si estás comenzando a trabajar con React Three Fiber, puedes tomar la estructura de componentes correcta y el manejo de eventos dentro de la escena. Y si estás trabajando en proyectos de EdTech, Cell Architecture Studio es una referencia lista para usar de cómo debería verse un libro de texto digital moderno.
Por supuesto, el proyecto aún está en estado de prototipo. No todas las células tienen modelos de alta calidad listos, y la documentación es concisa en algunos lugares. Pero como base para una plataforma educativa o un ejemplo de integración de 3D complejo en una aplicación React — este es un trabajo muy sólido.
Puedes probar la demo en vivo aquí, y el código fuente está en el repositorio de cclank.
Proyectos relacionados