[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92302":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},92302,"storyai-3d-director-desk","jiguang132\u002Fstoryai-3d-director-desk","jiguang132","A browser-based 3D director desk demo built with React, Vite, and Three.js.",null,"TypeScript",393,96,79,1,0,258,55.96,"MIT License",false,"main",true,[],"2026-07-22 04:02:05","# 3D导演台\n\n一个基于 React、Vite、Three.js 和 React Three Fiber 的 3D 分镜导演台。它适用于轻量级预演、镜头规划和场景摆位，支持在浏览器里搭建角色、机位、场景和全景背景，并快速记录镜头与截图结果。\n\n## 功能概览\n\n- 导演视角 \u002F 机位视角切换\n- 内置8种不同的人物，20种不同的人物姿势\n- 角色、群演、基础几何体和机位快速添加\n- 本地 FBX \u002F OBJ 模型导入，可自定义模型库\n- 群众阵列，想多少人就可以多少人\n- 全景图导入与背景调节\n- 机位拍摄、截图记录和基础镜头管理\n- 视口比例框、九宫格、平移 \u002F 旋转 \u002F 缩放控制\n- 本地场景状态持久化\n\n## 界面截图\n\n![项目截图](.\u002Fimages\u002F01.png)\n![项目截图](.\u002Fimages\u002F02.png)\n![项目截图](.\u002Fimages\u002F03.png)\n![项目截图](.\u002Fimages\u002F04.png)\n![项目截图](.\u002Fimages\u002F05.png)\n![项目截图](.\u002Fimages\u002F06.png)\n![项目截图](.\u002Fimages\u002F07.jpeg)\n\n## 技术栈\n\n- React 18\n- Vite 6\n- TypeScript\n- Three.js\n- @react-three\u002Ffiber\n- @react-three\u002Fdrei\n- Zustand\n- Vitest\n\n## 项目结构\n\n```text\nsrc\n├─ app\u002Flayout          # 顶层壳布局，组织画布与左右侧栏\n├─ editor\u002Fcanvas       # Three.js \u002F R3F 视口、画幅框、工具条、截图视图\n├─ editor\u002Fpanels       # 左侧对象树与右侧属性面板\n├─ editor\u002Fstore        # Zustand 状态管理、撤销与剪贴板逻辑\n├─ editor\u002Fio           # 截图导出、工程导入导出、宿主通信\n├─ editor\u002Floaders      # 本地模型与全景图导入\n├─ editor\u002Fruntime      # 角色渲染、骨骼和姿势应用\n├─ editor\u002Fschema       # 数据结构、机位和视口相关定义\n└─ styles              # 全局样式\n```\n\n## 本地开发\n\n```bash\nnpm install\nnpm run dev\n```\n\n默认开发地址通常为：\n\n```text\nhttp:\u002F\u002F127.0.0.1:5173\u002F\n```\n\n如果本机端口被占用，Vite 会自动顺延到下一个可用端口。\n\n预览生产包：\n\n```bash\nnpm run preview\n```\n\n默认预览地址通常为：\n\n```text\nhttp:\u002F\u002F127.0.0.1:4173\u002F\n```\n\n## 常用操作\n\n- 顶部可切换 `导演视角` 与 `机位视角`\n- 左侧用于搜索、选择、分组查看场景对象，并支持可见性 \u002F 锁定 \u002F 删除\n- 中央视口用于摆放场景、切换变换模式、添加角色和机位、导入资源与截图\n- 右侧属性面板会根据当前选中对象自动切换为场景 \u002F 角色 \u002F 模型 \u002F 摄像机编辑面板\n\n## 快捷键\n\n- `Ctrl\u002FCmd + C`：复制当前选中对象\n- `Ctrl\u002FCmd + V`：粘贴复制对象\n- `Ctrl\u002FCmd + Z`：撤销最近一次操作\n- `Delete \u002F Backspace`：删除当前选中对象\n\n## 数据与嵌入\n\n- 当前场景与本地模型库会写入浏览器 `localStorage`\n- 支持导出工程 JSON，也支持通过文件重新导入\n- 支持“保存最近工程 \u002F 恢复最近工程”\n- 组件已包含宿主页面通信桥，适合嵌入到更大的创作工作台中\n\n## 构建与测试\n\n构建：\n\n```bash\nnpm run build\n```\n\n测试：\n\n```bash\nnpm test\n```\n\n最近一次核对结果：\n\n- `npm run build` 可通过\n- 构建阶段会出现少量 Vite 警告：部分模型库缩略图 URL 会保留到运行时解析，同时主包体积超过默认 chunk 警告阈值\n- `npm test` 当前为 `304 \u002F 312` 用例通过，剩余 `8` 个失败用例主要集中在模型库面板、视口画幅\u002F轴向命中区、个别姿势预设和样式断言\n\n## 开源说明\n\n- 本仓库以源码演示为主，适合继续扩展为更完整的 3D 导演工具。\n- 当前版本保留内置角色能力，并支持通过界面导入本地模型与全景图。\n- 若你基于本项目继续发布，请自行确认新增模型、贴图和场景素材的分发许可。\n\n## License\n\nMIT\n","这是一个基于浏览器的轻量级3D分镜导演台工具，用于影视、动画前期预演与镜头规划。核心功能包括多视角切换（导演\u002F机位）、角色与群演快速摆位、本地FBX\u002FOBJ模型及全景图导入、镜头拍摄与截图记录、场景状态本地持久化，技术上采用React + Vite + Three.js + React Three Fiber构建，具备良好的交互性与可嵌入性。适用于短视频策划、广告分镜、教学演示、独立动画制作等需快速可视化构图与镜头设计的轻量级创作场景。",2,"2026-07-08 04:30:02","CREATED_QUERY"]