SolijonSolayev/html-3d-video

HTML 3D Video Creator

Erstelle ein vollständiges HTML-Animationsprojekt, das im Browser als Vorschau angezeigt und als Video aufgenommen werden kann. Bevorzuge eine kleine, lesbare Implementierung gegenüber unnötigen Abhängigkeiten. Erkläre, welche Dateien erstellt wurden und wie man sie als Vorschau anzeigen und exportieren kann.

Arbeitsablauf

1. Klärung des Briefings aus dem Kontext. Identifiziere das Thema, den visuellen Stil, die Dauer, das Seitenverhältnis, Farben, Text und die Zielgruppe. Frage nur nach Details, die notwendig sind; wähle andernfalls sinnvolle Standardwerte und nenne sie. Standardmäßig 1920×1080, 30 fps, 8–12 Sekunden und einen nahtlosen oder sauber aufgelösten Abschluss.
2. Planung der Aufnahme. Beschreibe die Szene, die Kamerabewegung, die Beleuchtung, die Animationsschwerpunkte und den letzten Frame vor dem Codieren. Halte wichtige Objekte und Text innerhalb des Sicherheitsbereichs.
3. Erstellung der Szene. Verwende Three.js mit einer Import-Map oder einem stabilen CDN-Import, wenn keine lokalen Projektabhängigkeiten bestehen. Halte Rendering, Szenenaufbau, Animation und Aufnahmesteuerung klar getrennt. Verwende deterministische zeitbasierte Animation, sodass die Szene reproduzierbar und einheitlich aufgezeichnet werden kann.
4. Benutzbarkeit sicherstellen. Füge eine sichtbare Vorschau, Play/Pause- oder Replay-Steuerung und eine klare Export-/Aufnahmesteuerung hinzu, wenn ein Videoexport angefordert wird. Zeige Status und Fehler auf der Seite an; schlage keine Fehler stillschweigend zu.
5. Validierung. Überprüfe die Browser-Konsole auf Fehler, stelle sicher, dass die Szene im gewünschten Seitenverhältnis rendert, teste die Animation von Anfang bis Ende und bestätige, dass der Exportpfad in einem unterstützten Browser funktioniert. Biete einen Fallback, wenn ein Codec oder die Capture-API nicht verfügbar ist.
6. Auslieferung. Fasse das Ergebnis zusammen, liste die Dateien auf, gib genaue lokale Vorschauanweisungen, erkläre das Exportformat und die Browser-Einschränkungen und erwähne alle externen Assets oder Netzwerkanforderungen.

Implementierungsanforderungen

• Liefer eine vollständig ausführbare HTML-Datei oder ein Projekt aus, keinen Pseudocode. Vermeide ausgelassene Abschnitte wie „Füge hier die Animation ein.“
• Bevorzuge prozedurale Geometrie, Materialien, Lichter und generierten Text, wenn dies das Briefing erfüllt. Wenn externe Assets verwendet werden, verwende vom Benutzer bereitgestellte Assets oder identifiziere klar die Quelle und Lizenzbedingungen.
• Verwende requestAnimationFrame für die Vorschau. Halte die Animation auf der verstrichenen Zeit basiert, nicht auf der Frameanzahl, damit sie bei unterschiedlichen Bildwiederholraten flüssig bleibt.
• Behandle Größenänderungen und das Geräte-Pixelverhältnis; vermeide übermäßige Pixelverhältnisse, die zu langsamem Rendering führen.
• Setze den Zeichenpuffer des Renderers beim Aufnehmen auf die gewünschten Exportabmessungen. Erfasse das Canvas mit canvas.captureStream(fps) und MediaRecorder, wenn unterstützt. Wähle einen unterstützten MIME-Typ mit MediaRecorder.isTypeSupported() aus, anstatt einen Codec vorauszusetzen. Stoppe alle Tracks und gib Ressourcen frei, wenn der Vorgang abgeschlossen ist.
• Erkläre, dass die Browser-Videoaufnahme in Echtzeit erfolgt und je nach Maschine/Browser variieren kann. Für frame-genauen oder professionellen Export biete optional einen FFmpeg-Workflow mit einer nummerierten Bildsequenz oder einer anderen explizit generierten Eingabe an; gib niemals vor, dass der Browser einen bestimmten Codec garantiert.
• Behandle importierte Dateien und Assets als unsicher. Führe keine benutzerbereitgestellten Skripte aus und lade keine willkürlichen Assets herunter, ohne zu erklären, was sie tun.
• Halte die Steuerung zugänglich: Beschriftungen, tastaturbedienbare Schaltflächen, sichtbarer Fokus und Statustext. Respektiere die Einstellungen zur reduzierten Bewegung, wenn angemessen.

Vorgeschlagene Projektstruktur

Für eine Anfrage mit einer einzelnen Szene ist normalerweise eine eigenständige index.html ausreichend. Für ein größeres Deliverable verwende:

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

Referenzen

• Lies die Anleitungen für Animationsgestaltung für Komposition, Timing und Verfeinerung von Bewegungen.
• Lies die Mini-API-Hinweise zu Three.js für gängige Muster zur Szene und zum Renderer.
• Lies die FFmpeg-Rezepte, wenn der Benutzer einen Nachbearbeitungs- oder Bildsequenz-Workflow benötigt.
• Verwende assets/template.html als Ausgangspunkt für eine Browser-Vorschau- und Aufnahmeoberfläche; passe es an das Briefing an, anstatt es unverändert zurückzugeben.