把 AI 视频分镜玩成拍电影ArtCraft 3D 舞台的摆姿与场景调度入门【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraft用 AI 生成视频最让人上头的不是生成本身而是失控你写下少女在樱花树下转身回眸模型给了你十版构图各异的抽卡结果机位、走位、动作全靠运气。ArtCraft 给出的解法是把生成拆成两段——先用一个真正的 3D 舞台把场景、角色、机位、动作全部摆出来再让视频模型照着这份确定性的分镜去执行。这篇文章基于 ArtCraft 仓库frontend/libs/components/pagescene的源码带你走完从角色摆姿、镜头调度到输出成片的完整链路理解这套像导演一样工作的 3D 分镜工作流到底是怎么实现的。为什么需要一块 3D 舞台ArtCraft 对 3D 编辑器的定位写得很直白它叫pagescene代码里也常被写作 Stage3D——一个名副其实的舞台。整个模块的单向数据流是Three.js 引擎 → 类型化事件总线 → EngineStoreBridge → Zustand 状态 → React → actions → 引擎方法见 AGENTS.md也就是说引擎只负责渲染与计算所有 UI 状态由单一 Zustand Store 承载任何操作都通过 action 回流到引擎保证了你在舞台上看到的就是最终要拍到的。更关键的设计原则写在同一份文档里3D 编辑器不再生成它只负责编排compose生成交给 2D 和视频体验。这解释了为什么 3D 舞台在 ArtCraft 里不是又一个抽卡入口而是一块分镜板——它把 AI 视频里最不可控的三个变量场景布局、角色动作、机位运动变成你可以亲手摆弄的确定性对象最后再交给视频模型去演。舞台上的素材来源也足够宽ArtCraft 的模型目录把 62 个主流模型收进同一个 Catalog其中 3D 网格生成由混元 3D、Meshy、Rodin 等提供。仓库内frontend/libs/model-list/src/lib/lists/Object3DModels.ts记录了 Tencent 系的两款hunyuan_3d_3Highest quality 3D mesh generation约 2 分钟与hunyuan_3d_2_0Faster, lower fidelity约 45 秒——这是把一张图变成可摆姿 3D 角色/道具的直接通道。摆姿让角色先演起来进入 3D 舞台后顶栏中央的工具栏Controls3D.tsx承担了搭台的入口号弹窗提供 ArtCraft Presets、Animations、My Library、Upload 3D Model、Upload Image、Upload Splat 六种加资产方式旁边还有一支魔法棒按钮直达Create 3D model from imageImage-to-3D。舞台上的对象分三类——object | character | shape见 PageSceneStore.ts角色character是唯一可以演的对象因为它有骨骼。摆姿的开关在 PoseModeSelector.tsx选中一个角色后顶部会出现 Enter Pose Mode快捷键 K点击后mouse_controls.toggleFKMode()进入FK正向运动学摆姿模式拖拽骨骼关节即可调整角色的站姿、视线、手部位置摆完点 Done 退出。旁边紧挨着 Add Animation 按钮打开动画素材库。动画库值得一提AnimationsModal的 Animations 标签页由服务器精选engine_categoryanimation的 GLB/GLTFAPI 不可用时回退到内置的 37 个精选演示片段。动画片段可以点选添加也可以直接拖到 3D 舞台的角色上——拖拽过程中DndAsset会预加载片段的骨骼轨道节点名依赖mixamorig:*命名约定与角色骨骼实时比对不兼容的骨骼直接亮红牌拒绝避免动作穿模式的尴尬。时间轴上的空隙里角色自动回到静止姿态rest pose而不是停在动画最后一帧细节处理相当到位AGENTS.md。仓库自带的角色资源如frontend/apps/artcraft/app/public/resources/characters/roko.png就是这类可导入舞台的 3D 角色素材的预览形态——把静态角色放到舞台上摆姿、挂动画它才开始活。场景调度镜头语言是摆出来的真正把 3D 舞台和拍电影联系起来的是它双相机的镜头模型。PageSceneStore.ts里内置了两台默认相机mainMain View视口相机默认停在(-4.5, 4, 6)看向(0, 0.5, 0.6)焦距 17——一个 Blender 风格的拉远抬高 3/4 视角方便你俯瞰全局cam2Camera 2渲染相机默认在(0, 0.6, 1.5)看向原点焦距 10。关键的设计是渲染相机不是藏在设置里的数字而是一个看得见、摸得着的场景对象。引擎会在场景里创建名为::CAM::的线框平截头体frustum占位对象放在 layer 1仅编辑器可见、不参与渲染选中它就能用 Move/Rotate 工具像挪机位一样挪镜头。双击舞台上的平截头体或点击 Outliner 里相机行的从相机视角查看按钮就进入CAMERA_VIEW 状态——视口相机被移动到渲染相机的位置你看到的画面就是将来输出的画面。进入相机视角后编辑器会叠加一套真正的取景辅助渲染画幅的宽高比边框、三分法构图参考线画幅外区域变暗不会被拍到左上角显示当前焦距如 35mm并可调整。宽高比由CameraAspectRatio枚举控制SceneContainer/Letterbox.tsx负责绘制上下黑边遮罩确保取景框和输出比例严格一致。这些能力与 AGENTS.md 中相机视图章节描述的规则逐条对应。有了机位还要有机位运动。相机的变换和场景对象一样可以被关键帧记录在时间轴上为::CAM::打关键帧就能做出推拉摇移——镜头语言从此不是 prompt 里的一句缓慢推近而是时间轴上一串精确到秒、到坐标的关键帧。时间轴把分镜变成镜头3D 舞台的时间轴数据模型在 types.ts 里定义得非常工程化interface Keyframe { id: string; time: number; // 秒从时间轴起点算 transform: TransformSnap; // 该时刻的完整变换位置/旋转/缩放 easing: EasingSpec; // 进入下一个关键帧的缓动曲线 }每个对象一条轨道TimelineTrack每个关键帧存的是完整变换快照播放时用左侧关键帧的EasingSpecCSS cubic-bezier 语义的贝塞尔控制点插值到下一帧。内置四档缓动预设linear / easeIn / easeOut / easeInOut默认easeInOut选中关键帧会弹出 MotionPopover可以直接拖贝塞尔手柄定制运动节奏——这是动画师熟悉的打关键帧调曲线工作流。细节上还有两个贴心机制一是自动关键帧——对一个已有过关键帧的对象继续做 gizmo 拖动或属性修改TimelineController.autoKeyIfTracked(uuid)会在当前播放头位置自动补一帧不用每次手动点加号二是片段过渡——相邻两段动画剪辑之间的空隙可以开启transitionEasing用 0.3 秒的默认过渡窗把前一段的出口姿态与后一段的入口姿态做权重交叉淡入evaluateAt中(1−w, w)权重 lerp走、停、转身之间的衔接因此平滑。角色的动画片段在同一行内不允许重叠系统会自动吸附到最近的空隙从机制上杜绝了动作打架。从舞台到成片一次完整的 AI 视频流程把上面所有能力串起来一条完整的产出路径是这样的搭台用 Presets / 上传 GLB / Image-to-3D 把角色和道具摆上 3D 舞台用 MoveT/ RotateR/ ScaleG与 World/Local 变换空间X 切换完成构图摆姿与表演选中角色进入 Pose Mode 摆关键姿态或从 Animations 库拖入 Mixamo 动画剪辑在时间轴上铺排走位动作调度镜头选中::CAM::平截头体调整机位双击进入相机视角看取景框必要时为相机打运动关键帧切换 Record 模式点击顶部 Build/Record 模式胶囊进入只读回放一切编辑工具隐藏视口锁定在渲染相机上只保留播放/进度条Capture 或 RecordRecordControls.tsx 提供两个输出按钮——Capture 导出当前帧静帧Record 把整条时间轴渲染成视频。视频编码的实现相当硬核见 TimelineRecorder.ts它不用实时 MediaRecorder其 webm 时长头不可靠而是用mediabunnyWebCodecs做逐帧确定性编码——seekTo(i/fps) → renderScene() → CanvasSource.add()默认 30fps可输出 MP4avc/ WebMvp9编码前先冻结实时渲染循环、隐藏网格、切到渲染相机的目标分辨率finally块里全部还原。编码过程支持中途取消encodeCancelSignal配合 Escape 快捷键。产出物ProducedArtifact区分image | video先以 object URL 形式在本地 CompletionModal 预览随后走 recordOutput.ts 的适配器接口上传入库sceneOutputAdapter.ts 用MediaUploadApi的UploadNewVideo/UploadImage上传标记为非中间文件成功后openMediaLightbox打开应用内 Lightbox 供预览与二创。最后一步正是那个3D 只编排、不生成原则的落地静帧可以一键送到 2D 画布继续精修applyEditOnCanvasFromImage视频产物则作为**参考视频reference video**注入create-video流程交给 Veo、Sora 2、Kling、Seedance 这类视频模型做最终生成——你辛苦调好的机位、动作、节奏此时全部变成视频模型照着演的确定性分镜。这就是 ArtCraft 3D 舞台的全部意义把 AI 视频从抽卡变成拍电影而导演你只需要站在舞台上。如果你想继续深入建议从这几个文件入手入口组件 Stage3D.tsx宿主注入 adapter 的挂载点、PageSceneStore.ts全部 UI 状态与默认相机、engine/editor.ts引擎主类与渲染路径以及 AGENTS.md整个 3D 舞台的架构契约与设计决策记录。【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraft创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考