Creador de Vídeos 3D en HTML

¿Qué hace Creador de Vídeos 3D en HTML?

Crea un proyecto de animación HTML completo que se pueda previsualizar en un navegador y capturar como vídeo. Prefiere una implementación pequeña y legible sobre dependencias innecesarias. Explica qué archivos creaste y cómo previsualizarlos/exportarlos.

Flujo de trabajo

1. Aclara el briefing a partir del contexto. Identifica el tema, estilo visual, duración, relación de aspecto, colores, texto y audiencia objetivo. Pregunta solo por los detalles necesarios; de lo contrario, elige valores predeterminados sensatos y menciónalos. Valores predeterminados: 1920×1080, 30 fps, 8–12 segundos, y un final sin fisuras o resuelto limpiamente.
2. Planifica la toma. Describe la escena, el movimiento de la cámara, la iluminación, los tiempos de animación y el fotograma final antes de programar. Mantén los objetos importantes y el texto dentro del área segura.
3. Construye la escena. Usa Three.js con un mapa de importación o una importación CDN estable cuando no existan dependencias locales del proyecto. Mantén claramente separados el renderizado, la configuración de la escena, la animación y los controles de captura. Usa animación basada en tiempo determinista para que la escena se pueda reproducir y grabar de manera consistente.
4. Hazlo utilizable. Incluye una previsualización visible, controles de reproducción/pausa o repetición, y un control claro de exportación/grabación cuando se solicite la exportación de vídeo. Muestra el estado y los errores en la página; no falles en silencio.
5. Valida. Revisa los errores de la consola del navegador, verifica que la escena se renderice en la relación de aspecto solicitada, prueba la animación de principio a fin y confirma que la ruta de exportación funciona en un navegador compatible. Proporciona una alternativa cuando un códec o la API de captura no esté disponible.
6. Entrega. Resume el resultado, enumera los archivos, proporciona instrucciones exactas de previsualización local, explica el formato de exportación/las limitaciones del navegador y menciona cualquier activo externo o requisitos de red.

Requisitos de implementación

• Entrega un archivo HTML o proyecto completo y ejecutable, no pseudocódigo. Evita secciones omitidas como "añadir animación aquí".
• Prefiere geometría procedural, materiales, luces y texto generado cuando eso cumpla con el briefing. Si se usan activos externos, usa activos proporcionados por el usuario o identifica claramente la fuente y las consideraciones de licencia.
• Usa requestAnimationFrame para la previsualización. Mantén la animación basada en el tiempo transcurrido, no en el número de fotogramas, para que sea suave a diferentes frecuencias de actualización.
• Maneja el redimensionamiento y la relación de píxeles del dispositivo; evita relaciones de píxeles excesivas que causen renderizado lento.
• Configura el búfer de dibujo del renderizador a las dimensiones de exportación previstas al grabar. Captura desde el lienzo con canvas.captureStream(fps) y MediaRecorder cuando sea compatible. Selecciona un tipo MIME compatible con MediaRecorder.isTypeSupported() en lugar de asumir un códec. Detén todas las pistas y libera recursos al terminar.
• Explica que la grabación de vídeo en el navegador es en tiempo real y puede variar según la máquina/navegador. Para una codificación precisa o de producción, proporciona un flujo de trabajo opcional con FFmpeg usando una secuencia de imágenes numeradas u otra entrada generada explícitamente; nunca impliques que el navegador garantiza un códec en particular.
• Trata los archivos y activos importados como no confiables. No ejecutes scripts proporcionados por el usuario ni descargues activos arbitrarios sin explicar qué hacen.
• Mantén los controles accesibles: etiquetas, botones operables con teclado, foco visible y texto de estado. Respeta las preferencias de movimiento reducido cuando sea apropiado.

Estructura de proyecto sugerida

Para una solicitud de una sola escena, un index.html autocontenido suele ser suficiente. Para un entregable más grande, usa:

project/
├── index.html
├── src/
│   ├── main.js
│   └── scene.js
├── assets/
└── README.md

Referencias

• Lee la guía de destreza en animación para composición, tiempos y refinamiento de movimiento.
• Lee las notas de la API mini de Three.js para patrones comunes de escena y renderizador.
• Lee las recetas de FFmpeg cuando el usuario necesite un flujo de trabajo de posprocesamiento o de secuencia de imágenes.
• Usa assets/template.html como punto de partida para una interfaz de previsualización y grabación en el navegador; adáptalo al briefing en lugar de devolverlo sin cambios.