Autor: The Bugged Dev
Pruébalo en vivo Sobre este proyecto
Anatomy Atelier reúne el corazón, el cerebro, los pulmones, el hígado, los riñones, el ojo, el intestino, el páncreas y la piel en una biblioteca consultable de nueve órganos. Cada entrada combina una pieza anatómica 3D giratoria y ampliable con puntos estructurales, datos clave y tarjetas de aprendizaje, además de herramientas de corte, capas, aislamiento y comparación de órganos.
La exploración continúa más allá del modelo con lecciones, ilustraciones animadas sencillas y cuestionarios. GLTFLoader y el decodificador Meshopt cargan cada recurso, mientras que una caché de tres órganos, la precarga y el renderizado bajo demanda mantienen ágiles los cambios frecuentes.
Puntos clave
- Busca y cambia entre nueve órganos: corazón, cerebro, pulmones, hígado, riñones, ojo, intestino, páncreas y piel.
- Arrastra para girar, desplázate para acercar y selecciona puntos interactivos para consultar notas estructurales, o deja activa la rotación automática para mantener una vista continua.
- Usa cortes para examinar estructuras internas, cambia a una vista por capas en malla alámbrica o atenúa el pedestal y la sombra de contacto en el modo de aislamiento; el modo de comparación coloca dos órganos uno junto al otro.
- Pasa de los datos y las tarjetas de aprendizaje de cada órgano a lecciones y cuestionarios, ampliando la exploración libre con un estudio guiado.
Análisis técnico
Recursos 3D · biblioteca de órganos de Tripo
Nueve órganos se entregan como recursos GLB individuales cuyos nodos de escena y materiales incluyen identificadores de Tripo. GLTFLoader, junto con el decodificador Meshopt, carga, escala y centra cada órgano en un mismo espacio de visualización, de modo que los puntos interactivos y las herramientas del visor compartan el mismo sistema de coordenadas.
Interacción del visor · controles y puntos en espacio de pantalla
OrbitControls gestiona la rotación, el zoom y la rotación automática. Los puntos interactivos usan proyección en espacio de pantalla para la selección con el puntero, mientras que las pruebas de búfer de profundidad y orientación controlan su visibilidad sin lanzar rayos repetidamente contra la malla. Los planos de recorte ofrecen cortes, un interruptor de malla alámbrica muestra la vista por capas y el aislamiento atenúa el pedestal y la sombra de contacto; el modo de comparación coloca dos órganos uno junto al otro y añade datos sobre la función y el tamaño del órgano actual.
Estrategia de carga · caché de tres modelos y precarga
El gestor de recursos conserva los tres órganos usados más recientemente y reutiliza las solicitudes de carga en curso. Al pasar el puntero sobre un órgano o cuando este recibe el foco se inicia una precarga GLB de baja prioridad; al cambiar de órgano también se prepara en la caché del navegador el material gráfico asociado.
Renderizado y aprendizaje · actualizaciones bajo demanda
Un bucle de animación permanente solo invoca el renderizador cuando hay interacción, animación o cambios de estado, de modo que una escena inmóvil no se redibuja continuamente. React gestiona la búsqueda, la selección de órganos, la comparación, las lecciones y los cuestionarios, mientras GSAP añade una ligera animación de entrada al cambiar el contenido seleccionado.
