From db194aeb271f531358e2712f0204e5008f5cf726 Mon Sep 17 00:00:00 2001 From: LXX <704409014@qq.com> Date: Wed, 9 Sep 2026 10:04:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20README=EF=BC=9A=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=AF=BC=E5=87=BA=20MP4=20=E5=BF=AB=E9=80=9F=E8=B7=AF?= =?UTF-8?q?=E5=BE=84=E4=B8=8E=E5=8A=A8=E4=BD=9C=E6=A8=A1=E5=9D=97=E8=AF=B4?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 --- README.md | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ad80bdd..49eb344 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,10 @@ - 机位拍摄、截图记录和基础镜头管理 - 视口比例框、九宫格、平移 / 旋转 / 缩放控制 - **关键帧动画**：物体位移 / 旋转 / 缩放 + 镜头运镜（机位、注视点、视野 FOV）关键帧，旋转使用四元数 slerp 保证平滑过渡 -- **时间轴**：播放 / 暂停、指针拖动逐帧预览、时长调整、打帧 / 删除 / 清空 -- **视频导出**：上帝视角或机位视角，把整段动画录制成 WebM 视频 +- **时间轴**：播放 / 暂停、指针拖动逐帧预览、时长调整、打帧 / 删除 / 清空；面板高度可拖动调整（顶部手柄），关键帧轨道在面板内滚动 +- **基础动作**：角色内置走路 / 跑步循环动作（真实步态曲线、左右对侧摆臂、跑步独立步频与屈膝曲线），支持速度 / 幅度调节与群体相位错开；动作之上可按关节叠加姿势偏移微调 +- **姿势调节**：两级折叠分组（核心 / 左右臂 / 左右腿），20 种姿势预设一键应用 +- **视频导出**：上帝视角或机位视角，WebCodecs 逐帧快速导出 MP4（固定分辨率、不随视口布局变形，导出速度远快于实时） - 本地场景与关键帧状态持久化 ## 界面截图 @@ -25,7 +27,7 @@ 机位视角下的关键帧运镜与时间轴 scrub 预览： -![演示](./video/director-desk--1785225572148-ezgif.com-video-to-gif-converter.gif) +![演示](./video/8ef398c0-2967-4ce1-880d-02ae0af85d78.gif) ## 技术栈 @@ -53,15 +55,18 @@ src └─ styles # 全局样式 ``` -时间轴与视频导出相关的核心文件： +时间轴、动作与视频导出相关的核心文件： - `editor/schema/timeline.ts` — 时间轴数据模型与纯函数（物体 / 相机关键帧的插值、增删改） - `editor/runtime/playbackStore.ts` — 播放状态（播放中、指针、时长、录制模式） - `editor/runtime/PlaybackFrameDriver.tsx` — `useFrame` 推进指针 - `editor/runtime/ActiveCameraPlaybackSync.tsx` — 机位视角下用运镜轨道覆盖渲染相机 -- `editor/canvas/PlaybackTransformSync.tsx` — 按指针把物体 / 相机线框的插值结果覆盖到场景对象 +- `editor/runtime/playbackTransforms.ts` — 按 playhead 把关键帧插值与运镜应用到场景（预览与导出共用） +- `editor/canvas/PlaybackTransformSync.tsx` — 每帧调用上述共享逻辑驱动预览 +- `editor/runtime/mannequin/motion.ts` — 走路 / 跑步关节曲线（纯函数，含速度 / 幅度 / 群体相位） - `editor/panels/TimelinePanel.tsx` — 时间轴 UI（播放控制、关键帧编辑、视频导出按钮） -- `editor/io/videoExport.ts` — MediaRecorder 录制 canvas → WebM +- `editor/io/videoExport.ts` — WebCodecs 逐帧渲染 + H.264 编码导出 MP4（MediaRecorder 实时录制作兜底） +- `editor/io/videoExportBridge.ts` — 把 R3F 渲染三件套（renderer / scene / camera）暴露给导出逻辑 ## 本地开发 @@ -106,12 +111,14 @@ http://127.0.0.1:4173/ - 左侧用于搜索、选择、分组查看场景对象，并支持可见性 / 锁定 / 删除 - 中央视口用于摆放场景、切换变换模式、添加角色和机位、导入资源与截图 - 右侧属性面板会根据当前选中对象自动切换为场景 / 角色 / 模型 / 摄像机编辑面板；选中摄像机时可直接编辑 位置 / 注视坐标 / FOV +- **角色动作与姿势**：角色面板「动作」标签用单选按钮切换 无 / 闲置 / 走路 / 跑步，可调速度与幅度；「姿势」标签按两级分组（核心 / 左右臂 / 左右腿）微调各关节，动作开启时滑杆显示「动作当前值 + 偏移」 - **底部时间轴**： - 选中对象或相机 → 用 gizmo 或右侧面板摆好状态 → 指针移到某时刻 → 点「在指针处打关键帧」 - 拖动指针可逐帧预览所有对象在该时刻的姿态 - 点关键帧方块可选中（变橙）以便更新 / 删除；方块右上角的 × 可直接删除单帧 - 「清空全部」一键清除所有关键帧（可撤销） - - 「导出视频·上帝视角 / 机位视角」录制整段动画为 WebM + - 顶部手柄可上下拖动调整面板高度（会记住）；删除对象时其关键帧轨道一并清理 + - 「导出视频·上帝视角 / 机位视角」逐帧快速导出整段动画为 MP4 ## 快捷键 @@ -125,7 +132,9 @@ http://127.0.0.1:4173/ - **物体关键帧**：记录位移 / 旋转 / 缩放，位移与缩放帧间线性插值，旋转使用四元数球面插值（slerp），确保转身等动作沿最短路径平滑过渡。 - **镜头运镜关键帧**：记录机位位置、注视点 target、视野 FOV；仅 `manual`（手动坐标）相机支持打运镜关键帧，锁定物体的相机（`targetMode = object`）不支持。 - **编辑与预览**：暂停态下用 gizmo 或右侧属性面板编辑对象（被拖对象不会被回放覆盖）；拖指针 scrub 实时预览各时刻姿态（机位视角下镜头同步跟随）；点播放看连续动画。 -- **视频导出**：基于浏览器 `MediaRecorder` 录制 canvas 画面，优先 MP4（Chrome 120+ / Safari），不支持时回退 WebM（Chrome / Firefox）。导出范围 = 时间轴时长，从 0 播放到末尾自动下载。当前为 MVP：无音频、分辨率随画布尺寸。 +- **视频导出（WebCodecs 快速路径）**：不实时录屏，而是按 30fps 逐帧推进时间轴离线渲染并编码为 H.264 MP4——导出 10 秒动画约 1~3 秒完成，逐帧时间精确、结尾不丢帧。导出分辨率固定（按画幅比例、短边 720），不随视口布局（如时间轴拖高）变形；导出完自动恢复视角与指针。 +- **视频导出（兜底路径）**：浏览器不支持 WebCodecs 时回退 `MediaRecorder` 实时录制（优先 MP4，其次 WebM），耗时 = 视频时长。 +- **动作与姿势分层**：基础动作（走路 / 跑步）为关节基础层，姿势滑杆写入的是叠加偏移；切换动作时姿势自动重置为站立基础态，删除对象时其时间轴轨道一并清理。 ## 数据与嵌入 @@ -178,7 +187,7 @@ npm test - `npm run build` 可通过 - 构建阶段会出现少量 Vite 警告：部分模型库缩略图 URL 会保留到运行时解析，同时主包体积超过默认 chunk 警告阈值 -- `npm test` 新增了关键帧动画与视频导出相关用例（时间轴插值、播放状态与录制模式、store 关键帧 actions、时间轴面板交互等）；剩余 `8` 个既有失败用例（模型库面板、视口画幅/轴向命中区、个别姿势预设、样式断言）保持不变，未引入回归 +- `npm test` 含时间轴插值、动作步态曲线、视频导出、姿势 / 动作面板交互等用例（397 个）；剩余 `8` 个既有失败用例（模型库面板、视口画幅 / 轴向命中区、坐标输入拖柄、取景器缩放、个别姿势预设）保持不变，未引入回归 ## 开源说明