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

14226 次点击
所在节点    分享创造
251 条回复
leonleung
17 天前
@pipibai #54 这个我还真没研究过,最初就只是给自家孩子用的,就想简单快速弄个原型试试水,所以也是直接找的公开可用的 3d 模型,没考虑过专门去生成。后面试着让 chatgpt sol 去调整,感觉效果也不太好,不知道豆包这个咋样,可以研究一下~
penll
17 天前
手机屏幕下,太小了。放大也很有限,可以先支持放大更大些,手机上
cue
17 天前
太酷啦!
leonleung
17 天前
大家呼声最高的新馆,目前我在考虑两个方向:
方案 A:现代猛禽猛兽馆(花豹、狮子、大白鲨等,继续主打克服恐惧和科普)
方案 B:古生物延伸/远古海洋馆(邓氏鱼、龙王鲸等)
家里有娃的老哥们,大家觉得小朋友会更喜欢哪一组?或者有什么必收录的动物推荐吗?
leonleung
17 天前
@penll #62 确实是,之前没考虑到,都是在家里大屏幕上看的,一会我调整发布一下
sansei
17 天前
老哥很强
uruana
17 天前
666, 效果不错, 能加上简单的部位标注说明就更好了
gimp
17 天前
👍 如果技术上能做到,感觉可以给每个动物加两个标志性的动作,例如选择霸王龙后,可以点击 ‘攻击’ ‘跳跃’ ‘摆头’,有些标志性的动效动作会更酷。
Bingbing
17 天前
不错不错~~~
avenger
17 天前
感谢分享,太赞了~

关于 3d 模型,可试试 meshy.ai 自定义生成
我上一个项目的佛像 rushiwowen.co/zen 就是用这个生成的

可以抽卡,有一定的概率,生成后也可以后期微调,也不用担心版权问题
海鲜市场上有卖积分的,费用也不高
leonleung
17 天前
@cue #63 谢谢老哥!家里有小朋友的话,后面可以带娃试玩看看哈,想听听小朋友第一眼看到最喜欢哪一只~
leonleung
17 天前
@sansei #66 多谢老哥!目前主要在磨移动端性能和加载体验,后面代码也会持续重构,欢迎 GitHub 关注/提 PR 呀!
leonleung
17 天前
@Bingbing #69 哈哈感谢支持!
liuliuliuliu
17 天前
牛逼,模型是哪里搞的?
szxshop00
17 天前
我会选择看一部纪录片
zek
17 天前
不是,你们怎么这么牛逼 ,什么都会做
jackerbauer
17 天前
相当棒啊
chengz
17 天前
做的很好,点赞
Honye
17 天前
不知道说什么,已 Star
leonleung
17 天前
@uruana #67 是的呢,我一直想加点互动效果,但是一直没有比较好的产品方案,老哥有想法可以具体提一下哈,我看看大家的想法建议

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

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

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

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

© 2021 V2EX