SolijonSolayev/html-3d-video

Criador de Vídeo 3D em HTML

Crie um projeto de animação HTML completo que pode ser pré-visualizado em um navegador e capturado como vídeo. Prefira uma implementação pequena e legível em vez de dependências desnecessárias. Explique quais arquivos você criou e como pré-visualizá-los/exportá-los.

Fluxo de trabalho

1. Esclareça o briefing a partir do contexto. Identifique o assunto, estilo visual, duração, proporção, cores, texto e público-alvo. Pergunte apenas os detalhes necessários; caso contrário, escolha padrões sensíveis e mencione-os. Padrão: 1920×1080, 30 qps, 8–12 segundos e um final contínuo ou bem resolvido.
2. Planeje a cena. Descreva a cena, movimento da câmera, iluminação, batidas de animação e quadro final antes de codificar. Mantenha objetos importantes e texto dentro da área segura.
3. Construa a cena. Use Three.js com um mapa de importação ou um CDN estável quando não houver dependências de projeto local. Mantenha renderização, configuração de cena, animação e controles de captura claramente separados. Use animação baseada em tempo determinístico para que a cena possa ser reproduzida e gravada de forma consistente.
4. Torne utilizável. Inclua uma pré-visualização visível, controles de reprodução/pausa ou repetição, e um controle claro de exportação/gravação quando a exportação de vídeo for solicitada. Mostre status e erros na página; não falhe silenciosamente.
5. Valide. Verifique erros no console do navegador, confirme que a cena renderiza na proporção solicitada, teste a animação do início ao fim e verifique se o caminho de exportação funciona em um navegador compatível. Forneça uma alternativa quando um codec ou API de captura estiver indisponível.
6. Entregue. Resuma o resultado, liste os arquivos, forneça instruções exatas de pré-visualização local, explique o formato de exportação/limitações do navegador e mencione quaisquer ativos externos ou requisitos de rede.

Requisitos de implementação

• Entregue um arquivo HTML completo e executável ou projeto, não pseudocódigo. Evite seções omitidas como "adicione animação aqui."
• Prefira geometria procedural, materiais, luzes e texto gerado quando isso atender ao briefing. Se ativos externos forem usados, use ativos fornecidos pelo usuário ou identifique claramente a fonte e as considerações de licenciamento.
• Use requestAnimationFrame para pré-visualização. Mantenha a animação baseada no tempo decorrido, não no número de quadros, para que permaneça suave em diferentes taxas de atualização.
• Lide com redimensionamento e proporção de pixels do dispositivo; evite proporções excessivas que causem renderização lenta.
• Defina o buffer de desenho do renderizador para as dimensões de exportação pretendidas ao gravar. Capture do canvas com canvas.captureStream(fps) e MediaRecorder quando compatível. Selecione um tipo MIME compatível com MediaRecorder.isTypeSupported() em vez de assumir um codec. Pare todas as trilhas e libere recursos ao finalizar.
• Explique que a gravação de vídeo no navegador é em tempo real e pode variar conforme máquina/navegador. Para codificação precisa de quadros ou produção, forneça um fluxo opcional com FFmpeg usando uma sequência numerada de imagens ou outra entrada gerada explicitamente; nunca implique que o navegador garanta um codec específico.
• Trate arquivos e ativos importados como não confiáveis. Não execute scripts fornecidos pelo usuário nem baixe ativos arbitrários sem explicar o que eles fazem.
• Mantenha os controles acessíveis: rótulos, botões operáveis por teclado, foco visível e texto de status. Respeite as preferências de movimento reduzido quando apropriado.

Estrutura de projeto sugerida

Para uma solicitação de cena única, um index.html auto-contido geralmente é suficiente. Para uma entrega maior, use:

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

Referências

• Leia o guia de craft de animação para composição, temporização e polimento de movimento.
• Leia as notas da mini API Three.js para padrões comuns de cena e renderizador.
• Leia as receitas FFmpeg quando o usuário precisar de um fluxo de pós-processamento ou sequência de imagens.
• Use assets/template.html como ponto de partida para uma pré-visualização no navegador e interface de gravação; adapte-o ao briefing em vez de retorná-lo inalterado.