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

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

  leonleung · 18 days ago · 14371 views
  •   The specified image does not exist

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

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

    如果可以,也可以打包成 win 或 mac 的本地版本,估计也会有不少人感兴趣。。
    leonleung
        214
    leonleung  
    OP
       18 days ago
    @kuner0614 #206 看够了引战和各种对立,还是回归社区初心吧~~
    leonleung
        215
    leonleung  
    OP
       18 days ago
    @18k #209 有个 issue 想让我可以提高缩放比例,正在开发中,到时候可以看的更清楚点哈哈哈
    383394544
        216
    383394544  
    PRO
       18 days ago
    有意思 很棒
    sheeeran
        217
    sheeeran  
       18 days ago
    拖动旋转的时候,以脚底中心为中心轴,应该会更好
    GWesley
        218
    GWesley  
       18 days ago
    做的挺好的 能不能选几个丢到一个场景里面
    linshuizhaoying
        219
    linshuizhaoying  
       17 days ago
    真不错 已 star 加一个模拟的叫声把
    sampeng
        220
    sampeng  
       17 days ago
    如果可以打印出来更好了
    chashao
        221
    chashao  
       17 days ago
    真不错,再可以搞个场景渲染,加上地形植被~ 动物这个可以搞流式加载,先加载减面后的模型,后台再下载高模~ 感觉到后期资产的花费会有点高。。
    xxss0903
        222
    xxss0903  
       17 days ago
    太棒啦,增加一些互动呢
    kphiia
        223
    kphiia  
       17 days ago
    喜欢。像谷歌地球一样查看某地区的动物、动物的分布怎么样呢?
    SimpleSS
        224
    SimpleSS  
       17 days ago
    非常棒 很有意思
    zsmile
        225
    zsmile  
       17 days ago
    @leonleung 谢谢大佬,学习了
    a852695
        226
    a852695  
       17 days ago
    太棒了,有没有卡片版本,还有一个,就是怎么让这些东西,用不伤眼(减少屏幕蓝光)的方式展示给小朋友玩耍。
    swq1227
        227
    swq1227  
       17 days ago
    cool 啊,先收藏了
    sheepyoung
        228
    sheepyoung  
       17 days ago
    非常棒,收藏了!
    xiangbohua
        229
    xiangbohua  
       17 days ago
    太棒了,很好很好,收藏了,慢慢丰富模型,
    在加一点简单互动试试呢?比如点一下,打个滚,吃口草之类的,如果是飞的点一下飞一圈什么的
    lyyy123
        230
    lyyy123  
       17 days ago
    很棒,先收藏一波
    coldstars
        231
    coldstars  
       17 days ago
    我感觉很好!!!
    findex
        232
    findex  
       17 days ago via iPhone
    收藏了
    imspark
        233
    imspark  
       17 days ago
    @leonleung 淦……我 10 年前女儿 2 、3 岁的时候,买了一个 ipad 扫卡片出现这些动物的 3D 图,我记得那套卡片是小几百块…… 女儿玩了几个月就没玩了
    Zackx
        234
    Zackx  
       17 days ago
    哈哈哈,我儿子喜欢各种车,做了一个类似的,汽车博物馆 https://little-zack-wong.github.io/vehicle-museum/#/car
    leonleung
        235
    leonleung  
    OP
       17 days ago
    @HRTops #213 目前在打磨一个新功能,后续肯定还是会加恐龙种类的。让 AI 算了下静态资源 80M 左右了,打个 APP 怕太大
    leonleung
        236
    leonleung  
    OP
       17 days ago
    @sheeeran #217 有计划加相应的个人设置
    leonleung
        237
    leonleung  
    OP
       17 days ago
    @GWesley #218 哈哈,这些恐龙跨越多个史前时期,生活的环境不太一样,还得规划一下呢
    yuandoudouzm
        238
    yuandoudouzm  
       17 days ago
    做的真好!
    leonleung
        239
    leonleung  
    OP
       17 days ago
    @linshuizhaoying #219 感谢佬,史前生物没法考古叫声了呀,后面要开现代生物新馆,这个叫声是可以有咯
    leonleung
        240
    leonleung  
    OP
       17 days ago
    @sampeng #220 家长资料里有原始模型的链接,可以在那里自行下载打印咯
    leonleung
        241
    leonleung  
    OP
       17 days ago
    @chashao #221 是的,图片模型资源占资源多,现在的优化方式是先显示低清照片,加载好模型再显示模型
    leonleung
        242
    leonleung  
    OP
       17 days ago
    @xxss0903 #222 在规划打磨一个大功能,敬请期待咯~
    leonleung
        243
    leonleung  
    OP
       17 days ago
    @kphiia #223 这个是个很远大的期待哈哈
    leonleung
        244
    leonleung  
    OP
       17 days ago
    @a852695 #226 蓝光这个得靠硬件了吧,臣妾做不到呀~
    leonleung
        245
    leonleung  
    OP
       17 days ago
    @xiangbohua #229 在规划打磨一个大功能,敬请期待咯~
    leonleung
        246
    leonleung  
    OP
       17 days ago
    @Zackx #234 cool~建议切换的时候不要用全屏的 loading ,闲时加载附近的车车模型
    leonleung
        247
    leonleung  
    OP
       17 days ago
    @mb4555 @aaapp @levelworm @whisperer @ggmood @383394544 @SimpleSS @swq1227 @sheepyoung @lyyy123 @coldstars @findex @yuandoudouzm
    非常感谢各位老哥的喜欢、支持与收藏!后续有更新和新功能我会第一时间在 V 站分享!祝大家和家里的宝贝玩的开心~ 😃
    lingling47
        248
    lingling47  
       16 days ago
    blender+ mcp 调整模型这个是怎么弄的呢? 老哥很厉害啊 可以交流一些技术问题吗
    adsl554
        249
    adsl554  
       16 days ago
    好东西。先用着。


    谢谢大佬的开发
    hefmt137
        250
    hefmt137  
       16 days ago
    确实不错
    onling
        251
    onling  
       16 days ago
    这个不错,想知道模型什么来的
    1  2  3  
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   984 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 87ms · UTC 19:35 · PVG 03:35 · LAX 12:35 · JFK 15:35
    ♥ Do have faith in what you're doing.