0 FPS
Atlas 3D — Atlas de Anatomía Interactivo

Freelance / Research2023

Atlas 3D — Atlas de Anatomía Interactivo

Atlas de anatomía 3D interactivo con Three.js y React para un proyecto de libro de texto de una facultad de medicina — renderizado en tiempo real, zoom, rotación y anotaciones sobre modelos diseñados para estudiantes y docentes.

Rol

Frontend / Ingeniero 3D

Cliente

Freelance / Research

Año

2023

Enlaces

Next.jsthreejsreact-three-fiberframer-motion

Origen

Este proyecto nació cuando un amigo que estaba escribiendo un libro para una cátedra de anatomía en la facultad de medicina me pidió construir una herramienta interactiva complementaria. El objetivo era crear un atlas 3D web que los estudiantes pudieran usar junto al libro para explorar huesos humanos de una manera que las ilustraciones estáticas simplemente no pueden ofrecer — con rotación, zoom y anotaciones contextuales.

Resumen

El resultado es un atlas de anatomía 3D completo que renderiza modelos esqueléticos humanos en el navegador usando Three.js mediante react-three-fiber. Los usuarios pueden rotar, hacer zoom y desplazarse libremente alrededor de cada hueso, mientras que las anotaciones superpuestas muestran nombres y descripciones anatómicas ancladas a coordenadas 3D específicas. La interfaz fue diseñada para ser lo suficientemente intuitiva para estudiantes de medicina no técnicos, manteniendo la precisión requerida para uso académico.
Visor 3D interactivo

Visor 3D interactivo

Exploración detallada de huesos

Exploración detallada de huesos

Destacados Técnicos

• Construido con react-three-fiber para composición declarativa de escenas 3D dentro de una aplicación Next.js. • Carga de modelos acelerada por GPU con LOD (Level of Detail) progresivo para renderizado inicial rápido y transiciones suaves entre niveles de detalle. • Sistema de anotaciones personalizado que vincula metadatos a coordenadas 3D del mundo — las etiquetas se mantienen posicionadas con precisión durante todas las rotaciones y niveles de zoom. • Soporte de gestos táctiles para dispositivos móviles: pinch-to-zoom, rotación con dos dedos y navegación por swipe entre huesos. • Perfilado de rendimiento y optimización de draw calls para mantener interacción a 60 fps en hardware de gama media. • Animaciones con Framer Motion para transiciones de UI entre el catálogo de huesos y las vistas de detalle individuales.

Lo Que Me Enseñó Este Proyecto

Más allá de los desafíos técnicos, Atlas 3D fue mi primera experiencia real trabajando con un cliente no técnico en un proyecto sostenido. Me enseñó lecciones que luego estudié formalmente en las materias de ingeniería de software en la facultad: • Relevamiento de requerimientos — traducir la visión de un anatomista en funcionalidades concretas e historias de usuario. • Comunicación con el cliente — reuniones periódicas, gestión de expectativas, presentación de avances mediante demos en lugar de jerga técnica. • Organización de tareas — descomponer un proyecto complejo en hitos, priorizar funcionalidad core sobre nice-to-haves, e iterar en base a feedback. • Gestión de alcance — aprender cuándo resistir pedidos de features y cuándo acomodarlos. Este proyecto me dio una base práctica en gestión de proyectos y desarrollo orientado al cliente mucho antes de encontrar esos conceptos en un aula.

Siguiente Proyecto

F1 Stats 2023

App móvil multiplataforma construida con React Native para explorar la temporada 2023 de Fórmula 1 — clasificaciones de

Ver Todos los Proyectos