storyai-3d-director-desk

StoryAI-3D-Director-Desk 是一款完全运行在浏览器中的 3D 分镜导演台，由 GitHub 用户 jiguang132 开发维护。它将传统影视制作中只有在专业桌面软件里才能完成的镜头规划、场景摆位、机位设定等工作，整体迁移到了 Web 端，让导演、分镜师乃至 AI 视频创作者都能在浏览器里完成预演工作。

传统的分镜绘制依赖手绘或 Photoshop，每改一个镜头都要重新画一遍。在 AI 生成视频的工作流中，AI 负责生成画面，但角色的站位、机位角度、场景构图往往随机变化，导致同一场景中人物忽高忽低、视角飘忽——这正是 AI 视频"一致性"问题的根源之一。StoryAI-3D-Director-Desk 正是为解决这一痛点而生的：它让你在浏览器里用 3D 建模的方式把场景骨架搭好，确定每个角色的精确位置和摄像机角度，再交给 AI 填充画面，从而把 AI 视频从"随机生成"变为"精准控制"。

项目采用 React 18 + TypeScript 作为前端框架，Vite 6 负责构建和热更新，Three.js 提供底层 3D 渲染能力，@react-three/fiber（R3F）作为 React 与 Three.js 的粘合层，使 3D 场景可以用声明式组件的方式编写，大幅降低了维护成本。@react-three/drei 提供了 OrbitControls、Environment 等常用 3D 辅助组件，Zustand 承担全局状态管理（包括 Undo/Redo 逻辑和剪贴板），camera-controls 控制摄像机路径和视角切换。整体技术选型清晰现代，无历史包袱。

在架构上，项目将代码组织为清晰的职责分层：app/layout 处理顶层布局和组织画布与侧边栏的联动；editor/canvas 是 Three.js/R3F 的核心视口，负责渲染画幅框、工具栏、截图视图；editor/panels 实现左侧对象树与右侧属性面板的交互；editor/store 封装 Zustand 状态，提供撤销、复制、粘贴等编辑器核心操作；editor/io 处理截图导出、工程 JSON 序列化与反序列化；editor/loaders 负责本地 FBX/OBJ 模型和全景图的导入解析；editor/runtime 管理角色渲染、骨骼绑定和姿势应用逻辑；editor/schema 定义数据结构规范。

核心功能非常扎实：内置 8 种不同的人物 + 20 种姿势，涵盖了绝大多数日常场景所需；群众阵列功能允许添加大量群演而不卡顿；全景图导入让背景环境一步到位；截图记录功能可以将当前机位的画面一键保存；导演视角与机位视角的实时切换让创作者既能纵览全局，又能专注特定镜头的构图；视口比例框、九宫格、变换控制一应俱全，等同于在浏览器里搭了一个迷你 Blender。

本地开发仅需 Node.js >= 18，执行 npm install && npm run dev 即可启动，生产构建 npm run build 可通过。测试覆盖率为 304/312（约 97%），失败的 8 个用例主要集中在模型库面板、视口画幅区和个别姿势预设，对核心渲染流程无影响。测试框架使用 Vitest，支持多线程并行执行。

这个项目的行业意义在于，它填补了 AI 视频工作流中"场景规划"这一环的空缺。随着 Sora、Kling 等视频生成模型能力越来越强，如何精准控制生成画面中的空间关系成为新的瓶颈。一个浏览器就能打开的 3D 导演台，降低了专业预演的门槛，也让 AI 视频创作者拥有了控制一致性的利器。如果你的工作涉及 AI 生成视频的场景设计、镜头规划，或者需要轻量级 3D 预演工具，这是一个值得关注的项目。

图1：3D分镜导演台主界面 — 导演视角下的场景全景

图2：机位视角 — 从摄像机镜头看出去的构图效果

图3：内置角色与姿势库 — 快速搭建多样人物组合

图4：全景图背景效果 — 沉浸式场景环境

图5：对象树与属性编辑面板 — 精细控制每个场景元素

图6：机位截图记录 — 一键保存镜头画面

图7：全景视图效果 — 营造真实拍摄现场感