LABIM3D — Modelos para la Educación Biomédica

Plataforma web de acceso libre para modelos anatómicos 3D curados, orientada a la enseñanza en ciencias de la salud.

Institución: Escuela de Tecnología Médica, Universidad Austral de Chile — Puerto Montt
Laboratorio: TecMedHub
Licencia: CC BY 4.0
Versión: 1.0 (Marzo 2026)

---

Tabla de Contenidos

1. Descripción
2. Stack Tecnológico
3. Arquitectura del Proyecto
4. Sistema de Datos
5. Páginas del Sitio
6. Panel de Administración
7. Últimas Modificaciones
8. Equipo

---

Descripción

LABIM3D es un repositorio web curado de modelos anatómicos 3D para docencia biomédica. Combina modelos alojados localmente (STL propios o modificados) con enlaces a repositorios externos (Thingiverse, NIH 3D Print Exchange) bajo una interfaz unificada con metadatos completos, licencias Creative Commons y visualización 3D en el navegador.

Principios de diseño:

• Sin base de datos — toda la lógica reside en el frontend
• Sin registro ni login para usuarios finales
• Escalable mediante archivos JSON modulares
• Cumplimiento obligatorio de atribución CC BY 4.0

---

Stack Tecnológico

Tecnología	Función
HTML / CSS / JavaScript (Vanilla)	Interfaz completa — sin frameworks
Three.js r84	Visualización 3D de STL en el navegador
STLLoader + OrbitControls	Carga y control del visor 3D
JSON (archivos planos)	Gestión de contenido y catálogo
jsPDF	Generación de órdenes de impresión en PDF (cliente)
PHP 7	Script auxiliar de carga multi-archivo (backend mínimo)
localStorage	Auto-guardado en panel de administración
ReportLab (Python)	Generación de formularios pedagógicos en PDF
docx (Node.js npm)	Generación de formularios pedagógicos en DOCX

Nota Three.js: Se mantiene la versión r84 por compatibilidad estable con el CDN y STLLoader. Versiones superiores presentaron incompatibilidades.

---

Arquitectura del Proyecto

LABIM3D/
├── index.html                  ← Página principal
├── about.html                  ← Documentación técnica del proyecto
├── catalog.html                ← Catálogo con filtros y búsqueda en tiempo real
├── model.html                  ← Vista detallada de modelo + visor 3D
├── casos.html                  ← Casos de uso educativos (3 zonas)
├── apoyo-tecnico.html          ← Guía de referencia rápida para docentes
├── solicitar-impresion.html    ← Formulario de solicitud de impresión
│
├── admin/
│   ├── admin.html              ← Panel de administración (protegido)
│   └── api/                    ← Endpoints PHP para carga de archivos
│
├── css/
│   ├── base.css                ← Variables globales, nav, footer, utilidades
│   ├── home.css                ← Estilos específicos de index.html
│   ├── catalog.css
│   ├── casos.css
│   ├── apoyo-tecnico.css
│   └── solicitar-impresion.css
│
├── js/
│   ├── nav.js                  ← Menú responsive
│   ├── home.js
│   ├── catalog.js              ← Filtrado y búsqueda en tiempo real
│   ├── model-viewer.js         ← Lógica Three.js + STLLoader
│   ├── admin.js                ← Gestor de modelos (CRUD + exportación JSON)
│   └── solicitar-impresion.js  ← Generación de PDF con jsPDF
│
├── models/
│   ├── index.json              ← Índice maestro (catálogo completo resumido)
│   ├── oido-interno.json
│   └── articulacion-rodilla.json
│
├── docs/
│   └── formularios/            ← Formularios pedagógicos F-01 a F-04
│       ├── LABIM3D_F1_*.pdf / .docx
│       ├── LABIM3D_F2_*.pdf / .docx
│       ├── LABIM3D_F3_*.pdf / .docx
│       └── LABIM3D_F4_*.pdf / .docx
│
└── images/
    ├── logo/
    └── models/                 ← Thumbnails e imágenes por modelo
        └── [id]/
            └── thumb.jpg

---

Sistema de Datos

Modelo dual JSON

Cada modelo tiene dos representaciones:

1. JSON individual (models/[id].json) — ficha completa con todos los metadatos, specs de impresión, atribución y notas pedagógicas.
2. Entrada en index.json — versión resumida para renderizar tarjetas en el catálogo sin cargar todos los JSONs.

⚠️ Ambos archivos deben mantenerse sincronizados. El panel de administración automatiza esta doble escritura.

Campos principales del JSON de modelo

{
  "id":               "nombre-del-modelo",
  "title":            "Nombre Completo",
  "category":         "Sistema Anatómico",
  "tags":             ["tag1", "tag2"],
  "type":             "local | external | modified | original",
  "status":           "active | draft | review",
  "files":            [{ "filename": "", "label": "", "path": "" }],
  "thumbnail":        "images/models/[id]/thumb.jpg",
  "description":      "",
  "educationalNotes": "",
  "printSpecs": {
    "material": "PLA", "infill": "20%",
    "supports": false, "time": "", "scale": "1:1"
  },
  "attribution": {
    "originalCreator": "", "originalSource": "",
    "license": "CC BY 4.0", "labim3dModifications": ""
  },
  "externalLink": null,
  "dateAdded":    "YYYY-MM-DD",
  "addedBy":      ""
}

Sistema de badges

Badge	Tipo	Color
🔧 FUNCIONAL	Modelo con movimiento articulado	Amarillo
✏️ MODIFICADO	Reparado/adaptado por LABIM3D	Verde
🌐 EXTERNO	Enlaza a fuente original	Gris
⭐ ORIGINAL	Creado por TecMedHub	Dorado

---

Páginas del Sitio

casos.html — Casos de Uso

Página dividida en tres zonas:

• Zona 1: Guías de implementación para docentes con descarga de formularios F-01 a F-04 (PDF y DOCX)
• Zona 2: Cards de especialidades para profesionales de la salud
• Zona 3: Galería de casos documentados con contenedores circulares y animación cta-logo-dark

apoyo-tecnico.html — Apoyo Técnico

Acordeón CSS-only (sin JavaScript) con referencia rápida para docentes no técnicos:

• Filamento vs. Resina
• Tipos de filamento (PLA, PETG, ABS, TPU)
• Parámetros clave de impresión
• Checklist pre-solicitud

solicitar-impresion.html — Solicitud de Impresión

Formulario con generación de PDF vía jsPDF en el cliente.

about.html — Documentación

Documentación técnica completa del proyecto: arquitectura, JSON schemas, categorías, equipo.

---

Panel de Administración

admin.html — acceso protegido por contraseña.

Funcionalidades:

• Formulario completo para agregar/editar modelos
• Auto-completado: ID desde título, fecha automática
• Soporte multi-STL (varias piezas por modelo)
• Auto-guardado con localStorage
• Modos: nuevo / editar / duplicar
• Sistema de notas con 6 tipos de anotación (badges emoji)
• Exportación de JSON individual + actualización de index.json
• Gestión dinámica de categorías y dropdowns preconfigurads (fuentes/licencias)

---

Últimas Modificaciones

Sesión — Marzo 2026

• Completada casos.html con las tres zonas funcionales
• Formularios pedagógicos F-01 a F-04 generados en PDF (ReportLab/Python) y DOCX (docx/npm)
• Convención de nombres: LABIM3D_F[N]_[Nombre].[ext], ruta docs/formularios/
• Implementado backend PHP 7 en /admin/api/ para carga multi-archivo (STL + imágenes)
• Respuestas JSON con códigos HTTP estándar
• apoyo-tecnico.html implementado como acordeón CSS-only
• Panel admin: agregados modos editar/duplicar, sistema de notas con badges y notas opcionales con enlace
• Sistema de atribución CC extendido: campos source, sourceStatus, sourceName, origin

Sesión anterior

• Visor 3D con Three.js r84: OrbitControls con damping, niebla atmosférica, iluminación, controles semitransparentes flotantes
• Sistema de doble escritura JSON establecido
• about.html como documentación técnica con design system editorial
• Arquitectura modular CSS/JS por página establecida como convención
• index.html y about.html con patrón de grilla en cover (repeating-linear-gradient)

---

Equipo

Nombre	Rol	Especialidad
Nicolás Baier Quezada	Director	Neurociencias · Bioingeniería · IA
Vanessa Uribe Hernández	Lab Manager	ORL · Open source · Simulación
Fernanda López Moncada	Investigadora · Dev	Ciencias Biomédicas · IA diagnóstica
Marcia Molinet Guerra	Investigadora	Morfología · Sistema vestibular
Carolina Almendras Rodríguez	Investigadora	Oftalmología · Deep learning
Cristina Vargas Bustamante	Investigadora	Audiología · Telemedicina
Haydée Barrientos Toledo	Investigadora	Género y salud · Metodología mixta

Contacto: fernanda.lopez@uach.cl
Ubicación: Campus Costanera, Edificio 500, 3er piso — Av. Juan Soler Manfredini 1771, Puerto Montt

---

LABIM3D — Universidad Austral de Chile · TecMedHub · CC BY 4.0