给女儿做了一个 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 我也会很开心 :)

14217 次点击
所在节点    分享创造
251 条回复
leonleung
17 天前
欢迎各位 V 友体验,可以带小朋友一起看看哈~
dgmgso
17 天前
看不够根本看不够,太少了,多来点动物。不一定是史前动物。现代动物也行啊
tjss
17 天前
再做成 vr 版
Egfly
17 天前
很棒,感觉可以再开一个系列,做常识教学的
guoch
17 天前
不错,有点意思
TimPeake
17 天前
有趣 收藏了
leonleung
17 天前
@dgmgso #2 谢谢老哥,哈哈,后续可以弄个猛禽猛兽馆,这些我女儿也是真怕,之前给她看动物世界,也是看到花豹立马就跑,至今没敢带她去动物园
AaronLee01
17 天前
看了一下还挺好看的,一个提升点就是画面旋转的时候如果背景(环境)能和前景(动物)一起旋转就效果更好了
brant2ai
17 天前
挺厉害的,不过现在恐龙的形象不是改了,听说霸王龙更像鸡?
leonleung
17 天前
@tjss #3 这个点子好,不过难度就有点大了哈哈哈,ai 疯狂赋能~
lvsp95
17 天前
@dgmgso +1 不一定是做史前的,可以收录现代的加分类,比如普通动物、每个国家保护动物、等级之类
leonleung
17 天前
@Egfly #4 是的!想搞个身体的秘密,买过一本绘本,感觉不太好跟孩子讲,不知道弄成线上的会不会好一点
lvsp95
17 天前
@lvsp95 能做到动物百科图鉴就厉害了
leonleung
17 天前
@guoch #5 谢谢老哥,欢迎推荐给有小朋友的家庭玩玩,希望大家都能保持童心和好奇心~
leonleung
17 天前
@AaronLee01 #8 这个点子有朋友提过,我现在是用 image2 生成的背景图,还没想好咋做场景化和交互,确实对 3d 不太了解,感觉可以深入学习一下
leonleung
17 天前
@TimPeake #6 谢谢老哥🙏
simbaCheng
17 天前
很有意思,不过确实不够看
leonleung
17 天前
@brant2ai #9 化石很难还原真实的样子了,现在大多是影视演绎,不一定符合真实的,话说要有时空穿越机就好了,真想去看看它们究竟长什么样
WEAlex
17 天前
厉害。

特别感触这一句:这也是整个项目里我第一次比较强烈地感觉到:
AI 对我来说最有价值的地方,不一定是“把网页代码写快一点”,而是让我敢碰以前基本不会主动碰的东西。


我也在做,同样的接触了 blender 及 MCP ,做出来的太糙了。也买了域名、做了网站,利用家里的 nas 进行了网站部署、大模型部署,结合了 RAG ,AI 问答。3D 这个我一直是让 AI 自己操作 blender 来做,我也去搜搜现有模型试试。
hellofox
17 天前
做的不错!

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

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

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

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

© 2021 V2EX