给女儿做了一个 3D 史前动物博物馆,收录 18 种史前动物,免费开源,也分享给 V 友~

18 天前
 leonleung

2015 年注册 V2EX 到现在,我一直很喜欢逛「分享创造」。这里的老哥各个都是人才,各种新奇点子源源不断。

以前大多数时候我都在看别人分享,这次终于也有一个自己做完、愿意拿出来的东西。

我给三岁的女儿做了一座 3D 史前动物博物馆

在线体验:

https://leon-made-this.work/museum

github 链接:

https://github.com/s010s/prehistoric-animal-museum

目前一共有 18 种史前动物,陆地、天空和海洋三类。免费,不用注册,没有广告。

为什么会做这个

起因其实很小。

我女儿现在三岁多,看动画里的恐龙,只要出现追逐、战斗的场景,或者恐龙突然在画面里变得很大,她就会吓得跑回房间。

但过一会儿,她又会轻手轻脚地回来,站远一点偷看。有一次甚至躲到了凳子下面,只露出头继续看,特别搞笑。

所以我当时就想做一个小小的试验:

如果把追逐和战斗拿掉,只让恐龙安静地出现在电脑上,可以自己转一转、看看不同角度,她还会不会跑?

第一版我只放了三四只恐龙。她在旁边玩闹的时候看到了我的电脑屏幕,她非但没跑,反而还会很好奇。

当时我就觉得有戏!她不怕,这个小实验可以继续做下去。

于是三四只恐龙慢慢变成了 18 只史前动物。

它最开始叫“恐龙馆”,后来长毛猛犸象、鱼龙这些不算恐龙的史前生物也加了进来,我发现这个名字已经装不下它了。

于是改成了现在的:史前动物博物馆。

现在里面能做什么

其实功能很简单。

孩子选一只动物,可以拖动模型换角度,也可以放大缩小。中英文旁白都不会自动播放,想听的时候再点。

年代、体型、一些科学上还存在不确定性的地方,我放进了家长资料里。

动作我也尽量做得克制,没有把追逐、捕食和战斗作为主要展示方式。

手机、平板、电脑都可以打开。

而且这里有一个我后来刻意坚持的设计:

孩子使用的时候不会调用 AI 。

3D 模型、图片、旁白这些内容都提前做好了。AI 参与的是制作过程,而不是孩子每次打开页面之后再现场生成东西。

做到后来,比较折腾的其实是 3D 加载

一开始的想法很朴素:18 个模型,放网页里不就完了。

真这么做以后,很快就发现不行。

3D 文件本身不小,如果首屏就背着一堆模型跑,桌面端还能忍,移动端体验就很容易崩。

后来整个加载方式陆续改成了:

现在切换动物的体感比最初好很多。

我还在继续处理一个问题:尽量把 Three.js 真正移出首屏关键路径

现在页面本身可以先出来,但从静态页面进入可交互 3D 应用之间,还有进一步优化空间。

还有一个我觉得挺好玩的东西:让翼龙真的飞起来

馆里我自己比较喜欢的是无齿翼龙。最早拿到的模型其实是静态的。

做到这里的时候我突然想:肿头龙是可以动的,无齿翼龙是不是也可以飞来?能不能让它真的有一点“飞起来”的感觉?

后来我研究了一轮 Blender ,最后尝试用 Blender 配合 MCP ,让 AI 帮我处理骨骼和动作。

这也是整个项目里我第一次比较强烈地感觉到:

AI 对我来说最有价值的地方,不一定是“把网页代码写快一点”,而是让我敢碰以前基本不会主动碰的东西。

我不会做 3D 动画,但我现在可以先知道自己想要什么,再借助工具一点点把它做出来。

当然最后动作是否自然、是不是适合孩子看,还是得自己判断。

AI 找模型也没有想象中那么省心

18 种史前动物的模型不是一次找到的。

我会让 AI 帮我搜公开来源、整理候选,它能省掉很多机械搜索时间。但它也经常觉得自己已经完成了( 5.6 sol xhigh )。

比如找到一个题材正确、License 看起来也符合要求的低模,就觉得任务结束了。

实际点进去一看:

太粗糙,模型质量不行。要么就是太丑。

那就只能继续找。

License 也是一样。我最后不会直接采用 AI 的摘要,而是回到原始页面逐项核对。

