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

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

  leonleung · 1 day ago · 10959 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 我也会很开心 :)

230 replies    2026-08-11 12:14:05 +08:00
1  2  3  
leonleung
    201
leonleung  
OP
   18h 13m ago
@jim1874 #198 嗯嗯,一定要看孩子能不能接受,有的孩子比较怕巨物,可以循序渐进
hellcer
    202
hellcer  
   17h 54m ago
点赞~建议每个模型旁边加一个现代的小动物作为对照,方便对体型大小有个概念,小孩子应该也喜欢和自己见过的动物进行对比
mb4555
    203
mb4555  
   17h 23m ago
很强
aaapp
    204
aaapp  
   16h 58m ago
针不错
grzhan
    205
grzhan  
   16h 55m ago
非常好,我儿子也三岁。如果他感兴趣的话我可以 fork 继续开发开发
kuner0614
    206
kuner0614  
   16h 40m ago
有意思,多发,我上 v 站就是为了来看这个的
levelworm
    207
levelworm  
   16h 19m ago
真棒!多谢楼主,向楼主学习。
whisperer
    208
whisperer  
   15h 29m ago
真棒,非常有心了
18k
    209
18k  
   14h 56m ago
很赞 最搞笑的是霸王龙翻肚皮啦 哈哈哈
ggmood
    210
ggmood  
   14h 53m ago
感谢送出🙏
leonleung
    211
leonleung  
OP
   14h 41m ago
@hellcer #202 之前有 v 友提过,已在排产计划中哈哈,难度有点大,可能要晚点推出~
leonleung
    212
leonleung  
OP
   14h 41m ago
@grzhan #205 欢迎欢迎~~
HRTops
    213
HRTops  
   14h 40m ago
这个配合 VR 已经有不少产品了,反而这种在线浏览的比较少。
你还会持续增加恐龙的种类吗??

如果可以,也可以打包成 win 或 mac 的本地版本,估计也会有不少人感兴趣。。
leonleung
    214
leonleung  
OP
   14h 40m ago
@kuner0614 #206 看够了引战和各种对立,还是回归社区初心吧~~
leonleung
    215
leonleung  
OP
   14h 39m ago
@18k #209 有个 issue 想让我可以提高缩放比例,正在开发中,到时候可以看的更清楚点哈哈哈
383394544
    216
383394544  
PRO
   14h 24m ago
有意思 很棒
sheeeran
    217
sheeeran  
   12h 56m ago
拖动旋转的时候,以脚底中心为中心轴,应该会更好
GWesley
    218
GWesley  
   10h 36m ago
做的挺好的 能不能选几个丢到一个场景里面
linshuizhaoying
    219
linshuizhaoying  
   4h 28m ago
真不错 已 star 加一个模拟的叫声把
sampeng
    220
sampeng  
   4h 5m ago
如果可以打印出来更好了
chashao
    221
chashao  
   3h 50m ago
真不错,再可以搞个场景渲染,加上地形植被~ 动物这个可以搞流式加载,先加载减面后的模型,后台再下载高模~ 感觉到后期资产的花费会有点高。。
xxss0903
    222
xxss0903  
   3h 11m ago
太棒啦,增加一些互动呢
kphiia
    223
kphiia  
   3h 5m ago
喜欢。像谷歌地球一样查看某地区的动物、动物的分布怎么样呢?
SimpleSS
    224
SimpleSS  
   2h 53m ago
非常棒 很有意思
zsmile
    225
zsmile  
   2h 53m ago
@leonleung 谢谢大佬,学习了
a852695
    226
a852695  
   2h 34m ago
太棒了,有没有卡片版本,还有一个,就是怎么让这些东西,用不伤眼(减少屏幕蓝光)的方式展示给小朋友玩耍。
swq1227
    227
swq1227  
   2h 31m ago
cool 啊,先收藏了
sheepyoung
    228
sheepyoung  
   2h 29m ago
非常棒,收藏了!
xiangbohua
    229
xiangbohua  
   2h 14m ago
太棒了,很好很好,收藏了,慢慢丰富模型,
在加一点简单互动试试呢?比如点一下,打个滚,吃口草之类的,如果是飞的点一下飞一圈什么的
lyyy123
    230
lyyy123  
   1h 6m ago
很棒,先收藏一波
1  2  3  
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3985 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 72ms · UTC 05:20 · PVG 13:20 · LAX 22:20 · JFK 01:20
♥ Do have faith in what you're doing.