ActorLab Canvas

浏览器里的无限画布：把文本、图片、视频、音频与生成节点连成一条创作链路， 在节点内直接裁剪与截取，并在任意节点中打开 3D 导演台编排角色、机位与全景， 把截出的镜头送回画布拼成分镜。

▶ 在线体验：actorlab.pages.dev

数据全部留在浏览器：画布文档与二进制素材分别存入 IndexedDB，无后端、无账号、 刷新即恢复。

画布

能力	说明
节点	文本 / 图片 / 视频 / 音频 / 3D 导演台，以及「上传」——选文件后按类型直接建成对应节点。媒体节点按素材真实分辨率成形，竖图得竖节点，16:9 得宽节点。
连线	节点左右两侧的连接点跟随光标磁吸；连线可剪断，选中或悬停时有流光高亮。连接规则会说明为什么某条连线不被接受，而不是默默拒绝。
就地新建	双击空白处、或把连线拉到空白处松手，在落点弹出创建菜单；后者建成的节点已经连好线。
分组	框选后成组，组可命名、可换色、可整理成员（宫格 / 水平 / 垂直），组标签显示成员数量。
对齐吸附	拖动时吸附到其他节点的边缘与中心，并画出对齐参考线；吸附容差按屏幕距离计算，任意缩放下手感一致。
多画布	画布之间随时切换，可重命名、创建副本、在新窗口打开。
编辑	复制 / 剪切 / 粘贴、撤销 / 重做、自动布局、框选、平移与选择两种拖拽模式，全部带快捷键。

节点内编辑

能力	说明
图片裁剪	裁剪框直接叠在节点的图片上，比例可选自由 / 1:1 / 16:9 / 9:16 / 4:3 / 3:4，读数按原图分辨率显示。
音频截取	选区窗口叠在节点的波形上，可拖动可微调，试听只播选中的片段。
视频截帧	截当前帧 / 首帧 / 尾帧；「当前帧」取的就是节点播放器停在的位置。

编辑结果不会覆盖原节点，而是在旁边生成一个新节点并记录来源——原始素材永远留着。

生成节点

选择模型后在节点下方展开创作面板：按平台分级的模型选择、模型自带的参数表 （分辨率 / 比例 / 时长 / 数量）、连线进来的参考媒体与文本、以及提示词与长度上限。 参考数量超出模型上限时会明确指出是哪一类超了多少。

模型目录与参数为静态配置。公开版本不接入后端，生成结果为本地占位资源。

3D 导演台

导演台是画布上的一种节点，打开后是完整的实时 WebGL 场景，关闭时场景写回节点。 同一时刻只有一个导演台是打开的，因此始终只存在一个 WebGL 上下文。

能力	说明
场景搭建	8 种角色素体、道具（方块 / 圆柱 / 球体 / 人体素模）、机位与群众阵列，支持本地上传 .glb；移动 / 旋转 / 缩放、网格吸附、对象锁定、成组与副本。
姿势系统	全身多轴关节控制（身体、躯干、头部、肩 / 肘、髋 / 膝，左右成对），配 20 组姿势预设。
机位调度	摄像机是一等实体，独立 FOV 与注视目标，15+ 运镜预设；导演视角 / 机位视角一键切换，机位视角带取景框与三分构图网格。
全景背景	内置图片 / 视频全景库或本地上传，等距柱状全景球支持天空颜色、水平旋转与半径调节。
截图分镜	按取景框裁剪导出画面（截图时隐藏辅助网格与坐标轴），可批量「发送到画布」——每张截图成为一个图片节点，并与来源节点连线。

技术栈

React 19 · TypeScript · Vite · Three.js · React Flow · Tailwind CSS v4 · shadcn/ui (base-nova) + Base UI · Zustand · i18next · mediabunny · Biome

许可证

MIT