SolijonSolayev/html-3d-video

Créateur de Vidéo 3D HTML

Créez un projet d'animation HTML complet qui peut être prévisualisé dans un navigateur et capturé sous forme de vidéo. Privilégiez une implémentation petite et lisible plutôt que des dépendances inutiles. Expliquez les fichiers que vous avez créés et comment les prévisualiser/exporter.

Flux de travail

1. Clarifiez le brief à partir du contexte. Identifiez le sujet, le style visuel, la durée, le rapport d'aspect, les couleurs, le texte et le public cible. Ne demandez que les détails nécessaires ; sinon choisissez des valeurs par défaut raisonnables et indiquez-les. Par défaut : 1920×1080, 30 ips, 8–12 secondes, et une fin harmonieuse ou proprement résolue.
2. Planifiez le plan. Décrivez la scène, le mouvement de la caméra, l'éclairage, les temps forts de l'animation et l'image finale avant de coder. Gardez les objets importants et le texte dans la zone de sécurité.
3. Construisez la scène. Utilisez Three.js avec une import map ou un CDN stable lorsqu'aucune dépendance de projet locale n'existe. Séparez clairement le rendu, la configuration de la scène, l'animation et les contrôles de capture. Utilisez une animation déterministe basée sur le temps pour que la scène puisse être reproduite et enregistrée de manière cohérente.
4. Rendez-la utilisable. Incluez une prévisualisation visible, des contrôles de lecture/pause ou relecture, et un contrôle d'export/enregistrement clair lorsque l'export vidéo est demandé. Affichez l'état et les erreurs dans la page ; n'échouez pas silencieusement.
5. Validez. Vérifiez les erreurs dans la console du navigateur, assurez-vous que la scène est rendue au rapport d'aspect demandé, testez l'animation du début à la fin, et confirmez que le chemin d'export fonctionne dans un navigateur pris en charge. Fournissez un repli lorsqu'un codec ou une API de capture est indisponible.
6. Livrez. Résumez le résultat, listez les fichiers, donnez des instructions précises de prévisualisation locale, expliquez le format d'export/les limitations du navigateur, et mentionnez les éventuelles ressources externes ou exigences réseau.

Exigences d'implémentation

• Livrez un fichier HTML ou un projet complet et exécutable, pas du pseudocode. Évitez les sections omises comme "ajouter l'animation ici".
• Privilégiez la géométrie procédurale, les matériaux, les lumières et le texte généré lorsque cela satisfait au brief. Si des ressources externes sont utilisées, utilisez celles fournies par l'utilisateur ou identifiez clairement la source et les considérations de licence.
• Utilisez requestAnimationFrame pour la prévisualisation. Gardez l'animation basée sur le temps écoulé, pas sur le nombre d'images, afin qu'elle reste fluide à différents taux de rafraîchissement.
• Gérez le redimensionnement et le ratio de pixels de l'appareil ; évitez les ratios de pixels excessifs qui ralentissent le rendu.
• Définissez le tampon de dessin du moteur de rendu aux dimensions d'export prévues lors de l'enregistrement. Capturez depuis le canvas avec canvas.captureStream(fps) et MediaRecorder là où c'est pris en charge. Sélectionnez un type MIME pris en charge avec MediaRecorder.isTypeSupported() plutôt que de supposer un codec. Arrêtez toutes les pistes et libérez les ressources une fois terminé.
• Expliquez que l'enregistrement vidéo dans le navigateur est en temps réel et peut varier selon la machine/le navigateur. Pour un encodage précis ou une production, fournissez un workflow FFmpeg optionnel utilisant une séquence d'images numérotées ou une autre entrée explicitement générée ; ne laissez jamais entendre que le navigateur garantit un codec particulier.
• Traitez les fichiers et ressources importés comme non fiables. N'exécutez pas de scripts fournis par l'utilisateur et ne téléchargez pas de ressources arbitraires sans expliquer ce qu'ils font.
• Gardez les contrôles accessibles : étiquettes, boutons utilisables au clavier, focus visible et texte d'état. Respectez les préférences de mouvement réduit lorsque c'est approprié.

Structure de projet suggérée

Pour une demande de scène unique, un seul fichier index.html autonome est généralement suffisant. Pour un livrable plus important, utilisez :

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

Références

• Lisez les conseils sur l'art de l'animation pour la composition, le timing et le polissage des mouvements.
• Lisez les notes API mini Three.js pour les motifs courants de scène et de moteur de rendu.
• Lisez les recettes FFmpeg lorsque l'utilisateur a besoin d'un post-traitement ou d'un workflow de séquence d'images.
• Utilisez assets/template.html comme point de départ pour une interface de prévisualisation et d'enregistrement dans le navigateur ; adaptez-le au brief plutôt que de le retourner inchangé.