基于COZE平台GLM5.1开发简易3D导演台布局，10分钟速成傻瓜式教学（小白也能搭建）
前言
这次想分享一个很有意思的实战项目：复刻一个网页版 3D 导演台。
先说结论：
我以前并没有开发过 3D 导演台，甚至很多底层技术也不熟。
但在 AI 的帮助下，这类产品的复刻门槛真的被拉低了很多。
现在很多东西的开发流程，已经可以简化成：
截图 → GPT 分析 → 输出 PRD → AI 编码工具执行 → 中途报错继续修 → 最终跑通
也就是说，你不一定非得先精通所有技术细节，只要你有一个大概思路，知道目标结果是什么，很多事情就能先做起来。
全文用到的工具
这次主要用到 3 个核心工具：
- GPT：分析产品、拆解技术路线、输出 PRD 文档
- Gemini 3.1 Flash：基于导演台底图 + 角色参考图做图生图
- COZE 编程：根据 PRD 快速实现网页功能模块
后面我还把生成的图片继续拿去做视频，整个链路跑通之后，体验还是很爽的。
我为什么想做这个东西？
最近在体验一些 AI 创作产品的时候，我发现其中有一个模块特别有意思：3D 导演台 / 3D 摆位台。
第一眼看上去会觉得：
这东西也太难了吧 🤯
但仔细想想，它的核心逻辑其实很清晰：
- 在一个简化的 3D 场景里摆好小人
- 把对应的道具放好
- 确定镜头、位置和前后关系
- 再把这个“骨架图”或“构图底图”丢给图像模型继续生成
这样做的好处很明显：
- 场景更稳定
- 角色位置更可控
- 前后层级更清晰
- 不会扩散得特别散
本质上就是：
先用 3D 导演台搭一个稳定的空间骨架，再基于角色图和底图去做图生图。
也就是下面这种思路：有一个骨架图 + 有对应的角色图
一、先让 GPT 分析：这个“小人”到底是什么技术实现的？
一开始我并不知道这个小人是怎么做出来的，所以最直接的方法就是：
截图，丢给 GPT，让它先分析。
我的提示词如下：
这个小人是什么技术实现的？（PS：记得把对应的对标产品图片给到GPT）
GPT 分析完后，我大概就明白了：
这个东西本质上并不一定是什么很重的高精度角色模型，它更可能只是由一些基础几何体组合而成，比如：
- 球体
- 圆柱体
- 胶囊体
- 关节结构
- 简单层级组合
也就是说，它更像是一个参考人偶 / 占位骨架，而不是完整的角色系统。
然后根据对应的结果进行分析一下用的什么技术：
这一步很关键。
因为如果一开始就把它想成复杂骨骼动画系统，那项目复杂度会被想得特别夸张，很容易直接放弃。
但 AI 帮我拆完之后，我才发现：
这个东西的 MVP 版本，其实没有想象中那么难。
二、确认技术路线：有没有 React 组件框架？
因为我后面想做的是网页版，而且我自己更偏向前端思路，所以我继续追问 GPT：
对应的有react组件框架是吧？！
GPT 给我的建议技术栈如下：
推荐技术栈 基础层 React Three.js react-three-fiber：把 Three.js 变成 React 组件写法 @react-three/drei：常用现成组件库 leva 或 zustand：参数面板 / 状态管理看到这里我就基本确定方向了：
React + Three.js + react-three-fiber（R3F）
也就是用 React 组件的思路去写 3D 场景。
然后他给到了我对应的框架网站：
https://fiber.framer.wiki/tutorials-test
R3F 是什么？
我去看了一下这个框架的说明，核心介绍大概是这样：
Introduction 介绍 React-three-fiber是threejs的React渲染器 用声明式的语法，配合可复用、自包含的组件来创建可以根据状态响应的可轻松交互的三维场景，并且可以轻松融入React的生态系统。npminstallthree @types/three @react-three/fiber 有任何限制么？ 比纯Threejs慢么？ 会跟得上最新的Threejs的功能么 任何在Threejs中可以用的，在react-three-fiber中都可以用，没有任何例外。 不会。它没有其他额外开销。组件的渲染是在React之外的。基于React的调度能力，它在某些方面的性能还优于直接使用Threejs。 是的。它通过JSX语法来实现Threejs的各种组件，<mesh />会被动态的转换成new THREE.Mesh().如果一个Threejs版本添加、删除或者改变了一些能力，你的项目的代码自然就会用上相关的能力，并不会需要进行额外的升级操作。这段话对我最大的帮助就是：
我不用硬啃纯 Three.js，也能用 React 组件的方式搭出一个 3D 导演台。
看看官方 Demo，确认这条路能不能走通
确认技术路线之后，我又去看了 R3F 官方示例：
https://r3f.docs.pmnd.rs/getting-started/examples
看完 demo 后我只有一个感觉：
这条路是能走的。
确实不错。
三、让 GPT 直接输出 PRD 文档
方向确认之后，就别再自己瞎想了，直接让 GPT 帮我把产品方案整理成PRD 文档。
我的提示词如下：
根据https://fiber.framer.wiki/tutorials-test和https://r3f.docs.pmnd.rs/getting-started/introduction，给我对应的设计3D自定义导演台摆放道具PRD文档
GPT 直接帮我整理出了一份比较完整的 PRD，包括：
- 产品定位
- 页面结构
- 功能模块
- 技术建议
- 场景对象设计
- 机位系统
- 导出逻辑
- 数据结构建议
效果如下：
这一步我很推荐大家一定要做。
因为 PRD 一旦出来了，后面的 AI 编码工具就更容易理解你到底要做什么，而不是只能凭一句模糊的话去乱猜。
顺手把 PRD 导出成 Markdown
输出对应的 PRD 文档后，我又让 GPT 直接给我可以下载的 md 文件。
提示词如下：
变成可下载的md文件
文档上传到 CSDN 了，积分为 0：
https://download.csdn.net/download/weixin_44151887/92809203
四、开始让 AI 真正写代码
PRD 有了，下面就进入真正的开发阶段。
这里我选的是COZE 编程。
之前我其实也体验过不少 AI 编码平台，如果你是新手，想快速练手，我觉得可以这样选：
- 小白练手：COZE
- 进阶开发：CLAUDE CODE / TRAE / CURSOR
打开 COZE 编程，选择模型
没注册过COZE可以用我的邀请码注册多送5000积分
https://www.coze.cn/overview?invite_code=43aba32a0684470eb10b9805d80e5aa7
我打开的是 COZE 编程网站：
https://code.coze.cn/home?from_source=https%3A%2F%2Fwww.coze.cn%2Fskills
模型我选的是：
- GLM5.1
我的体验是：
GLM5.1 效果确实更好，但是也更费积分。你们体验可以用GLM5
把 PRD 和需求一起喂进去
这里我的做法非常简单粗暴：
把刚才生成好的director_stage_prd_v2.md扔进去，再补一句大白话说明需求。
提示词如下：
director_stage_prd_v2.md ,搭建一个网页版3D导演台，可以自定义摆件，移动不同的小人，赋予不同的颜色，最后可以截图保存，可以移动不同视角方位
这一步我的体会是：
PRD + 大白话描述，对 AI 编码特别友好。
因为 PRD 负责约束结构，大白话负责补充真实目标。
五、中途报错怎么办？继续让 AI 修
整个开发过程当然不可能一次成功，中途还是会遇到各种报错。
但现在最爽的点就在这里：
报错也不用慌，继续把错误喂给 AI 修。
场景 1：直接报错
我当时中途就碰到了错误，处理方式也很简单：
- 在左下角智能体输入框继续描述问题
- 把报错信息发进去
- 或者直接把报错对应的代码行贴进去
如下图：
场景 2：白屏
后面还出现了白屏问题。
这种情况我也是直接描述现象：
- 页面白屏
- 哪一步操作后出现
- 控制台有什么报错
- 预期效果是什么
让智能体继续修就行。
如下图：
这一段其实特别像现在 AI 开发的真实节奏：
不是一次生成就完美，而是不断生成、不断修、不断逼近目标。
六、最终效果：项目真的跑起来了
修修补补之后，最终项目还是成功跑出来了。
最终开发完成：
我做出来的功能
目前这个版本已经能实现一些比较核心的能力：
- 左侧点击添加小人和物件
- 右侧修改大小和颜色
- 中间场景支持拖拽操作
- 可以切换视角
- 支持截图导出
效果如下，左侧可以点击小人和对应的物件（右侧可以改大小颜色），右侧拖拽，下面按钮截图保存：
说实话，做到这里的时候我还是挺开心的。
因为它已经开始有那个味道了。
有没有那味道了哈哈哈哈哈🤣，这是我做的：
这是对标的：
虽然肯定还有差距，但至少已经能看出核心方向是对的。
七、导出图片，再丢给 Gemini 做图生图
导演台做完以后，真正有意思的地方才来了。
我把导演台导出的底图拿出来，继续丢给 Gemini 做图生图。
这是导出的图片：
导出后的图片：
Gemini 图生图提示词
我传入了：
- 导演台底图
- 对应角色三视图 / 角色参考图
提示词如下：
基于图片1，背景换成室内家里面，黄色小人图2，蓝色小人图3
这里我最大的感受是：
有了导演台的底图之后，Gemini 出图明显更稳了。
尤其是多人关系、前后层级、位置关系，确实比纯提示词乱蒙要可控很多。
八、最后一步：把图片继续做成视频
图有了，下一步当然就是继续做视频。
我这里用的视频模型是：
seedance2-fast
理由也很简单免费生成：
当然是白嫖，我才不会去充钱，贵得要死！
豆包可以免费生成5个每天，用 Gemini 写对应的视频提示词。
最终成品视频如下：
咕咕嘎嘎和凑企鹅的温馨时刻
九、最终复刻效果怎么样？
如果让我自己给这次复刻打个分，我觉得大概可以说：
完成度 80% 左右。
虽然离真正成熟产品还有差距，但对我来说，这次最重要的不是“完全一模一样”，而是验证了一件事：
以前看起来很难的交互产品，现在真的可以靠 AI 把它快速做出来。
而且不是 PPT 式的“想法”，是真的能跑、能摆、能导出、能接图生图、还能继续做视频。
所以我最后的感受只有一句：
AI 真屌啊！我以为很难，结果居然真的实现了。
十、项目地址
COZE 项目已公开，链接如下：
https://code.coze.cn/p/7629188149981380643/preview
COZE使用GLM5.1的积分消耗量是真的夸张！不过效果也是很满意的！
十一、这次实践给我的几个启发
1. 不一定要先会，先拆也很重要
以前总觉得不会 3D、不会导演台、不会 Three.js，就根本不可能做这种东西。
但这次实践下来我发现：
你不一定先全会，先把产品拆明白也很重要。
只要你能说清楚：
- 它是什么
- 它怎么交互
- 你要实现哪些核心功能
AI 就能帮你补很大一块。
2. 截图分析，是现在非常高效的逆向方式
这次我几乎就是靠：
截图 + 提问 + PRD + 执行
把整个项目一点点推出来的。
所以以后看到一个不错的产品，不一定先被吓到，可以先问 AI：
- 这个东西是什么技术实现的？
- 最小 MVP 怎么做？
- React 有没有对应框架？
- 数据结构应该怎么设计？
- 先做哪些功能最值？
很多时候，路就这样慢慢出来了。
3. PRD 真的很关键
我以前总觉得 PRD 是大团队、大公司才搞的东西。
但现在配合 AI 编码，我反而越来越觉得：
PRD 是给 AI 最好的“任务说明书”之一。
没有 PRD，AI 很容易乱写。
有了 PRD，它就知道边界、模块、页面、目标和交付形式。
十二、总结
这次我做的事情其实可以概括成一句话：
我用 GPT 拆解一个 3D 导演台，用 COZE 把它做出来，再用 Gemini 和视频模型把整个创作链路串起来。
完整链路如下：
截图对标产品 → GPT 分析技术实现 → GPT 输出 PRD 文档 → COZE 根据 PRD 写代码 → 报错继续让 AI 修 → 导出导演台底图 → Gemini 图生图 → 视频模型生成动态视频整个过程让我最大的感受就是：
AI 不只是回答问题，它已经可以参与“从想法到产品原型”的整个过程了。
十三、最后放一下结果
复刻效果 80%，6666 👍
AI 是真猛，我一开始以为很难，结果居然真的做出来了。
如果你也在折腾：
- AI 绘图
- AI 漫剧
- 分镜工具
- 角色一致性
- 场景控制
- Web 3D 小工具
那这种“3D 导演台 + 图生图”的思路，我觉得还是挺值得试试的。
后续可以扩展计划
下面的计划要扩展的话推荐Cursor/Claude code/Trae进行开发
- 多机位导演台
- 阵列摆位
- 角色姿势系统
- 导演台转提示词
- 导演台转视频工作流
欢迎交流
后续会更新更多有趣的实战内容，喜欢的话可以关注我哦！
有建议或者想法也欢迎在评论区讨论。
这篇文章里肯定还有很多不足的地方，也请大家多多包涵。
