基于COZE平台GLM5.1开发简易3D导演台布局，10分钟速成傻瓜式教学（小白也能搭建）

基于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记得把对应的对标产品图片给到GPTGPT 分析完后我大概就明白了这个东西本质上并不一定是什么很重的高精度角色模型它更可能只是由一些基础几何体组合而成比如球体圆柱体胶囊体关节结构简单层级组合也就是说它更像是一个参考人偶 / 占位骨架而不是完整的角色系统。然后根据对应的结果进行分析一下用的什么技术这一步很关键。因为如果一开始就把它想成复杂骨骼动画系统那项目复杂度会被想得特别夸张很容易直接放弃。但 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-fiberR3F也就是用 React 组件的思路去写 3D 场景。然后他给到了我对应的框架网站https://fiber.framer.wiki/tutorials-testR3F 是什么我去看了一下这个框架的说明核心介绍大概是这样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 了积分为 0https://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_code43aba32a0684470eb10b9805d80e5aa7我打开的是 COZE 编程网站https://code.coze.cn/home?from_sourcehttps%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/previewCOZE使用GLM5.1的积分消耗量是真的夸张不过效果也是很满意的十一、这次实践给我的几个启发1. 不一定要先会先拆也很重要以前总觉得不会 3D、不会导演台、不会 Three.js就根本不可能做这种东西。但这次实践下来我发现你不一定先全会先把产品拆明白也很重要。只要你能说清楚它是什么它怎么交互你要实现哪些核心功能AI 就能帮你补很大一块。2. 截图分析是现在非常高效的逆向方式这次我几乎就是靠截图 提问 PRD 执行把整个项目一点点推出来的。所以以后看到一个不错的产品不一定先被吓到可以先问 AI这个东西是什么技术实现的最小 MVP 怎么做React 有没有对应框架数据结构应该怎么设计先做哪些功能最值很多时候路就这样慢慢出来了。3. PRD 真的很关键我以前总觉得 PRD 是大团队、大公司才搞的东西。但现在配合 AI 编码我反而越来越觉得PRD 是给 AI 最好的“任务说明书”之一。没有 PRDAI 很容易乱写。有了 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进行开发多机位导演台阵列摆位角色姿势系统导演台转提示词导演台转视频工作流欢迎交流后续会更新更多有趣的实战内容喜欢的话可以关注我哦有建议或者想法也欢迎在评论区讨论。这篇文章里肯定还有很多不足的地方也请大家多多包涵。