Drommo
Escena 3D cinematográfica con cortometraje integrado y control por timeline
Página web

Escena 3D cinematográfica con cortometraje integrado y control por timeline

Prompt

Construye una escena 3D cinematográfica inmersiva donde un cortometraje por capítulos controla en tiempo real la iluminación, cámara y partículas a través de un timeline interactivo. **Entregables:** index.html, styles.css, cinema.js, carpeta assets/ con cortometraje en capítulos, pistas de audio stem, modelos y LUTs. **Stack:** Three.js, video HTML5, postprocessing (bloom, color grading), GSAP para timeline. **Descripción:** Un cortometraje se integra en una escena 3D: paneles flotantes reproducen capítulos y la iluminación, cámara y partículas reaccionan en tiempo real a la pista de audio y marcadores del video, generando una narrativa audiovisual inmersiva. **Organización del timeline:** El cortometraje se divide en capítulos (cap1, cap2…). Cada capítulo tiene metadatos JSON con start, end, cameraCue, lightingCue, particleCue. Un timeline interactivo permite scrubbing; el scrubber interpola suavemente cámara y efectos entre cues. **Scrubbing y salto de capítulos:** GSAP interpola cámara y parámetros de postprocessing (exposición, bloom) hacia los valores del capítulo destino. Crossfade de audio entre stems al cambiar capítulo. Subtítulos y notas sincronizados. **Integración de video y texturas:** Videos como texturas en planos 3D; overlays HTML para subtítulos y accesibilidad. Versiones proxy de baja resolución durante scrubbing; alta calidad al detenerse. **Controles y microinteracciones:** Play/Pause, Capítulos, Modo Cinemático (dolly automático), Modo Explorador (control libre). Marcadores de capítulo con previews en miniatura; compartir enlace con timestamp. **Accesibilidad y fallback:** Transcripción completa y versión lineal con capítulos navegables. prefers-reduced-motion desactiva movimientos no esenciales y ofrece cortes directos entre capítulos. **Calidad visual y rendimiento:** LUTs para color grading en postprocessing; HDRI para iluminación realista. LOD y culling agresivo; pausar render fuera de viewport. Preload de stems; AudioContext para sincronización precisa. **Pruebas y métricas:** Latencia de scrubbing, tiempos de carga por capítulo, tasa de abandono. Pruebas en desktop y móviles con perfiles de red variados.

Tipo
Página web
Tecnología
Three.js, GSAP, video HTML5, postprocessing
  • 3D
  • cinematic
  • short film
  • timeline
  • postprocessing
  • bloom
  • color grading
  • LUT
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