Creador de Módulos 3D Interactivos
Guía completa para crear y publicar módulos 3D interactivos. Funciona en tu navegador, sin instalar nada.
Guía completa para crear y publicar módulos 3D interactivos. Funciona en tu navegador, sin instalar nada.
Es una herramienta de autoría para crear módulos de aprendizaje interactivos con modelos 3D. La idea es simple: cargas un modelo 3D (una pieza de máquina, un órgano, un edificio…), colocas puntos de información encima de él, y el resultado final es un archivo que puedes publicar en tu web o subir a cualquier plataforma educativa (Moodle, Canvas, Blackboard…).
Acepta .glb, .3mf, .stl y .obj. Y si un modelo llega sin color, lo pintas tú desde la propia herramienta.
Haz clic sobre el modelo para colocar un punto. Cada punto puede tener texto, imágenes, acordeones o vídeo.
Comprueba el resultado final en una pestaña nueva sin descargar nada. El botón se activa en cuanto cargas un modelo.
Genera un paquete HTML listo para colgar en cualquier servidor o página web estática.
Genera un paquete estándar compatible con plataformas LMS. Registra el progreso del alumno automáticamente.
index.html
Ve a la carpeta editor dentro de "Creador3D" y haz doble clic en index.html. Se abrirá en tu navegador predeterminado (Chrome, Edge o Firefox).
Verás la herramienta lista para cargar tu primer modelo 3D. Todo lo que hagas se guarda solo en el propio navegador, así que puedes cerrar y retomar sin perder el trabajo (ver apartado 3).
Una vez abierto el index.html en el navegador, verás tres columnas:
En la columna izquierda, arriba, escribe el título, una breve descripción y el autor o institución. Esta información aparecerá en el módulo final.
Haz clic en el botón "Subir archivo (.3mf, .glb, .stl, .obj)". Selecciona tu archivo.
El modelo aparecerá en el centro. Puedes girarlo con el ratón (clic + arrastrar) y hacer zoom con la rueda.
¿Aparece bocabajo o tumbado? Es normal: muchos modelos descargados vienen así, y los .stl y los .3mf suelen usar el eje Z como "arriba". No hace falta volver a tu programa de 3D: usa el panel "Orientación", justo debajo. Voltear le da media vuelta, Enderezar arregla el caso Z-up, los seis botones de flecha giran 90° cada uno y Al suelo lo centra y lo apoya. Si te pasas, Restablecer devuelve la postura del archivo original. Puedes orientarlo cuando quieras: los puntos que ya hayas colocado giran con el modelo.
En la columna izquierda encontrarás tres botones:
Haz clic en el tipo que quieras. El cursor cambia. Luego haz clic directamente sobre el modelo 3D en el punto exacto donde quieres colocar el marcador.
Al colocar un punto, la columna derecha se abrirá automáticamente. Rellena:
¿Necesitas algo más avanzado? El botón </> HTML muestra el código para pegar acordeones, vídeos incrustados o tablas. Los puntos de tipo "Acordeón" y "Multimedia" ya se abren directamente en ese modo, porque vienen con código hecho.
Al pegar texto copiado de Word o de una web se pega sin formato, a propósito: así no arrastra tipografías ni colores que descuadren el módulo. El formato se pone con los botones.
Cuando termines, pulsa "✓ Guardar este punto". Ojo, no lo confundas con "Guardar proyecto" de la barra de arriba: ese guarda TODO tu trabajo en un archivo para retomarlo otro día.
Con la ✕ de la cabecera cierras la edición y vuelves a ver los botones para añadir más puntos. La lista de puntos se queda siempre visible arriba, para saltar de uno a otro.
Para mover un punto: mantén pulsado el clic sobre él y arrástralo a la nueva posición.
Para eliminar un punto: selecciónalo haciendo clic y pulsa "🗑️ Eliminar Punto" en la columna derecha.
index.html, al subir el mismo modelo 3D se recuperarán todos los puntos que habías creado.
La herramienta acepta cuatro formatos, y en la práctica la elección es sencilla:
Cuando hayas terminado de colocar y editar todos los puntos, la barra superior muestra tres acciones:
Al cargar cualquier formato (GLB, 3MF, OBJ o STL) aparece en el panel lateral izquierdo la sección "Color de materiales". Cada parte detectada tiene su propio selector de color, y con el 🪣 Cubo de pintura puedes pintar una pieza haciendo clic directamente sobre ella en el visor.
Ponles nombre a las piezas. Los archivos suelen traer nombres del programa de 3D ("gear 1", "cube 7") que no dicen nada: en un modelo de 17 piezas no hay quien encuentre una. Haz clic sobre el nombre en la lista y escribe el tuyo ("Piñón de ataque", "Corona"). Pulsa Enter para confirmar o Esc para dejarlo como estaba. Al pasar el ratón por una fila, esa pieza se ilumina en azul en el visor, así sabes cuál es cuál. Los nombres se guardan con el proyecto (botón "Guardar"), no dentro del modelo 3D.
¿El modelo llega como una sola pieza y no puedes pintarlo por partes? Pulsa "Separar en piezas" en ese mismo panel: el programa detecta las piezas físicas sueltas del modelo (muy habitual en descargas de MakerWorld o Printables) y las separa para que puedas colorear cada una. Si el resultado no te convence, "Restaurar original" lo deshace.
¿Y si ni siquiera hay piezas sueltas (todo está soldado en una sola malla)? Usa la 🪄 Varita: elige un color, activa la varita y haz clic sobre la zona que quieras pintar — se colorea SOLO esa zona continua y lisa (la selección se detiene en las aristas del modelo), y queda en el panel como "Zona 1", "Zona 2"… para poder repintarla cuando quieras. El control "Alcance de la zona" regula la precisión: bajo = zonas pequeñas y exactas; alto = zonas amplias que fluyen por las superficies curvas.
¿Muchas zonas que pintar a mano? "Trocear por zonas" aplica el criterio de la varita a TODO el modelo de una vez: en un clic te deja el panel con todas sus zonas ("Zona 1", "Zona 2"…) listas para colorear. Se regula con el mismo control "Alcance de zonas": si salen demasiadas o demasiado pocas, muévelo y vuelve a pulsar. Y "Auto-colorear" reparte una paleta variada entre todas las partes del panel, para ver de un vistazo cómo ha quedado el troceado antes de elegir los colores definitivos.
¿Quieres pintar a mano alzada? El 🖌️ Pincel pinta a trazos arrastrando el ratón sobre el modelo, con el tamaño que elijas en el control "Tamaño del pincel". Funciona en cualquier superficie, también en las totalmente lisas donde la varita seleccionaría la pieza entera. Mientras el pincel está activo, para girar el modelo mantén Ctrl mientras arrastras, o arrastra con el botón de la rueda; el trazo se ve completo al soltar el botón. Un truco: en modelos de pocos polígonos el trazo sigue los vértices de la malla, así que queda mejor en modelos detallados. "Restaurar original" también deshace la pintura del pincel.
El selector de "Acabado" (mate, satinado o metálico) se aplica junto con el color al pintar con el cubo, la varita o los selectores del panel. Con "mantener el actual" el material conserva el acabado que traía el archivo.
¿No sabes qué pieza es "Zona 14"? Pasa el ratón por encima de cualquier fila del panel de colores: esa pieza se ilumina en azul en el visor. Al retirar el ratón recupera su color.
¿Te has equivocado? Los botones ↶ Deshacer y ↷ Rehacer de la barra superior (o Ctrl+Z / Ctrl+Y) recuerdan tus últimos 12 pasos: pintura, separaciones, troceados, trazos de pincel y también los puntos (crear, borrar, mover, editar). Un punto borrado sin querer se recupera con un solo Ctrl+Z.
Los colores elegidos se conservan en la vista previa, en el módulo exportado y en el proyecto guardado.
Los botones "Guardar" y "Abrir" de la barra superior guardan TODO tu trabajo (el modelo con sus colores y separación, los puntos con su contenido y los datos del módulo) en un único archivo .c3d.json.
Sirve para continuar otro día, en otro ordenador, o para pasarle el proyecto a otra persona. Además, el programa sigue autoguardando la sesión en el navegador como hasta ahora.
Haz clic en el botón verde "👁 Vista Previa" para abrir el visor final en una pestaña nueva del navegador. Podrás hacer clic en los hotspots, ver los modales y comprobar el aspecto del módulo sin descargar ningún archivo.
El modelo se convierte automáticamente y queda embebido en la vista previa para que sea completamente autocontenida. En modelos grandes puede tardar uno o dos segundos en prepararse. Cierra la pestaña cuando termines de revisar.
Para distribuir el módulo, elige una de estas dos opciones de exportación:
Genera un archivo .zip con un HTML completamente autocontenido (el modelo 3D va embebido). Puedes abrirlo directamente haciendo doble clic en el index.html, o subirlo a cualquier servidor web o servicio de hosting estático (GitHub Pages, Netlify, etc.).
Genera un archivo .zip compatible con Moodle, Canvas, Blackboard y otras plataformas educativas. Registra cuándo el alumno ha visitado todos los puntos (con nota de progreso), guarda el avance entre sesiones (si el alumno vuelve otro día, sus puntos visitados siguen marcados) y funciona sin conexión a Internet dentro del LMS: el visor 3D viaja dentro del paquete.
Se descargará un archivo .zip en tu carpeta de Descargas.
No necesitas descomprimir el archivo. En Moodle, por ejemplo: Añadir actividad → SCORM → Subir archivo ZIP.
Abre el ZIP y descomprímelo. El index.html incluye el modelo 3D embebido, por lo que puedes abrirlo directamente con doble clic sin necesidad de servidor. Si prefieres publicarlo en línea, sube toda la carpeta a tu servidor web o plataforma de hosting.
Es normal: esos formatos no siempre traen la información de color. No hace falta hacer nada por fuera — píntalo tú desde la sección "Color de materiales" del panel izquierdo (apartado 5): separa las piezas, selecciona zonas con la varita o el pincel y elige los colores. Los colores que pongas se conservan en la vista previa y en el módulo exportado.
Puede ocurrir con modelos muy grandes o con iluminación muy oscura. Prueba a girar el modelo — a veces está al revés. Si el problema persiste, convierte el archivo a .glb con Blender antes de cargarlo.
Comprueba que el archivo no está corrupto. Intenta abrirlo primero en Blender o en el software con el que lo creaste para verificar que funciona. También asegúrate de que la extensión del archivo es correcta (.3mf, .glb, .stl u .obj).
La primera vez que abres el index.html necesitas conexión para descargar las librerías 3D (Three.js y model-viewer). Una vez cargadas, el navegador las guarda en caché y puedes trabajar sin internet.
No. El programa guarda automáticamente los puntos en el navegador (localStorage). La próxima vez que abras el index.html y cargues el mismo archivo con el mismo nombre, recuperará todos los puntos donde los dejaste.