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

17 天前
 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 我也会很开心 :)

14237 次点击
所在节点    分享创造
251 条回复
congminhcap246
17 天前
很棒啊,我也用 AI 写了个 3d 科学演示不过没你这个精致哈哈 https://cuyo.ai
body007
17 天前
很棒
SiuRayyy
17 天前
支持,点赞
DzwsGo
17 天前
很棒啊,点赞~~
BrandonKevinsoon
17 天前
真的很棒啊~
fengqing2
17 天前
太牛了
wp2wyx
17 天前
大佬,很强!
zqguo
17 天前
很好啊,我儿子现在半岁,star 了,希望后面能用上。
leonleung
17 天前
@avenger #70 老哥我又去咸鱼上搜了一下,确实挺便宜,可以可以
leonleung
17 天前
@congminhcap246 #101 老哥咱两是不同风格,你这是酷炫风哈哈
woshihgs
17 天前
我也喜欢看
leonleung
17 天前
@kasheemirvinglew #89 真的感谢原始 3d 模型的分享者,很多我都是直接拿来用的
IanHo
17 天前
点赞
muxiaofei
17 天前
star 了
xuwuruoshui
17 天前
还可以,我觉得可以加一个时间线
leonleung
17 天前
@zqguo #108 肯定能用上哈哈,我这个域名非常喜欢( leon 做了个___,leon made this work ,leon 做了这个,leon 做成了,很有想象空间哈哈),会长期续费。也感谢赛博 cf ,免费的 page 可以一直用下去~,开源项目肯定也会一直在~~
juzilu
17 天前
star!!!!
LongTimeNoSee
17 天前
界面很不错
liushengxian1230
17 天前
牛的 完成度确实很高👍
EriczzZ
17 天前
大佬做的很棒。
能问一句从哪下载的 3d 模型吗?

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

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

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

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

© 2021 V2EX