爱意满满的作品展示区。
leonleung

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

  leonleung · 12h 25m ago · 8759 views

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 文件本身不小,如果首屏就背着一堆模型跑,桌面端还能忍,移动端体验就很容易崩。

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

  • 模型体积做压缩;
  • 当前动物按需加载;
  • 浏览当前动物时,利用空闲时间预取相邻动物;
  • 浏览器缓存和内存缓存两层一起用;
  • 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 我也会很开心 :)

210 replies    2026-08-10 22:26:49 +08:00
1  2  3  
leonleung
    201
leonleung  
OP
   3h 28m ago
@jim1874 #198 嗯嗯,一定要看孩子能不能接受,有的孩子比较怕巨物,可以循序渐进
hellcer
    202
hellcer  
   3h 9m ago
点赞~建议每个模型旁边加一个现代的小动物作为对照,方便对体型大小有个概念,小孩子应该也喜欢和自己见过的动物进行对比
mb4555
    203
mb4555  
   2h 38m ago
很强
aaapp
    204
aaapp  
   2h 13m ago
针不错
grzhan
    205
grzhan  
   2h 10m ago
非常好,我儿子也三岁。如果他感兴趣的话我可以 fork 继续开发开发
kuner0614
    206
kuner0614  
   1h 56m ago
有意思,多发,我上 v 站就是为了来看这个的
levelworm
    207
levelworm  
   1h 35m ago
真棒!多谢楼主,向楼主学习。
whisperer
    208
whisperer  
   44 mins ago
真棒,非常有心了
18k
    209
18k  
   11 mins ago
很赞 最搞笑的是霸王龙翻肚皮啦 哈哈哈
ggmood
    210
ggmood  
   8 mins ago
感谢送出🙏
1  2  3  
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2907 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 43ms · UTC 14:35 · PVG 22:35 · LAX 07:35 · JFK 10:35
♥ Do have faith in what you're doing.