技巧72°

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

这才是我们希望 Vibe Coding 带给教育的变化! 我们小时候学到生物器官、星球、几何图形这些复杂物体时,只能靠学校实验室摆着的教具,自己脑补。 互联网时代开始有在线教育团队做这些事情,把现...

精选理由

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

AI 摘要

thebuggeddev 用 Vibe Coding 方法搭建了一个 3D 人体解剖学习网站:先用 GPT Image 2.0 生成器官图片,再用 Tripo AI 转成 3D 模型,最后交给 Codex 写主提示词完成网站。初版每个 3D 模型约 120-150 MB,网页帧率只有 16fps;经过 Codex 多轮优化,模型降至 2-5.5 MB,总资源从约 900 MB 减到 28.6 MB,并按需加载。Codex 还自动生成了器官位置插图和交互热点标注。作者表示受 DilumSanjaya 的 3D 动植物细胞项目启发,并打算用同样方法给 7 岁的儿子做宇宙星球互动展示网站。

图片来源 · shao__meng
原文 · shao__meng

这才是我们希望 Vibe Coding 带给教育的变化! 我们小时候学到生物器官、星球、几何图形这些复杂物体时,只能靠学校实验室摆着的教具,自己脑补。 互联网时代开始有在线教育团队做这些事情,把现...

这才是我们希望 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 模型并交互展示的状态,先从宇宙和星球开始! Your browser does not support the video tag. 🔗 View on Twitter The Bugged Dev @thebuggeddev Only if education could be this interactive ❤️‍🔥 I've had a looong wish to build something genuinely useful through vibe coding, and I finally did it. A 3D human anatomy application built with @threejs using GPT 5.6 Sol. It all started with a single design image that I created using GPT Image 2.0. I then used it to generate every 3D organ image, one by one. Next, I converted each of those images into 3D models using @tripoai (and no, they didn't sponsor this 😄). After that, I opened Codex, wrote a master prompt based on the design, and gave it the prompt, the design image, and all the 3D models. Codex built the first version beautifully, but there was one big problem. Every single 3D model was nearly 120-150 MB. That obviously wasn't practical for the web and was giving a performance of 16fps. After a few iterations, Codex optimized each model down to roughly 2–5.5 MB while preserving the visual quality, reducing the total asset size from ~900 MB to just 28.6 MB. And each model loads on demand. Along the way, Codex also generated those anatomical illustrations showing where each organ sits in the human body, and even created the interactive hotspot markers that explain different parts of every organ. It handled all of that. The process wasn't exactly one shot, but it also wasn't difficult. You just have to do it step by step. It genuinely felt like building something that could make learning anatomy much more engaging. The inspiration came from @DilumSanjaya 's 3D animal plant cell project. I remember seeing it and thinking, "I want to build something like this one day." And I did it :D Live anatomy-livid.vercel.app VB Code github.com/thebuggeddev/a… xO Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 1 🔄 0 ❤️ 1 👀 250 📊 2 ⚡

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