所以这个项目做到后来,我对 AI 的感受反而变得比较简单:

它能大幅扩大一个人能搜索和执行的范围,但“什么值得留下”还是人的工作。

现在还有几个很现实的问题

目前部署主要用了 Cloudflare 的免费方案,也没有 ICP 备案。

所以国内网络访问并不理想。国内大部分环境第一次打开应该都会偏慢,在部分国内浏览器或微信内打开也可能出现提示。

这是我现在比较头疼的问题,暂时也没有好的办法,我也懒得去做 ICP 备案~

另外,目前关于孩子使用效果,我只有自己家的观察。女儿后来确实把 18 个动物都看了一遍,还学会了用 Tab 、Enter 和鼠标滚轮操作,但这不能推导成“其他孩子也一定喜欢”。

而且桌面鼠标对一个三岁的孩子来说其实挺大的,点选还不太容易。

所以它现在就是一个已经能用、但还会继续改的小产品。


再放一次链接,方便不用往上翻:

在线体验:

https://leon-made-this.work/museum

github 链接:

https://github.com/s010s/prehistoric-animal-museum

如果你愿意帮我试一下,我现在最想知道一件事:

在实际使用中,碰到什么样的问题?家里的小朋友喜欢吗

如果有明显等待,也欢迎告诉我大概的网络环境和浏览器,我想继续把这一段磨掉。

如果东西本身觉得还有点意思,GitHub 上顺手给个 Star 我也会很开心 :)

14283 次点击
所在节点    分享创造
251 条回复
leonleung
17 天前
@zgw0 #157 谢谢老哥支持,不过这个是 chatgpt 出的原型和 ui 哈~只用了一个前端相关的 skill - taste
yunshangzhou
17 天前
这是用到了什么技术栈,纯 vibe 吗,还是自己提前设计了架构?
leonleung
17 天前
@yunshangzhou #162 纯 vibe ,一行代码没写。不过有提前规划前端的技术栈,测试约束,e2e 测试,CI/CD 这些,还是需要有一定经验。
alading11
17 天前
厉害,做的很不错,收藏了
Harbor0202
17 天前
替我俩儿子谢谢叔叔,最近咿咿呀呀的天天看识图卡片,等我周末带他看看
leonleung
17 天前
@Harbor0202 欢迎反馈哈,我做这个的初心就是想能跟女儿一起探索,增进亲子关系,非常开心也能帮助到其他的家庭😄
im67
17 天前
网站很赞,父爱的力量也很强大( AI 加持下)
zsmile
17 天前
感觉不错,但朋友说是宝宝巴士上面已经有很多了,我都没用过。
不过 blender+ mcp 调整模型这个是怎么弄的呢?
v2da
17 天前
牛逼,就喜欢看着科普类知识,小时候看书,现在线上这个更加生动有趣了
Tujianxie
17 天前
做的真不错, 但是 steam 上有侏罗纪公园的游戏 里面的模型也很不错 可以试试挖一挖里面的模型?
muxui
17 天前
非常厉害。点赞
SamRol
17 天前
问大佬一个问题:这种 ui 风格是如何让 ai 实现的,是生成图片让 ai 参考吗,还是说直接提示词就有这样的效果。
cominghome
17 天前
期待史前动物博物馆
-->
动物博物馆
fujizx
17 天前
太棒了
shalou8023
17 天前
@leonleung #64 我投 A 一票
Ccbeango
17 天前
牛逼
leonleung
17 天前
@zsmile #168 我刚特意下载宝宝巴士看了下,偏卡通动画风格,也可以呀,不过需要会员,适合本来就有会员的。
blender 这个我用的是 ahujasid/blender-mcp 1.6.0 其实就是通过语言去驱动 llm 理解意图,编写 python 操作,然后通过 blender 自己的 python api bpy 去修改。描述语言一定要具体点,方便 llm 转义。比如修改什么部位,方向幅度,持续时间,如何算完成等等这些内容。感觉跟文生视频也有点像,制作精良的 ai 视频,提示词会非常具体
leonleung
17 天前
@Tujianxie #170 不敢碰这些有 IP 资产的呀,感觉一告一个准
leonleung
17 天前
@SamRol #172 Mattpock 的 prototype skill 出原型,ui 纯提示词,配合前端 taste skill
djs
17 天前
哇哦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1233153

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX