HTML 3D 视频创建器
创建一个完整的 HTML 动画项目，可在浏览器中预览并捕获为视频。优先采用小型、可读的实现，而非不必要的依赖。说明创建了哪些文件以及如何预览/导出它们。
工作流程
- 根据上下文澄清需求。 确定主题、视觉风格、时长、宽高比、颜色、文字及目标受众。仅询问必要细节；否则选择合理的默认值并说明它们。默认设置为 1920×1080、30 fps、8–12 秒，以及无缝或清晰结束的画面。
- 规划镜头。 在编码前描述场景、摄像机运动、光照、动画节奏以及最终帧。确保重要物体和文字位于安全区域。
- 构建场景。 使用 Three.js 配合 import map 或稳定的 CDN 导入（当无本地项目依赖时）。保持渲染、场景设置、动画和捕获控制清晰分离。使用基于确定时间的动画，使场景可以一致地复现和录制。
- 使其可用。 包括可见的预览、播放/暂停或重播控制，以及当需要视频导出时的清晰导出/录制控制。在页面中显示状态和错误信息，不要静默失败。
- 验证。 检查浏览器控制台错误，验证场景以请求的宽高比渲染，从头到尾测试动画，并确认导出路径在支持的浏览器中正常工作。当编解码器或捕获 API 不可用时提供回退方案。
- 交付。 总结结果，列出文件，给出精确的本地预览说明，解释导出格式/浏览器限制，并提及任何外部资源或网络需求。
实现要求
- 交付一个完整的可运行 HTML 文件或项目，而非伪代码。避免遗漏诸如“在此添加动画”之类的部分。
- 当满足需求时，优先使用程序化几何体、材质、光照和生成文字。如果使用了外部资源，则使用用户提供的资源，或明确标识来源和许可考虑。
- 使用
requestAnimationFrame进行预览。保持动画基于经过的时间而非帧数，以确保在不同刷新率下保持流畅。 - 处理窗口大小调整和设备像素比；避免过高的像素比导致渲染缓慢。
- 在录制时，将渲染器的绘制缓冲区设置为预期的导出尺寸。通过
canvas.captureStream(fps)和MediaRecorder（在支持时）从画布捕获。使用MediaRecorder.isTypeSupported()选择支持的 MIME 类型，而不是假设编解码器。完成后停止所有轨道并释放资源。 - 解释浏览器视频录制是实时的，可能因机器/浏览器而异。对于帧精确或生产级编码，提供可选的 FFmpeg 工作流，使用编号图片序列或其他显式生成的输入；绝不要暗示浏览器保证特定的编解码器。
- 将导入的文件和资源视为不可信。不要执行用户提供的脚本或下载任意资源，除非解释其作用。
- 保持控制组件的可访问性：标签、键盘可操作的按钮、可见焦点和状态文本。在适当情况下尊重减少动效偏好。
建议的项目结构
对于单场景请求，一个自包含的 index.html 通常就足够了。对于更大的交付物，可以使用：
project/
├── index.html
├── src/
│ ├── main.js
│ └── scene.js
├── assets/
└── README.md
参考
- 阅读 动画制作指导 了解构图、时序和动效打磨。
- 阅读 Three.js 迷你 API 笔记 了解常见的场景和渲染器模式。
- 阅读 FFmpeg 配方 了解用户需要后处理或图片序列工作流时的方法。
- 使用
assets/template.html作为浏览器预览和录制 UI 的起点；根据需求进行调整，而非原样返回。