Drommo
Aula 3D elegante con lecciones en video sincronizadas y ejercicios interactivos
Página web

Aula 3D elegante con lecciones en video sincronizadas y ejercicios interactivos

Prompt

Construye un aula 3D elegante donde videos tutoriales y simulaciones 3D están completamente sincronizados, con ejercicios interactivos sandbox. **Entregables:** index.html, styles.css, classroom.js, carpeta assets/ con videos de lecciones, modelos 3D de instrumentos y datasets. **Stack:** A-Frame o Three.js, video HTML5, WebAudio API, GSAP y Web Workers para cálculos. **Descripción:** Lecciones multimedia donde cada módulo combina un video tutorial con una simulación 3D sincronizada. En una lección de física el video explica un experimento y la simulación 3D reproduce exactamente los pasos, permitiendo pausar, scrubbear y modificar parámetros en tiempo real. **Sincronización video-simulación:** El video actúa como master clock; la simulación escucha eventos timeupdate y aplica estados predefinidos (posiciones, fuerzas) en momentos clave. GSAP Timeline coordina animaciones 3D con marcadores de capítulo. Scrubbing del video retrocede/avanza la simulación frame-a-frame. **Ejercicios interactivos:** Sandbox — cambiar variables (masa, fricción) y ver resultados en tiempo real. Desafío — completar tarea en tiempo límite; al finalizar se reproduce video de solución. Comparador — ejecutar dos configuraciones lado a lado con videos sincronizados. **Presentación de videos:** Clips segmentados (30–120s) con SRT y transcripciones. Lección completa en fullscreen con overlay de notas y preguntas. Videos optimizados para streaming con playsinline en móviles. **Controles y accesibilidad:** Subtítulos y transcripciones descargables. Controles de velocidad (0.5x, 1x, 1.5x) que afectan también la simulación. prefers-reduced-motion reduce animaciones y ofrece versión estática con gráficos. **Precisión y reproducibilidad:** Simulaciones deterministas con semilla fija; export de parámetros en JSON. Registro de interacciones para reproducir sesión del alumno y generar feedback automatizado. **Rendimiento:** Cálculos en Web Workers; render 3D separado del loop de física. Lazy-load de módulos; liberar memoria al cambiar de módulo. Pruebas en dispositivos de gama baja. **Métricas educativas:** Tiempo de visualización, intentos por ejercicio, parámetros más probados, tasa de éxito. Reportes para instructores con timestamps vinculados a eventos del video.

Tipo
Página web
Tecnología
Three.js, A-Frame, video HTML5, GSAP
  • 3D
  • classroom
  • e-learning
  • video lessons
  • simulation
  • synchronized
  • sandbox
  • Web Workers
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas