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

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

  •  4
     
  •   leonleung · 4h 45m ago · 3999 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 我也会很开心 :)

    131 replies    2026-08-10 14:53:45 +08:00
    1  2  
    congminhcap246
        101
    congminhcap246  
       1h 7m ago
    很棒啊,我也用 AI 写了个 3d 科学演示不过没你这个精致哈哈 https://cuyo.ai
    body007
        102
    body007  
       1h 5m ago
    很棒
    SiuRayyy
        103
    SiuRayyy  
       55 mins ago
    支持,点赞
    DzwsGo
        104
    DzwsGo  
       54 mins ago
    很棒啊,点赞~~
    BrandonKevinsoon
        105
    BrandonKevinsoon  
       53 mins ago
    真的很棒啊~
    fengqing2
        106
    fengqing2  
       51 mins ago
    太牛了
    wp2wyx
        107
    wp2wyx  
       50 mins ago
    大佬,很强!
    zqguo
        108
    zqguo  
       48 mins ago
    很好啊,我儿子现在半岁,star 了,希望后面能用上。
    leonleung
        109
    leonleung  
    OP
       46 mins ago
    @avenger #70 老哥我又去咸鱼上搜了一下,确实挺便宜,可以可以
    leonleung
        110
    leonleung  
    OP
       45 mins ago
    @congminhcap246 #101 老哥咱两是不同风格,你这是酷炫风哈哈
    woshihgs
        111
    woshihgs  
       45 mins ago
    我也喜欢看
    leonleung
        112
    leonleung  
    OP
       44 mins ago
    @kasheemirvinglew #89 真的感谢原始 3d 模型的分享者,很多我都是直接拿来用的
    IanHo
        113
    IanHo  
       43 mins ago
    点赞
    muxiaofei
        114
    muxiaofei  
       42 mins ago
    star 了
    xuwuruoshui
        115
    xuwuruoshui  
       42 mins ago
    还可以,我觉得可以加一个时间线
    leonleung
        116
    leonleung  
    OP
       35 mins ago
    @zqguo #108 肯定能用上哈哈,我这个域名非常喜欢( leon 做了个___,leon made this work ,leon 做了这个,leon 做成了,很有想象空间哈哈),会长期续费。也感谢赛博 cf ,免费的 page 可以一直用下去~,开源项目肯定也会一直在~~
    juzilu
        117
    juzilu  
       30 mins ago
    star!!!!
    LongTimeNoSee
        118
    LongTimeNoSee  
       29 mins ago
    界面很不错
    liushengxian1230
        119
    liushengxian1230  
       28 mins ago
    牛的 完成度确实很高👍
    EriczzZ
        120
    EriczzZ  
       27 mins ago
    大佬做的很棒。
    能问一句从哪下载的 3d 模型吗?
    MindMindMax
        121
    MindMindMax  
       24 mins ago
    哈哈,你这个系统做完善一些可以卖给博物馆了。
    ala2008
        122
    ala2008  
       23 mins ago
    666 不错,可以让他们走路或飞翔,cdn 也可以加上,现在确实加载慢
    CharlieWK
        123
    CharlieWK  
       23 mins ago
    很棒很优秀的父亲,收藏了先
    xiebaota
        124
    xiebaota  
       21 mins ago
    收藏!!
    yeyypp92
        125
    yeyypp92  
       19 mins ago
    太棒了,效果真不错,很喜欢恐龙,如果后期能加入海洋相关的动物,一定效果更棒!
    rain423
        126
    rain423  
       14 mins ago
    体验下来感觉不错哦,好巧我最近也做了一个类似的产品,为了让我家娃了解动物的,不过没有用 3d 模型
    maicai666
        127
    maicai666  
       13 mins ago
    不错的项目,从生活中出发。有个建议,资料里虽然写了尺寸,动物旁边要是有个参照物,例如人类,能让小朋友更直观的感受到动物的大小
    junlong
        128
    junlong  
       9 mins ago
    很棒,感谢!
    iv2ex
        129
    iv2ex  
       8 mins ago
    优秀
    felixv
        130
    felixv  
       3 mins ago
    感谢分享,家里两个娃刚好有需要。
    leonleung
        131
    leonleung  
    OP
       Just Now
    @xuwuruoshui #115 谢谢老哥,很好的建议👍,不过目前面向低幼龄儿童,暂时还没计划做得比较科学严谨哈
    1  2  
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5380 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 64ms · UTC 06:54 · PVG 14:54 · LAX 23:54 · JFK 02:54
    ♥ Do have faith in what you're doing.