Agent Skills
返回列表
3D导演台

3D导演台

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_68d8fafb/virtual-3d-studio。

技能介绍

要解决什么问题

做 3D 分镜、虚拟棚拍或角色摆姿时，传统流程往往依赖 DCC 软件加离线渲染，迭代成本高。若你希望在浏览器里快速搭一个「导演台」——导入演员、调机位、试运镜并导出画面——就需要一套可部署的前端工程，而不是零散脚本。

技能如何工作

该技能基于 Three.js 0.160 + Vite，纯 vanilla JS（无 React/Vue 依赖），部署模板后得到完整 WebGL 视口：轨道控制、网格地面、GLB/GLTF/FBX 拖放导入与骨骼检测。未准备模型时可用内置方块人骨架与 5 种程序化动画（idle/walk/wave/jump/run），另有 12 种静态姿势预设。

导演向能力集中在 Studio.js 与镜头系统：6 种景别（极广到特写）自动调整 FOV 与距离；14mm–200mm 焦距滑条；10 种运镜（推拉、横移、升降、orbit、follow 等）；多虚拟机位、视锥可视化与缩略图。地面绘制路径后，角色沿 Catmull-Rom 曲线行走。布光可调主光强度/色温、补光与环境曝光；构图叠加 thirds、黄金分割、安全框等 SVG 辅助线；环境预设含 studio/outdoor/void。输出侧支持虚拟机位 MediaRecorder → WebM 录制与 PNG 截帧。

适用边界与注意

需 WebGL2 与 MediaRecorder（Chrome/Firefox/Edge 较稳妥）。复杂导入模型可能比默认低模方块人更吃性能，录制前可考虑 LOD。扩展新动画、姿势、景别或运镜时，文档指向 AnimationSystem.js / Studio.js 中的注册点，适合团队二次定制而非开箱即用的 SaaS。

使用场景

  • 动画或分镜前期，需要在浏览器里切换六类景别、试十种运镜，再定镜头表而不是先开重型 DCC。
  • 已有人物 GLB/GLTF/FBX，要在网页里套用 12 种姿势预设、调主光色温，并从虚拟机位导出 WebM 或 PNG。
  • 地面绘制行走路径，让角色沿 Catmull-Rom 曲线移动，同时用 follow/orbit 等运镜跟拍并录制短片。
  • 教学或内部分享涉及焦距与安全构图，需要学员本地打开页面即可操作多虚拟机位与构图辅助线。

适合人员

  • 独立短视频或虚拟形象创作者，持有 GLB 演员模型，希望在浏览器里布光、摆姿并录虚拟机位画面而不用完整 Blender 流程。
  • 讲授分镜或摄影的教师，需要可部署的纯前端 Three.js 导演台模板，课堂演示景别、运镜与构图线。
  • 接活动页或品牌互动需求的前端工程师，要在 Vite 模板上扩展景别/运镜而非从零搭建 WebGL 场景。
  • 动画或广告 previz 统筹，提案阶段向客户展示角色走位、网格地面环境与多机位预览。