ARTICLE · 1027515

不用建模,AI 搞定 3D 博物馆 APP,全流程展示 | Vibe Coding 案例第 7 期

发布时间：2026-09-17 22:05:43 最近访问：2026-09-17 22:05:43

以上是近期完全通过 AI 制作的网站，中间的家具展示区域可以 360 度拖拽查看，还可以放大查看细节。

关注

重播分享赞

Vibe Coding 实操案例来到第七期了，今天我们做这个 ⬆️，3D 博物馆小应用，可以 360 度查看文物藏品，线上逛展哦～

这个案例中用到的工具是：

- Tripo AI：生成 3D 模型

- ChatGPT：生成 UI 界面图片

- Codex：生成 UI 界面代码

接下来看看具体过程：

第一步：生成 3D 模型

现在很多酷炫的网站都用到了 3D 素材，但是 3D 素材制作很麻烦。虽然最近 GPT-6 可以调用 Blender 建模，但是精细度完全达不到生产级标准。

试了一圈 AI 生成 3D 模型的工具，发现Tripo AI 效果不错。

操作很简单，先点击生成模型功能：

然后，在左侧上传文物图片，点击生成就可以了

一段时间后，高精度的模型就生成好了，可以点击下方导出按钮导出：

同样的方式，再生成一些文物模型，这一步就完成了。

第二步： ChatGPT 生成 UI 界面图片

用 AI 生成 UI 界面，特别是移动端界面时，尽量不要直接让 Codex 这种写代码的工具去做。

具体原因我在之前的案例中反复说过，它们直接生成的界面，视觉水平比较差，基本上就是个能点击的原型。

所以最好先生成图片，然后根据图片再让它写代码。

这个案例中，我先让 AI 自由发挥，生成一个博物馆文物展示应用，我发现它做的虽然专业度是不错的，但比较复杂：

所以我根据它第一版生成的内容，针对性的简化处理，挑选了一些我想要的功能，比如首页文物列表，文物详情页等，然后生成的内容就挺不错了：

到这里，UI 图也生成得差不多了。进入写代码阶段：

第三步：Codex 生成应用

第一轮的指令非常简单，就是根据我的两张 UI 图，一比一还原界面，并且使用已经放在项目文件夹中的 3D 模型。

以下就是第一轮的结果，还原度还不错，就是模型光线太暗了：

继续调整细节，我让它调整了光线，同时增加一个全屏查看藏品的功能：

这次调整下来就好多了，然后经过一些小细节处理，就完成啦：

关注

重播分享赞

好了，今天先这样。有任何问题可以评论区提问～

（文章完）

往期内容

相关学习资料