How-to72°

Vibe Coding 教育应用:图片转 3D + Codex 搭建交互解剖网站

Why we picked it

GPT Image+Tripo+Codex 做 3D 解剖站,900MB 优化到 28.6MB,给孩子科普。

thebuggeddev 用 Vibe Coding 方法搭建了一个 3D 人体解剖学习网站:先用 GPT Image 2.

Image · shao__meng
Body

0 生成器官图片,再用 Tripo AI 转成 3D 模型,最后交给 Codex 写主提示词完成网站。初版每个 3D 模型约 120-150 MB,网页帧率只有 16fps;

经过 Codex 多轮优化,模型降至 2-5.5 MB,总资源从约 900 MB 减到 28.

6 MB,并按需加载。Codex 还自动生成了器官位置插图和交互热点标注。

作者表示受 DilumSanjaya 的 3D 动植物细胞项目启发,并打算用同样方法给 7 岁的儿子做宇宙星球互动展示网站。

Original · shao__meng

这才是我们希望 Vibe Coding 带给教育的变化! 我们小时候学到生物器官、星球、几何图形这些复杂物体时,只能靠学校实验室摆着的教具,自己脑补。 互联网时代开始有在线教育团队做这些事情,把现实物体建模,搬到数字课堂中,但技术还是不够普及,模型也不够个性化。 现在 Vibe Coding 之下,每个人都能构建网站,再结合 @threejs 这种适合网站渲染 3D 模型的引擎、结合 @tripoai @MeshyAI 这些 AI 生成 3D 模型的能力,快速构建个人性模型并展现在网站中,变得更简单了。 非常感谢 @thebuggeddev 分享的思路:Image -> 3D,再把 Image 和 3D 都放到 Codex 中作为资源来搭建网站。 这个思路用来做 3D 模型展示太直观了,我也想给我儿子做这样的网站,他现在 7 岁,正式对宇宙万物充满好奇的时候,我再怎么查资料给他讲,都不如他自己看到、操作到这些 3D 模型,对空间的感受来的直观。 我先让 ojo design 100% 复刻这个产品,因为原网站提供了足够的参考和资源准备,ojo 在学习完原网站后得到的产品说明就很完整,生成的网站也很接近原网站。 接着我会再接入 AI 3D 模型生成能力,把网站做成可以实时生成 3D 模型并交互展示的状态,先从宇宙和星球开始!

Industry Coordinates & Source Verification

This report is categorized under AITOP's "How-to" desk. Within our cross-regional analytical framework, it directly maps to AI developer toolchains, coding agents, and engineering workflows. Key entities and technical topics under continuous tracking include Vibe Coding, Codex, Tripo AI, three.js.

Source attribution: curated from shao__meng (@shao__meng).